NickPiscitelli / Glider.js

A fast, lightweight, dependency free, native scrolling carousel alternative!
https://nickpiscitelli.github.io/Glider.js
MIT License
3.27k stars 298 forks source link

When using slightly longer scroll duration, easing implementation behaves oddly #89

Open ghost opened 4 years ago

ghost commented 4 years ago

Hi there,

fantastic project. I really love it! I've noticed a somewhat odd easing behaviour. When setting duration to 1, scrolling right will result in easing that drops off very slowly at the end, as though the last few pixels are a "struggle". Scrolling left, the easing works perfectly. I can illustrate what I am talking about here (beware, cat images ;)): https://imgur.com/a/vG8gZpK

Just wondering whether there is something I can do to get left and right scrolling to behave the same in terms of easing?

NickPiscitelli commented 4 years ago

I'm using an easeInQuad function pulled from a standard easing library. You could try and swap the easing function and see if that resolves the issue.

https://www.npmjs.com/package/easing-functions

On Sat, Mar 7, 2020 at 6:16 AM Mister Render notifications@github.com wrote:

Hi there,

fantastic project. I really love it! I've noticed a somewhat odd easing behaviour. When setting duration to 1, scrolling right will result in easing that drops off very slowly at the end, as though the last few pixels are a "struggle". Scrolling left, the easing works perfectly. I can illustrate what I am talking about here (beware, cat images ;)): https://imgur.com/a/vG8gZpK

Just wondering whether there is something I can do to get left and right scrolling to behave the same in terms of easing?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/NickPiscitelli/Glider.js/issues/89?email_source=notifications&email_token=AAM33FMES4FFT6234WTCJ3TRGIUI3A5CNFSM4LDO2HFKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4ITJGRHA, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAM33FPMHTM7QV47ZGJSL43RGIUI3ANCNFSM4LDO2HFA .

MylesKingsnorth commented 4 years ago

From testing it appears quite apparent this is an issue with the slider, the easing function appears to work correctly, even with altering it the issue is still present. I did attempt some fixes none of which seemed to work.

The issue does occur with the sliders default duration of 0.5 but because it's so fast you can't tell. Using the default duration and then skipping a large about of slides using the dots you can also see the issue

Here is a video demonstrating the issue with an increased duration to make it easier to see:

https://imgur.com/a/ZcJbgM0

NickPiscitelli commented 4 years ago

Interesting. Off the top of my head, I'm not sure what would be causing this. It should just ease the scroll width using the function, but I'll try and take a look this weekend and see if I can pin down the issue.

On Wed, Jun 17, 2020 at 6:50 AM Myles Kingsnorth notifications@github.com wrote:

From testing it appears quite apparent this is an issue with the slider, the easing function appears to work correctly, even with altering it the issue is still present. I did attempt some fixes none of which seemed to work.

The issue does occur with the sliders default duration of 0.5 but because it's so fast you can't tell. Using the default duration and then skipping a large about of slides using the dots you can also see the issue

Here is a video demonstrating the issue with an increased duration to make it easier to see:

https://imgur.com/a/ZcJbgM0 http://url

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/NickPiscitelli/Glider.js/issues/89#issuecomment-645301181, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAM33FOOTZCYXUWJHG4KCWDRXCNWPANCNFSM4LDO2HFA .

NickPiscitelli commented 4 years ago

This seems to be standard behavior of the easing plugin. As it approaches the end, it slows the aggregator and causes it to hang on the same pixel for a few animate cycles on a long enough duration.

When using linear easing, the animation behaves as expected while a constant cycle rate throughout the animation.