[7.3.0] scrollTo feels agressive

[TomS-]

Issue Summary

The duration of scrollTo I feel worked better in previous versions, it's quite hard to get a smooth transition now as it's very fast until the last like (90%), so if you set it to 1000, it feels more like 200 for example. The dampening is very subtle.

Expected Behavior

scrollTo to feel more like it's sticking to the duration.

Current Behavior

scrollTo feels much faster than the duration set.

[idiotWu]

scrollTo feels much faster than the duration set.

Nope, it takes exactly how long the duration is.

For the previous versions, scrollTo was based on a quadratic curve. For current one, it's using the same easing algorithm as all other scrolling, i.e. m(n) = m(0) * d^n. The damping factor is computed through the given duration.

[idiotWu]

Maybe I should support automatically calculated duration parameter 🤔

[TomS-]

@idiotWu I can see why you have made that change, I guess in my case I have a hero image which has a parallax background (the main reason I use this plugin is to keep parallax looking smooth across all devices).

The scrollTo is a click action to scroll people past the hero image (as it covers the full viewport), this happens so fast now that you completely miss the parallax effect.

Maybe this is a rare use case?

[idiotWu]

So what about extend duration to some big value like 1500?

[TomS-]

@idiotWu I tried setting it to 2000, however, it only seems to effect the dampening. So it will scroll fast until the last 90% then slow down there.

The bezier curve feels more like - http://cubic-bezier.com/#0,1,.3,1 rather than http://cubic-bezier.com/#.3,1,.8,1 if that makes sense?

[idiotWu]

So it will scroll fast until the last 90% then slow down there.

It's a by design behavior. Or we say the basis of momentum scrolling.

If you want to use cubic bezier easing, I'm afraid you have to calculate the curves yourself.

[TomS-]

@idiotWu Sorry, I was referencing more the feel of the movement over the specific easing method. However, I love this project, it definitely brings a new quality to websites and the scrolling is spot on. I'll just use the previous version in this case for the previous method of scrollTo.

[idiotWu]

Oh sorry I didn't read the message carefully...

Just one more question here: does the other scrollings make you feel unsmooth like the scrollTo method? I mean wheel scrolling, or keyboard navigation, or click one the tracks - they're using the same easing algorithm now.

[TomS-]

@idiotWu wheel scrolling, keyboard scroll and clicking on the track feel absolutely perfect. I wouldn't change it all. I guess the scrollTo was better before because I felt like the scroll happened across the duration so you could smoothen it. I guess in jQuery the difference would be:

$(window).scrollTop(250); // new Method
$("html, body").animate({scrollTop: 250}, 1000);  // old Method

If that makes sense?

[idiotWu]

Actually both the previous version and current use easing functions. Current one performs more like clicking at the track (momentum based scrolling).

[TomS-]

@idiotWu maybe I can DM you the website I'm working on so you can see what I mean in more detail?

[idiotWu]

@TomS- thanks for the link. I must admit that it's a little weird with current version.

Maybe I can provide a scrollToBezier plugin that accepts custom cubic bezier curves in next major release (after I make this library plugin-able).

I saw you are using jQuery in your site, right? If so, you can use the following workaround:

$({ top: 0 }).animate({ top: 1000 }, {
  duration: 1000,
  easing: 'swing',
  step(value) {
    scrollbar.setPosition(0, value);
  }
});

[TomS-]

@idiotWu I think that would be an excellent edition. I am indeed. Thank you for your help! 👍