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

2 Likes

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)

2 Likes

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

1 Like

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)

3 Likes

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

1 Like

On iOS the whole content disappears on click…

Fixed

2 Likes

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.

2 Likes