I’d like to change image size when scrolling.
For example when the page is loaded, the image is in the centre.
When scrolling down, the image should be smaller. This should work also in other direction.
As You scroll down the page the image shrinks - all sizing and positioning is done in the “Main Timeline” using Hype’s interface - easy for You to change to fit your needs without coding.
The quick start will explain the simple steps.
But just add the CDN link to the head <script src="https://cdn.jsdelivr.net/gh/markhunte/Hype_Symbol_Override_Extension@main/symbolOverride.min.js"></script>
Go into the symbol and select the text box, set an Extended Attribute on it to
Exit the symbol.
Select all the symbols and set an Extended Attribute Key on them all to the same key that's was used on the text box
And then individually select each Symbol's Extended Attribute data-message_text
and set the Value to your text.
The Documentation pages give you more ideas on other properties you can use.
and did you have a look at @MaxZieb's HypeActionEvents¿
it'll offer (among a ton of other things) intersection-event with minimal scripting involved. swans.hype.zip (1,8 MB)
regarding intersection i just remembered that i had an old approach that may work completely without scripting: Track Intersections between Hypeelements
though the swans-file above should be easy to manage
@MarkHunte grazie! both examples are very useful, customizing the text as well. I don't need it right now, but it's a clever trick.
After some tests i prefer your first solution, just because I can set the trigger position in the scene and i love the behavior of the animation.
While not perfect (due to scroll speed) it is very elegant!
interesting approach, it's an idea to use it in another project, thanks!