TimelineMax: Play animation on mouse scroll?

[acidking]

Is it possible to play an animation on mouse scroll? I assume it requires using seek(), an example would be very helpful!

 

What I am trying to achieve is having the timeline animation scaled to a range of scroll position, for example the timeline should start playing from scrollTop 1000 and end at scrollTop 3000, for example, so that it's playing while the user is scrolling.

[Rodrigo]

Hi,

 

I'm not very familiar with the mouse wheel events (if that's what you're asking for), but since you're talking about scroll position, you can use JQuery's scroll event in order to detect the current scroll position and execute your code accordingly.

 

Although I recommend you using the progress() method instead, it's easy to associate whether the scroll is up or down with the progress value of a tween/timeline. Maybe you could find this useful:

http://codeaway.info/parallax-and-scrolling-control-of-tweens-with-greensock-ap-js/

 

If you're after something else, please provide a reduced sample in codepen or jsfiddle in order to get a better idea.

 

Rodrigo.

[acidking]

Hi, yes that links shows a good example using progress().

Here's another example: http://www.mozilla.org/en-US/firefox/os/

 

If you click 'The Features' on top, then scroll down and see the phones and text moving in and out on the grey background. I know that was done with Scrollorama, which uses Greensock as a base for animations, but I don't want to use scrollorama and prefer a direct method.

[Rodrigo]

Well the code in that tutorial is as direct as I can think about.

 

If you're intrigued of how the Firefox site works, well basically the container for "The Features" elements is pinned (superscrollorama method). You can achieve something like that by changing the container position to fixed when the tween/timeline starts, animate all your objects and onComplete change the container's position to the regular one, could be relative or absolute.

 

One of the things I never mentioned in that tutorial or the comments is that for this type of sites the best way to work is with fixed elements and markers (emtpy DOM objects that are used to extend the scroll amount in order to get a smooth animation flow).

 

As you can see the code is not complicated and instead of using fix numbers you can use this markers I mentioned and start and end the animations when you get to those elements offset position.

 

Rodrigo.