Scrolling and animation linked to scrolling

1

What do I have to do to make scrollable elements on the canvas while other elements are fixed. And how does scrolling in general work?

My second question is how it is possible to link actions/animations to scrolling. For example when Im scrolling down a picture scales up – the animation should be linked to the scrolling.

Greetings

2

There isn’t currently a way to create a 1:1 / scrolling:animation link, but you can trigger animations after scrolling down past a defined point. This post explains how to do that: Viewport / Waypoint actions in Tumult Hype: Starting an animation when an element is visible

1 Like
3

How does scrolling in general work?

4

You have an example at:http://blog.tumult.com/2014/08/06/tutorial-easily-create-parallax-effects-and-single-page-scrollable-experiences-in-tumult-hype/

It works great on one direction. how do I get it to run backwards? (Example - Apple iPhone page - tall site, various element moves - both forward and backward - are triggered when you scroll within range of each section.)

Also, is there a way to do this via the vertical scroll bar?

5

Hi Trey

Here was something I was working on. It shows a simple function on scene load that dynamically updates the position in the animation timeline as the window is scrolled. So as you scroll up and down the timelines move back and forth. Also added some other on enter and exit viewport actions. This might give you an insight in to how to adapt it to suit your needs.

parallax-vDBear.zip (2.5 MB)

6

Wow, thanks for that example!
Could you please shed some light on why did you make the scrollMNEK behaviour?

7

I have dealing with this same problem. While the scrolling forwards works nice, going backwards doesn’t work, and when it does its quite buggy, sometimes it goes backwards and other its goes forward again.

8

Hi DBear! I just wanted to thank you for making this project file available. It’s quite good and has been a God send on the project I’m working on. I can’t believe more people haven’t found your solution and made good use of it since I still see this question ( parallax scrolling ) being asked a lot…

Cheers and thanks again!

  • Jordan
1 Like