How can I achieve the effect like on this site:
https://www.seedlipdrinks.com/
I need to keep the white frame fixed on every device and at the same time control the animation with the scroll.
How do you advise me to do?
I couldn’t find any ‘scroll’ event in Hype (except control the animation with ‘OnDrag’ on a transparent box put over, but this solution doesn’t work on desktop).
Thank you so much for the help!!
The 1:1 connection between a timeline and the scroll position is not something you can currently do in Hype, but a way to workaround this is to setup a timeline with ‘steps’ consisting of a series of segments that correspond to the scroll direction and execute an animation based on that direction. You would use regular JavaScript to detect the vertical scroll delta value, and run a timeline forward or backwards based on that returned value. The blog post here outlines this technique:
Using ‘ease-in’ animations when resuming your animation for new ‘steps’ will make this technique more natural-feeling.
Hype does not work properly with css position fixed, but in this special case i would say that temporary set the body to overflow : hidden + height: 100% as long as the animation runs will do the job …
You can also try to use a page with regular HTML and multiple Hype Widgets. See …
Also one good keyword you can find ressources to support this kind of behavior is "scrollytelling" also …