Animation starts on scroll

[deboracameron]

I’m fairly new to Hype but love this app so much. I’m trying to have this lifecycle animation load on mouse scroll. The animation loads on page load which is not ideal because there’s a lot content up top.

I tried some JS but got it really wrong. I couldn’t figure out how to embed to the page and used an iframe. Can I still do load on scroll with an iframe?

Can someone share some tips?

THANK YOU!

This is the page link: https://hubs.ly/H0dKCCw0
And my hype file here: https://www.dropbox.com/s/41itlnmlvgkuh2j/Lifecycle%20Ongoing%20and%20DD%20-%20share.zip?dl=0

[Daniel]

Here's how to do that, no JS necessary

Viewport / Waypoint actions in Tumult Hype: Starting an animation when scrolling to an element

Tumult Hype 3.5 introduces the concept of viewport actions: You can run any action when an element has been scrolled into the visible area of the browser or device. You can also run an action when an element exits the viewport. (Or both, of course) For documentation on viewport actions, please visit: https://tumult.com/hype/documentation/#viewport-actions (This is a Pro feature). Waypoints with jQuery: The technique below outlines a technique that uses jQuery and a plugin to handle this same …