@react-spring/core

What is @react-spring/core?

@react-spring/core is a library for creating animations in React applications. It provides a set of hooks and utilities to create smooth and interactive animations with ease. The library is highly flexible and can be used for a wide range of animation tasks, from simple transitions to complex gesture-based interactions.

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

Basic Spring Animation

This feature allows you to create a basic spring animation. The `useSpring` hook is used to define the animation properties, and the `animated` component is used to apply these properties to a React element.

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

function App() {
  const styles = useSpring({
    from: { opacity: 0 },
    to: { opacity: 1 },
  });

  return <animated.div style={styles}>I will fade in</animated.div>;
}

Gesture-based Animation

This feature allows you to create gesture-based animations. The `useDrag` hook from `@use-gesture/react` is used to handle drag gestures, and the `useSpring` hook is used to animate the position of the element based on the drag gestures.

import { useSpring, animated } from '@react-spring/web';
import { useDrag } from '@use-gesture/react';

function Draggable() {
  const [styles, api] = useSpring(() => ({ x: 0, y: 0 }));
  const bind = useDrag(({ offset: [x, y] }) => api.start({ x, y }));

  return <animated.div {...bind()} style={{ ...styles, width: 100, height: 100, background: 'lightblue' }} />;
}

Keyframe Animation

This feature allows you to create keyframe animations. The `useSpring` hook is used to define the keyframes and looping behavior of the animation.

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

function KeyframeAnimation() {
  const styles = useSpring({
    loop: { reverse: true },
    from: { x: 0 },
    to: { x: 100 },
  });

  return <animated.div style={{ ...styles, width: 100, height: 100, background: 'lightcoral' }} />;
}

Other packages similar to @react-spring/core

framer-motion

Framer Motion is a popular animation library for React that provides a simple API for creating animations and gestures. It offers more built-in features for complex animations and interactions compared to @react-spring/core, making it a good choice for more advanced use cases.

react-transition-group

React Transition Group is a library for managing component transitions in React. It provides lower-level utilities for managing the lifecycle of animations, making it more flexible but also more complex to use compared to @react-spring/core.

react-move

React Move is a library for creating data-driven animations in React. It focuses on animating data changes and provides a declarative API for defining animations. It is more specialized for data-driven animations compared to the more general-purpose @react-spring/core.

README

@react-spring/core

The Controller class that powers every animation