Dynamic States

The heartbeat of high-performance animation. This laboratory investigates MotionValues—low-level controls that react to state and scroll position without the overhead of component re-renders.

Lab 3 - Spring-Animation Position

Create a box that springs to a new position when clicked.

  • Create a motion.div that can be clicked to move to a new position.
  • Use useMotionValue to control x and y position.
  • Animate the box to a new position with a spring effect.
  • Map the button text to the x position using useTransform.

X: 0

Y: 0