@react-spring/animated

Basic Animation

This feature allows you to create basic animations by interpolating between two states. In this example, a div element fades in from opacity 0 to opacity 1.

import { animated, useSpring } from '@react-spring/animated';

function BasicAnimation() {
  const props = useSpring({ to: { opacity: 1 }, from: { opacity: 0 } });
  return <animated.div style={props}>I will fade in</animated.div>;
}

Keyframe Animation

This feature allows you to create keyframe animations by chaining multiple states. In this example, a div element moves 100px to the right and then back to its original position.

import { animated, useSpring } from '@react-spring/animated';

function KeyframeAnimation() {
  const props = useSpring({
    from: { transform: 'translate3d(0,0,0)' },
    to: async (next) => {
      await next({ transform: 'translate3d(100px,0,0)' });
      await next({ transform: 'translate3d(0,0,0)' });
    },
  });
  return <animated.div style={props}>I will move</animated.div>;
}

Spring-based Animation

This feature allows you to create spring-based animations with custom configurations. In this example, a number animates from 0 to 1 over a duration of 1000 milliseconds.

import { animated, useSpring } from '@react-spring/animated';

function SpringAnimation() {
  const props = useSpring({
    to: { number: 1 },
    from: { number: 0 },
    config: { duration: 1000 },
  });
  return <animated.div>{props.number.to(n => n.toFixed(2))}</animated.div>;
}