reanimated-timing
Installation
SKILL.md
Timing, Springs & Easing
The three animation drivers — withTiming, withSpring, withDecay — plus composition helpers, easing, and reduced motion. Choosing the right one is most of what makes motion feel native.
Which driver?
| Driver | Motion | Use for |
|---|---|---|
withSpring |
Physical, settles naturally, velocity-aware | Interactive/physical motion: press, drag release, toggles, sheets, anything the user "pushes" |
withTiming |
Precise, fixed duration + easing | UI chrome: opacity, color, progress bars, exact-duration reveals |
withDecay |
Momentum that decelerates from a velocity | Fling/scroll/pan release (see gestures) |
Rule of thumb: if a finger or a physical metaphor is involved, spring. If it's chrome or you need an exact duration, time. If it's a flick off a gesture, decay.
// Good — spring for the thing the user pressed, timing for its label fading in
scale.value = withSpring(0.96, SPRING);
labelOpacity.value = withTiming(1, TIMING);