STE2DG
(Stephen G)
November 21, 2019, 10:19am
1
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)
MaxZieb
(Loves Hype)
November 21, 2019, 11:48am
2
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
STE2DG
(Stephen G)
November 21, 2019, 11:51am
3
Nice solution, thanks very much for the lead @MaxZieb .
Will try to implement that now!
Stephen.
STE2DG
(Stephen G)
November 21, 2019, 11:54am
4
Any chance you could share the resources files and html as a zip @MaxZieb ?
Im running ver3.6 so can’t open. Many thanks,
MaxZieb
(Loves Hype)
November 21, 2019, 11:56am
5
Shame on you , upgrade already! Support Tumult!
Res.zip (99,9 KB)
ResSymbols.zip (102,9 KB)
2 Likes
STE2DG
(Stephen G)
November 21, 2019, 12:22pm
6
I will been an avid user since 2015…so think it’s time to fork out a few quid again at this stage!!
Cheers @MaxZieb
1 Like
MaxZieb
(Loves Hype)
November 21, 2019, 12:27pm
7
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)
[image]
Stacked cards using symbols and a sorting function. This is still not a extension but already has the potential for some fun stuff. Doesn’t need to have visible boxes for example or could have a diffrent stacking logic.
Demo:
StackedCardsSymbols.html
Download:
StackedCardsSymbols.hype.zip
3 Likes
MaxZieb
(Loves Hype)
November 21, 2019, 8:32pm
8
Updated StackedCardsSymbols.hype
and example, from previous reply. Refresh browser until you ses the close button. Source is also updated.
1 Like
ktewes
(Kalle)
November 21, 2019, 9:39pm
9
On iOS the whole content disappears on click…
STE2DG
(Stephen G)
November 22, 2019, 8:20am
11
nice piece of work @MaxZieb lets run with this now 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!
MaxZieb
(Loves Hype)
December 10, 2019, 4:19pm
12
There is an extension for this now also supporting vertical layouts and nesting.
[HypeDocumentLoader]
This little extension was initially more primitive and inspired by the following thread . It then turned into a template and now it has become a full extension after reading an article on the Figma auto layout feature.
This extension helps with positioning elements using a stacking order. It should be assigned to a group using data-auto-layout using the value vertical or horizontal. You can use the data-auto-layout-margin to set the margin between elements. This extension …
2 Likes