Drag interpolation speed

[DennisSSDev]

There is no documentation on how to increase the speed of the animation interpolation of a dragged animated div.

I presume there is somewhere deep within the library a way to increase the interpolation of the drag action, but it's not trivial to find it at all. Could someone point me in the right direction in order to increase the speed of the interpolated dragged animated div?

Currently, all I have is this but I would really want to increase the speed of the interpolation:

const translateCard = (r: number, x: number, y: number) =>
  `translateX(${x}px) translateY(${y}px) rotateZ(${r}deg)`;

<animated.div style={{transform: to([rotation, x, y], translateCard)}} />

[DennisSSDev]

For context, the full drag code implementation for my case can be found here

[dbismut]

React UseGesture is a library that just makes it easy to handle gestures. It is not an animation library. Whatever you do with the raw values returned by the drag handler is up to you.

That being said, if you want to double the speed of the drag, you can just multiply whatever values are returned by useDrag.

useDrag(({ offset: [x,y] }) => set({ x: x*2, y: y*2 })) // that would double the speed of the drag

[DennisSSDev]

I see, thank you very much for the pointer!

[DennisSSDev]

Hmm, though I don't think the speed would be changed with that suggested snippet. It will just offset the dragged item 2 times farther

[dbismut]

Then I’m not sure what you mean by speed of the drag.

[meotimdihia]

@dbismut https://codesandbox.io/embed/github/pmndrs/use-gesture/tree/main/demo/src/sandboxes/card-zoom?codemirror=1

I used this code, and the problem on the touch (mousedown) set({ x: x*2, y: y*2 }) will move the image to another location.