Study 02Foundation 11 min

Spring with intent

Shape an entrance with physical response instead of arbitrary easing.

In this studyspring(), damping, stiffness, mass

01

Motion has a response.

A spring gives an animated value a sense of weight. Stiffness controls how quickly it responds; damping controls how much it overshoots and settles.

02

Change one variable at a time.

Tune a spring by holding the target and frame constant. This makes the difference between a crisp UI count and a soft, heavy arrival visible.

03

Respect the frame rate.

Spring calculations need the composition FPS. Pass it from useVideoConfig so the motion holds its timing when the project renders at a different rate.

Open Spring Counter in the component workbench

Try the examplespring-counter

SCRUB TO EXPLORE30 FPS 60 FRAMES

A SMALL PATTERN

Under the motion

const progress = spring({
  frame,
  fps,
  config: { damping: 14, stiffness: 110 },
});

YOUR TURN

Compare a higher damping value with a lower one. Keep the same entrance duration and decide which response fits a financial number reveal.