Using Transition and Spring to animating the same CSS value on a component

[joeyhusky]

I have a React component which I want to have animate the position on mount (using Transition) as well as when the component updates (using Spring). I'm animating the x and y coordinates using transform(x, y). So in my case, i've got my component moving to/from a specific position on mount, and want it to animate into new positions when user clicks and drags. The only way I've been able to accomplish this is by creating a spring const springStyles = useSpring({...}), then passing the resulting style to my useTransition update property. but I'm wondering if there is a more specific way I can accomplish this. also, thanks for this library, been having a lot of fun with it.

code snippet:

const convertCoordsToPixelPosition = (xCoord: number, yCoord: number): AnimatedProps<React.CSSProperties> => {
  const x: number = xCoord - nodeSize.width / 2;
  const y: number = yCoord - nodeSize.height / 2;
  return {
    transform: `translate(${x}px, ${y}px)`,
  };
};


export const AnimatedNode: React.FC<AnimatedNodeProps> = (props: AnimatedNodeProps) => {
  const [currentPositions, setCurrentPositions] = useState({ currX: props.centerX, currY: props.centerY });

  const parentNodePosition = getParentNodePosition(...);
  const springStyles = useSpring({
    to: convertCoordsToPixelPosition(props.centerX, props.centerY),
    from: convertCoordsToPixelPosition(currentPositions.currX, currentPositions.currY),
    onRest: () => setCurrentPositions({ currX: props.centerX, currY: props.centerY }),
    config: ANIMATION_CONFIG,
  });

  const transition = useTransition(props.node, {
    key: props.node.id,
    initial: convertCoordsToPixelPosition(parentNodePosition.x, parentNodePosition.y),
    enter: convertCoordsToPixelPosition(props.centerX, props.centerY),
    config: ANIMATION_CONFIG,
    update: springStyles,
  });

  const AnimatedNode = animated(Node);
  return transition((transitionStyles, item) => item && <AnimatedNode style={transitionStyles} {...props} />);
};

[joshuaellis]

Have you looked at react-use-gesture I would use the library in conjunction with react-spring to solve things like drag

[joeyhusky]

I'm setup such that the component doesn't actually move until onDrop. Irregardless, I'd still want the component to use Springs and Transitions on the same css values. Thanks for the tip though, I will check out react-use-gesture.

[joshuaellis]

You would use react-spring with react-use-gesture to get the desired effects