Animated Components and Style Interpolation

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.

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.

Apply spring values directly as CSS style props on animated components. For example: style={{ opacity: opacity, transform: transform }} where opacity and transform are SpringValues from useSpring. animated.div reads these values on every RAF (requestAnimationFrame) tick and applies them to the DOM node.

SpringValues have a .to() method for transforming their output. A common use case is converting a numeric spring value to a CSS string: x.to(v => "translateX(" + v + "px)"). The function receives the current numeric value and returns the transformed output, which is applied as the style.

The .to() method also accepts array inputs for range mapping: x.to([0, 1], ["#ff0000", "#00ff00"]) maps the spring value from the range [0, 1] to the color range red to green. This is how you interpolate numeric springs to colors, strings, or any value that cannot be represented as a plain number.

When a spring tracks multiple values simultaneously, you can interpolate them together. For a spring tracking { x, y }, you can write: x.to((xVal, yVal) => "translate(" + xVal + "px," + yVal + "px)"). The .to() callback receives all values in the order they appear in the spring config.

You can wrap your own components with animated(): const AnimatedCard = animated(Card). The wrapped component must accept a style prop and forward it to a DOM element. Now AnimatedCard can receive SpringValues in its style prop just like animated.div.

Complex animations often combine multiple springs. For example, an entrance animation might use one spring for opacity and another for vertical position. You can apply both to the same animated.div: style={{ opacity: opacitySpring.opacity, transform: positionSpring.y.to(y => "translateY(" + y + "px)") }}.

The most important performance characteristic of react-spring is that animated value updates bypass React's reconciler. When a spring is animating, React does NOT re-render the component on every frame. Instead, the animated.* component directly updates the DOM node's style property in each requestAnimationFrame callback, making 60fps animations possible without React overhead.

Common animation patterns with interpolation: fade in on mount using opacity.to([0, 1], [0, 1]), scale up on hover using scale.to(s => "scale(" + s + ")"), and rotate on toggle using rotation.to(r => "rotate(" + r + "deg)"). Chaining these transforms creates compound effects.

By default, .to() with range arrays can extrapolate beyond the defined range. You can control this with the extrapolate option: x.to({ range: [0, 1], output: [0, 100], extrapolate: "clamp" }) prevents the output from going below 0 or above 100, even if the spring overshoots. This is useful for progress bars and bounded animations.

Why must you use animated.div instead of a plain div when applying spring values?

animated.div, animated.span, and animated(CustomComponent) are drop-in replacements that accept SpringValues as style props. The .to() method interpolates spring values: map to CSS strings, color ranges, or any output format. Multiple springs compose naturally on one element. The key performance benefit: spring updates bypass React re-renders by directly mutating DOM styles in RAF callbacks.