Jump to content
GreenSock

zhurgan

Tween with momentum effect

Recommended Posts

Hi,

 

Any ideas how to create a tween with momentum effect? 
For example, in this site: http://tram-house.com / elements continue moving for a while after scrolling has stopped.

 

Thank you in advance!

Link to comment
Share on other sites

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...

Hey,

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

@Filip Winiarski Thanks for posting! You could post a minimal demo on CodePen to exemplify you're approach if you'd like. I think it'd be more helpful for future onlookers.

  • Like 1
Link to comment
Share on other sites

16 hours ago, ZachSaucier said:

@Filip Winiarski Thanks for posting! You could post a minimal demo on CodePen to exemplify you're approach if you'd like. I think it'd be more helpful for future onlookers.


@ZachSaucier @GreenSock I have updated my comment with an example ?

  • Thanks 2
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.
×