Jump to content


Smoothing out progress on scroll

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

I've read some topics on the forum about this, but they had some dead links, so that's why I'm asking this again.

I have this script that listens to the scroll event and then "scrolls through" the Timeline progress depending on the mouse position. It's working great, especially on my MacBook Pro that has built-in inertia/momentum to the trackpad. What I would like to do is to add some kind of smoothing or easing to the progress value, so that it's eases from the last value to the next on scroll, or whatever method that would work best.

This is the script I'm using:

$window.on("scroll", function () {
        var documentHeight = $(document).height();
        var windowHeight = $window.height();
        scrollTop = $(window).scrollTop();
        var scrollPercent = Math.max((scrollTop) / (documentHeight - windowHeight), 0);

Any idea on how to implement easing to the progress change? I've tried to use this script below for smoothing out the mouse movement overall, but somethings tells me that changing the progress change instead of the scroll movement itself would be better/more performant? Especially if they both are called on the same scroll event. Maybe someone have some best practice advise for this.

function smoothScroll() {
    var a = $(window);
    a.on("mousewheel DOMMouseScroll", function (b) {
        b = b.originalEvent.wheelDelta / 120 || -b.originalEvent.detail / 3;
        b = a.scrollTop() - parseInt(400 * b);
        TweenMax.to(a, 1.1, {
            scrollTo: {
                y: b,
                autoKill: !0
            ease: Power1.easeOut,
            overwrite: 5


Link to comment
Share on other sites

I wonder if you could start creating a demo with your questions? It's much easier to provide the best advice and assistance with a demo rather than some pasted code. Here's how to do it.



More info in this thread:

I think this thread may help with your question.

Thanks and happy tweening.

  • Like 5
Link to comment
Share on other sites

Yes, sorry. This is how I'm doing it: 

See the Pen bQGawv by anon (@anon) on CodePen

Although the other solution in the forum post that you provided is neat, it doesn't really work with my example since the animation is happening in the fixed #holder div. In other words, the page can't be "scrolled" with a translate animation as the content being animated is contained within a fixed div.

So basically the options I see is either smoothing/easing the scroll movement itself, by jacking the scroll – or (the method I'm asking for) to ease the changes of the progress value of the Timeline based on the scroll position, so I don't have to manipulate the scroll behaviour per se.

Link to comment
Share on other sites

Ya you can ease the progress of target tween or timeline. Create a paused timeline and on scroll animate the proxy tween so you can use it's progress for animation.


var proxyTween = TweenLite.to({}, 1, {paused: true});

TweenLite.ticker.addEventListener('tick', function(){
  var progress = timeline.progress();
  progress += (proxyTween.progress() - progress) * ease; // ease can be anything from 0.5 to 0.01


  • Like 3
Link to comment
Share on other sites

Thanks for your answer!

Would I have to call something inside the scroll event? If you take a look at my CodePen above, how would you implement it?

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.