Animated Components and Style Interpolation
Apply spring values to animated.div and other elements, and interpolate values for complex style calculations.
animated.* Drop-in Replacements
react-spring provides animated versions of all HTML elements: animated.div, animated.span, animated.img, animated.button, and so on. These are direct replacements for their native counterparts, with one critical difference: they can accept SpringValue objects as style props.
Why Only animated.* Can Use Springs
Regular React elements receive style as a plain object with static values. SpringValues are special objects that update on every animation frame without going through React's re-render cycle. Only animated.* components know how to subscribe to SpringValue updates and directly mutate the DOM style, bypassing React entirely for maximum performance.
All lessons in this course
- React Spring Core: useSpring Hook
- Animated Components and Style Interpolation
- useTrail and useChain for Sequences
- Gesture-Driven Animations with use-gesture