update local value from outside ?

[littlee]

import React from 'react';
import { useSpring, animated } from 'react-spring';

function myComponent() {
  const [{ local }, set] = useSpring(() => ({ local: [0, 0] }));
  const bind = useGesture({ onDrag: ({ local }) => set({ local }) });

  return (
    <div>
      <animated.div
        {...bind()}
        style={{
          transform: local.interpolate((x, y) => `translate3d(${x}px,${y}px,0)`)
        }}
      />
      <button
        type="button"
        onClick={() => {
          set({ local: [-100, -100] });
        }}
      >
        move to (-100, -100);
      </button>
    </div>
  );
}

I am trying to adopt the example code in my project, but after clicking the button to move to div to some position, dragging the div will make it move to its previous position first and then the start moving with drag gesture.

I think that's because the local in onDrag doesn't sync its position with set, but I can't find a method to do this.

[dbismut]

Hey @littlee can you create a codesandbox for this? I think this is a good usecase for temp actually, happy to show you but you can have a look at this example to see how it works: https://codesandbox.io/s/zq19y1xr9m

[littlee]

https://codesandbox.io/s/9j66qwk5yw

@dbismut please take a look at this sandbox, you can drag the aqua-colored div, the click the button, then drag the div again, you will see what I meant.

[dbismut]

@littlee yep, that's what I thought, here is the amended codesandbox that should work as you want.
https://codesandbox.io/s/5mx7vx12px

Temp is used as a cache value that is set at the element position when the gesture starts: in this case it works a little bit like initial, only here we set it to the actual element position instead of the pointer position like initial works.

Feel free to close the issue if you feel this answer your questions!

[littlee]

That's cool