Accelerated drag scroll

[Valexr]

Any idea about accelerate drag scroll?

[Pho3nixHun]

I suppose it needs a some kind of physics, but I'll take a look around the net, because this seems like something someone already implemented 😄

[Pho3nixHun]

These looks like something you want:

• https://www.cssscript.com/demo/momentum-scrolling-smooth/
• https://www.cssscript.com/demo/smooth-momentum-scrolling-butter/

(Try it out in device emulation via chrome dev tools)

[Valexr]

So so... I want repeat this behaviour:
https://codepen.io/valexr/pen/xxVXEPM

[Valexr]

Screen.Recording.2020-12-20.at.7.00.37.PM.mp4

[Pho3nixHun]

This does not seems to be soo hard. I mean it is a time sink -until you figure out the correct physics-, but should be relatively strait forward.

First I would calculate a dragForce from dragStart and dragEnd positions, then I would do a quick calculation which is the last image this force can drag into the center adjust dragForce to exactly bring the image into the center (or this could be an optional feature to always end on an image in center).
If during animation the user drags the image again, I would just add the new dragForce to the current one.

[Pho3nixHun]

So we need initial speed which is

(Δdistance and Δtime we calculate based on the interaction)

We need deceleration which is

(Δtd is deceleration time, could be the same or say like 80% of Δt from the previous calculation)

So from all of this we need the distance at given time, which should look something like this:

In case user does something during animation we need to calculate a new initial speed and add it to the equation.
With animation frames the rest should be good, but my brain is dead for today, so I might be wrong with the math part. (I'm a bit rusty)

[Valexr]

O! Cool calculation👍🏻Thnx!

[Valexr]

I’m rusty too )))

[Valexr]

You nickname it’s about elixir Phoenix?

[Pho3nixHun]

Nope, It just popped out of my head. I just liked the idea, that this creature can start over from any situation. :)

[Valexr]

if you have touchpad swipe it on Slidy & you'll see behaviour what I want from drag

[Valexr]

Okey! I’ll wait feedback from you 👌🏻

[Valexr]

You have MacBook or..? Touchpads may be differents behaviour... correct on MacBook exactly 👍🏻

[Pho3nixHun]

I have a surface book 3 and it does work the same way (similar like in your video) on it. On my current project it does not, but probably this is some option I did not enabled.

[Valexr]

Can i see yours integration of Slidy?

[Valexr]

Thnx for access to repo, I think you have some online demo🤓

[Valexr]

Okey. Can you look for a bug with many drag swipes?

[Pho3nixHun]

I don't have any bug with it. I tried it with the double finger swipe, with touch and with mouse, but it works fine on https://valexr.github.io/slidy-site/

[Valexr]

Hey @Pho3nixHun ✌🏻
in 3.0 version release accelerated & inertial scroll - https://svelte.dev/repl/de699aa1f8c04874b0402352ac93df96