Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
zhurgan

Tween with momentum effect

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,

 

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

  • 1 year later...
  • 7 months later...
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?

Link to comment
Share on other sites

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