Dragging sometimes lags behind

[xndyz]

I'm not sure why this is happening, but sometimes there is a delay between the mouse drag and the element moving. An example of this can be seen in the docs:

https://use-gesture.netlify.com/docs/options#lockdirection-xy-gestures-only lags behind
https://use-gesture.netlify.com/docs/options#axis-xy-gestures-only no lag

The implementation seems very similar. What could be the cause of the poor performance?

[dbismut]

Thanks for pointing that out. The code in the docs doesn't reflect the actual example shown above so I understand the confusion (they're now fixed).

It's not related to react-use-gesture, but rather to react-spring that handles the animation based on the movement. Let me explain.

Let's take the direction lock example, which I'll comment line by line:

function LockDirectionExample() {
  // here we create to animated values `x` and `y` that will update with a spring.
  const [{ x, y }, set] = useSpring(() => ({ x: 0, y: 0 }))
  
const bind = useDrag(
    ({ down, movement: [mx, my] }) => {
      // `down` indicates if the pointer is pressed. The logic below sets `x` and `y`
      // to the mouse movement when the pointer is pressed, and sets them back
      // to `0` when the pointer is released.

      // What creates or removes the lag is the `immediate` attribute. When set to
      // `true` the values are updated immediately without a spring. So in the case
      // below, the element follows the pointer 1:1 and when the pointer is released
      // it gets back to its origin with a spring animation.
      set({
        x: down ? mx : 0,
        y: down ? my : 0,
        immediate: down
      })
    },
    { lockDirection: true }
  )
  // here I'm passing `x` and `y` values as style attributes. react-spring supports
  // shortcut for `x` and `y` attributes which are interpolated into
  // `transform: translate3d(${x}px, ${y}px, 0)`
  return <animated.div {...bind()} style={{ x, y }} />
}

So as you can see, what you're calling lag happens when immediate is not set to false. It makes it so your element is trailing the mouse with a spring.

Hope it helps.

[xndyz]

Excellent explanation! It would be nice to show immediate in the code examples to avoid confusion