Overview
Animation Modifiers are used with the useValue hook that lets you create performant, declarative animations.
import { useValue, animate, withSpring } from 'react-ui-animate';
const [x, setX] = useValue(0);
setX(withSpring(100));
Each modifier returns an animation object that describes how values should animate. These modifiers also support callbacks and configuration options, providing fine-grained control over your animations.
Available Animation Modifiers
Here's a list of the animation modifiers you can use:
- withSpring: For creating physics-based motion.
- withTiming: For defining time-based transitions.
- withDecay: For simulating natural momentum.
- withDelay: To introduce a pause before an animation begins.
- withSequence: To chain multiple animations together.
- withLoop: To repeat animations.