@react-spring/animated

What is @react-spring/animated?

@react-spring/animated is a library that provides a set of tools for creating animations in React applications. It is part of the React Spring ecosystem and focuses on providing a flexible and performant way to animate components and values.

What are @react-spring/animated's main functionalities?

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>;
}

Other packages similar to @react-spring/animated

framer-motion

Framer Motion is a popular animation library for React that provides a simple API for creating complex animations. It offers more advanced features like layout animations and gesture-based animations, making it a more comprehensive solution compared to @react-spring/animated.

react-transition-group

React Transition Group is a library for managing component transitions in React. It focuses on providing low-level hooks for managing the transition states of components, making it more flexible but also more complex to use compared to @react-spring/animated.

react-move

React Move is a library for creating data-driven animations in React. It is particularly useful for animating data visualizations and offers a declarative API for defining animations. It is more specialized compared to @react-spring/animated, which is more general-purpose.

README

@react-spring/animated

Fork of animated