@react-spring/core

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