Move divs down when top div expands

Hi all,

Anyone know how to move an object along the Y-Axis when an object above it on the stage grows in height and crosses its path.

My hunch is that is can be done with Z values but unsure how to set this up.

I am trying to replicate this effect >

The goal is to tap on any card (card 2 in the hype file) , run the JS function to toggle the card height while pushing the card below down the screen on toggle.

Thanks guys!

toggleCardDeck-ver1.hype.zip (21.0 KB)

Could be done with Symbols and a sorting function to make it totally generic. Currently only timelines and groups.

Demo:
StackedCards.html

Download:
StackedCards.hype.zip

Nice solution, thanks very much for the lead @MaxZieb.

Will try to implement that now!

Stephen.

Any chance you could share the resources files and html as a zip @MaxZieb?

Im running ver3.6 so can’t open. Many thanks,

Shame on you :nerd_face:, upgrade already! Support Tumult!
Res.zip (99,9 KB)
ResSymbols.zip (102,9 KB)

I will :smiley: been an avid user since 2015…so think it’s time to fork out a few quid again at this stage!! :roll_eyes: :tired_face:

Cheers @MaxZieb

Stacked cards using symbols and a sorting function.

Demo:
StackedCardsSymbols.html

Download:
StackedCardsSymbols.hype.zip

Moved this to it's own thread as might be updating it further… (beyond the OP intent)

Updated StackedCardsSymbols.hype and example, from previous reply. Refresh browser until you ses the close button. Source is also updated.

On iOS the whole content disappears on click…

Fixed

nice piece of work @MaxZieb lets run with this now :wink: and see what more can be done!

I will repost another ver when i have it built out more.

The aim of this project was to build a learning activity but the layout and functionality is useful for many applications.

Well done on this!

There is an extension for this now also supporting vertical layouts and nesting.