Configurable scroll speed

[Munawwar]

Hi. I feel the scroll speed increases pretty quickly on drag. If the list size is small that speed seems too much. Is there a way to slow that down? Maybe allow to provide a speed function as configuration?

[tajo]

Currently it's not configurable but happy to support it.

[Munawwar]

I don't know whether this will do -> https://github.com/Munawwar/react-movable/commit/a4a1aed2b2d49dfaf39d80dd9d9013dba9daf843

Kind of works.. but having to configure a max speed.. eh.. I don't know if that's a good solution.

I am going to try some smoothening function kind of implementation as well.

[Munawwar]

Ok @tajo , alternate implementation - https://github.com/Munawwar/react-movable/commit/11cbe66edb0f750741878426eeac6d3a73b3cddb

This one does not add a configurable maxSpeed settings, but rather does an exponential increase in speed, capped at (non-configurable) 20px max speed.

Also there is an issue assuming 200px as drag zone areas on smaller screen heights. There could be overlap in drag zone areas and moving anywhere starts scrolling, which is a bit annoying. Rather I changed the calculation to assume 20% top and 20% bottom of viewport as drag zones, capped at max 200px for really long screens (if that is a thing 🤔).

[tajo]

Looking good. You should open a PR so it builds the examples and tests.

[Munawwar]

Somehow I am still not happy with this. maybe the speed should accelerate over time. I think I will try one more implementation

[Munawwar]

Ok finally, I've got an implementation that I am happy with -> https://github.com/Munawwar/react-movable/tree/drag-acceleration

It is based on acceleration over time rather than the current implementation of (distance-based) linearly increasing speed only.

So the user experience parts are:

1. It begins with a slow scroll that is more "forgiving UX" for moving into a drag zone. And then the speed accelerates gradually over time if you keep the mouse/touch point in the same drag zone. There is no max speed though. It can be added if the UX seems bad for large lists.

2. Acceleration is zero at the start end of drag zone (so speed becomes zero as well). The closer you are to the end edge of the drag zone, the closer you reach max acceleration (which is capped to 2px/sec^2.. this can be change a bit.. maybe 3px is also fine). So tracing back on the drag zone a bit will slow down the acceleration until it hits zero at the start end of the drag zone. I find this as a nice UX, since you get to be able to slow down the drag speed as a user.

3. When scroll speed hits zero (by moving out of a drag zone, or reaching the start edge of drag zone), the "time elapsed" part of the acceleration equation resets back to zero. This gives chance for user to reset the acceleration's time part to zero.

The end result is that the UX slowly nudges the user to react and he/she is in full control over speed.

Manually test it a bit and then let's continue with the automated tests etc.

[tajo]

preview

It seems extremely slow and it doesn't really accelerate?

[Munawwar]

Ah, I landed a fix for that. I was playing with two local copies of codebase.. didn't test properly before I pushed I guess. https://github.com/Munawwar/react-movable/tree/drag-acceleration

It could still feel slow though.. try playing with AUTOSCROLL_MAX_ACCELERATION.. I tried 2,3,5 but can't make up my mind.. seems ok with with the storybook example

[Munawwar]

I think 5px/sec^2 is ok... increased it. Also found a bug that acceleration wasn't capped to max acceleration. Fixed that as well.

[Munawwar]

@tajo ^

[tajo]

I would still prefer to make it a bit faster.

Anyway, can you open a PR and fix tests?

[Munawwar]

sure

[Munawwar]

I didn't go ahead with this eventually. My users didn't really complain about the speed. So 🤷‍♂️ You may close this issue