Jump to content


TimelineMax: Play animation on mouse scroll?

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

Link to comment
Share on other sites



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:



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



Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.



Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.