Tween with momentum effect

[zhurgan]

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!

[Carl]

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.

[zhurgan]

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.

[Filip Winiarski]

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

[ZachSaucier]

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

[Filip Winiarski]

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 ?

[ZachSaucier]

I stumbled across this post. This sort of thing is now done easily via GSAP's ScrollTrigger plugin!

[kvncnls]

On 11/12/2020 at 10:49 AM, ZachSaucier said:

I stumbled across this post. This sort of thing is now done easily via GSAP's ScrollTrigger plugin!

How is this done with the new ScrollTrigger plugin? Would you happen to have a tutorial on it?

[GreenSock]

@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)!