ScrollSmoother shortfall - velocity jumps on hard stops

[SteveS]

Title says most of it. Overall, ScrollSmoother's getVelocity feature seems jittery compared to libraries I have previously used, almost as if it has a lower polling rate. It also really doesn't like hard stops as per the included video. It's not hard to imagine someone scrolling and stopping this fast on mobile. I couldn't find any other posts about it, and there doesn't seem much to do in the way of configuration or settings.
 

 

[SteveS]

Perhaps there is a means of applying the inertia plugin to the velocity that would make it smooth out on direction change?

[GreenSock]

@SteveS are you using the ScrollTrigger's or the ScrollSmoother's getVelocity()? Could you provide a minimal demo please? It'd be a HUGE help in troubleshooting

[SteveS]

I can't share a demo right now. What it looks like is that on desktop the smooth scroll terminates at the end of the page smoothly, but on mobile the smoothing is disabled and therefore the page slams into the end. Since the scrolling ends so abruptly, the velocity goes from whatever it's at to 0 instantly. Same for switching directions really quickly. There is one or two ticks where the velocity goes from high, to basically zero.

I guess the question is whether this is something that ScrollSmoother should handle, or if it's something I should be accounting for in my code.

[GreenSock]

Ah, right, there's no smoothing happening on mobile so it's not a shock that is more abrupt. If you're trying to smooth that out, you could definitely use a gsap.quickTo() to introduce some gradual interpolation. In fact, I whipped together a helper function that'll return a FUNCTION that you can call anytime to get the smoothed-out velocity: 

 

function velocitySmoother(smoother, duration) {
  duration = duration || 0.5;
  let tracker = {v: 0},
      vLast = 0,
      tLast = Date.now(),
      velocityTo = gsap.quickTo(tracker, "v", { duration: duration });
  duration *= 1000;
  return () => {
    let v = smoother.getVelocity(),
        t = Date.now(),
        ratio = 1 - Math.min(1, (t - tLast) / duration);
    if (v !== vLast) {
      velocityTo(v);
      vLast = v;
      tLast = t;
    }
    return v - (v - tracker.v) * ratio;
  }
}

Usage:

let smoother = ScrollSmoother.create({
  ...
});

let getVelocity = velocitySmoother(smoother);

// log out the velocity every 100ms...
setInterval(() => console.log("velocity", getVelocity()), 100);

Does that help? 

[SteveS]

Yep, that works quite well. My only wonder is how I could go about putting an ease on the velocity smoother since it looks a bit unnatural right now.

[GreenSock]

It's tough for me to advise without a minimal demo - there are two approaches:

1. Use a gsap.quickTo() on the thing you're setting based on the velocity so that it smooths out that transition. In other words, you're not smoothing the velocity - you're smoothing the thing that's influenced by that velocity. 
2. Use the "duration" parameter I gave you in that helper function if you'd like it to take longer to transition the velocity. Or you can set an ease in the gsap.quickTo() that's inside that helper function. The default is "power1.out", but you can set it to whatever you want. 

Enjoy!