reanima

Animate react components with debug player that can rewind

1. Create animated component like:

const Counter = () => {
  const frame = useFrame()
  const color = interpolateColors(frame, [0, 60], ['white', 'red'])

  return <div style={{ color }}>{frame}</div>
}

2. Wrap you component with debug player like:

const counter = withPlayer(({ useFrame }) => {
  ...
})

3. Debug like:

(see example)

4. Remove withPlayer wrapper and you ready to deploy. Profit!