Function useAnimationFrameSync

Custom React hook that synchronizes animation frame data using linear interpolation.

This hook allows you to smoothly animate properties by specifying their initial values. It uses linear interpolation to transition between current and target values. The animation frame will automatically stop once all values reach their targets.

Example

const { set } = useAnimationFrameSync({
  data: { x: 0, y: 0 },
  onUpdate: ({ x, y }) => console.log(x, y),
});

set('x', 1);
set('y', 0.5);
set('y', 0.5, true); // instant change