Animation Modifiers Overview

A modifier tells useValue how to get to a target. Without one, a value snaps instantly:

import { useValue, withSpring } from 'react-ui-animate';

const [x, setX] = useValue(0);

setX(100);
setX(withSpring(100));

Available modifiers

Modifier	Motion	Best for
withSpring	Physics-based	Buttons, cards, modals, anything that should feel alive
withTiming	Fixed duration	Tooltips, dropdowns, progress bars
withDecay	Momentum/friction	Flicks, swipes, momentum scrolling
withSequence	Multi-step, in order	Choreographed, multi-phase motion
withDelay	Pause	A step inside withSequence
withStagger	Per-item delay	Staggering a list (with withParallel)
withKeyframes	Multiple stops, one call	Shorthand for a withSequence of withTiming steps
withParallel	Different driver per key	Object/array values where keys need different timing
withLoop	Repeats	Spinners, pulses, ambient motion

Composing modifiers

setX(withSequence([withTiming(50, { duration: 200 }), withSpring(100), withDecay(0.3)]));

setX(withLoop(withSequence([withSpring(100), withSpring(0)]), 3));

Callbacks

Every modifier accepts onStart/onChange/onComplete:

setX(withSpring(100, {
  onStart: () => {},
  onChange: (value) => {},
  onComplete: () => {},
}));

Next steps

Pick a modifier above, or continue to Presence & Layout to use these as exit animations.