I’m trying to create a page that has the scrolling effect found in this tutorial and sample file:
But when I try to scroll up in the timeline to go backwards in the timeline, it doesn’t work. It goes back a couple of frames and then immediately goes forward again. It sometimes works correctly in Safari, but it never works correctly in Chrome. The example project file in the tutorial doesn’t work correctly, either.
Any suggestions?
My opinion is that that tutorial is outdated. There’s a new action trigger, the On Enter Viewport/On Exit Viewport option. This allows you to have an element that you position out of the viewport, which would likely be below the page. This element will be used as an action trigger to have an animation (on a timeline) play, such as other elements fading in and moving, for example.
So, for On Enter Viewport, the action when your chosen trigger element (which can be invisible/zero opacity, by the way) enters the viewport could be: Continue Timeline, (the timeline where you set up your animation). I recommend having that be on a different timeline than your Main Timeline.
Because there is also On Exit Viewport in the Actions Inspector, you can make the animation reverse when your trigger element leaves the viewport, which is going to happen when the user scrolls in the opposite direction. The action could be: Continue Timeline ->Play in Reverse.
Here is a link to download a quick example. The red line below the viewport is the On Enter Viewport action trigger. Let me know what you think.
scroll_animation.hype.zip (13.5 KB)
Thanks for the info and the example. You really made the functionality clear and I think you’ve pointed me in the right direction. I’ll give it a shot and see if I can rework my project to use triggers. It seems like a better way.