Jump to content
Search Community

Tween with momentum effect

zhurgan test
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

Hi and welcome to the GreenSock forums,


That's a pretty crazy site. Thanks for sharing. Not exactly sure how they do all that. I did some investigating and they are definitely using GSAP but they are also loading the skrollr library which may be handling how the GSAP animations are controlled via scroll.


They most likely have most of the animations in a timeline and are using the scroll position to change the progress() of that timeline. The progress() of a timeline can also be tweened so you can technically animate the speed at which it advances. My guess is that when the scrolling stops they create tween that does a smoothe ease that advances the progress slightly. They may be trying to match the velocity of the scroll but I really don't know. I'm personally not a fan of scroll-driven animations or scroll-jacking so I haven't studied the implementation much. 


This demo below illustrates how you can tween the timeScale() and progress() of a tween. You can do the same thing with a timeline. Once you get a handle on that concept it isn't too far of a reach to have scroll position control the progress.


There may be some others around here who can get you closer to an example like that site.

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

Thank you so much for your thoughts, Carl! You gave me some hint by this:

On 08.09.2017 at 6:02 AM, Carl said:

when the scrolling stops they create tween that does a smoothe ease that advances the progress slightly.


Still, other opinions are appreciated.

Link to comment
Share on other sites

  • 1 year later...


I've recently had to implement scroll with momentum/inertia. It's actually incredible simple:

1) animate scroll with basic linear tween with short duration (eg. .15 s) - let it be tween A
2) create second tween with easeOut ease and way longer duration (eg. 1 second)- let it be tween B
3) when user scrolls, use tween - basic scroll movement
4) whenever user stops scrolling launch tween B - you can measure time from the last event and decide if user has stopped scrolling
5) whole magic is how to make smooth transition between both tweens - you can look for deltaY/deltaX values from the wheel event. For more advanced animations I would recommend looking for some physics library, to make all movements super natural.
6) interpret delta value to get the scrollTo x value in tween B

See the Pen OeXYKv by FilipWiniarski (@FilipWiniarski) on CodePen

I also think you could make a custom dynamic ease to make the momentum feel more natural. It's all about fine tuning.

  • Like 2
Link to comment
Share on other sites

  • 1 year later...
  • 7 months later...

@kvncnls there's a lot of information in the ScrollTrigger docs, plus a page dedicated to demos: https://greensock.com/st-demos and there's a whole video that walks through everything. If you have any other questions, feel free to start a new thread and please make sure you include a minimal demo and we'd be happy to help with any GSAP-specific questions.


Happy tweening (and scrolling)!

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.
  • Create New...