react-spring

react-spring is a modern, physics-based animation library for React applications. Unlike traditional animation libraries that rely on fixed durations and static easing functions, react-spring utilizes spring dynamics (tension, friction, mass) to create fluid, natural, and highly interactive animations. This physics-driven approach often results in animations that feel more responsive and lifelike, adapting to user interactions seamlessly.\n\nKey Principles and Features:\n\n1. Physics-Based Animations: Instead of specifying a duration and an easing curve, you define the spring's physical properties. react-spring then calculates the motion, leading to animations that naturally accelerate and decelerate, and can be interrupted or chained dynamically.\n2. Declarative API with Hooks: react-spring provides a set of powerful React hooks (`useSpring`, `useSprings`, `useTrail`, `useTransition`, `useChain`) that allow you to define animations declaratively. You describe the end state of your animation, and react-spring handles the smooth transition from the current state.\n3. Performance: It's built for performance. react-spring often performs animations outside of React's render cycle (using `requestAnimationFrame` and `will-change`), meaning animations can run smoothly even when your React component tree is busy re-rendering, avoiding unnecessary component updates.\n4. Flexibility: It's highly versatile, capable of animating virtually any property: numbers, colors, SVG paths, scroll positions, and even complex transformations. It also integrates well with other libraries like `react-use-gesture` for interactive animations.\n5. Simplicity: Despite its power, react-spring offers a surprisingly simple API. Basic animations are straightforward to implement, while more complex orchestrations are also manageable through its dedicated hooks.\n\nCore Hooks Explained:\n\n* `useSpring`: The most fundamental hook, used for animating a single set of values. Ideal for animating individual elements, like a button expanding or an image fading in.\n* `useSprings`: For animating multiple elements that have distinct, independent states. Useful for creating grid layouts where each item animates differently.\n* `useTrail`: Creates a "trail" animation where elements follow each other, each animating with a slight delay based on the previous one. Great for staggered list entries or menu items.\n* `useTransition`: The go-to hook for animating mounting/unmounting components, or for animating items in a list as they are added, removed, or reordered. It manages enter, update, and leave transitions.\n* `useChain`: Allows you to chain multiple `useSpring`, `useSprings`, or `useTrail` animations together, making them run sequentially.\n\nIn summary, react-spring empowers developers to create delightful, high-performance UI animations with a natural feel, using a modern, hook-based API that integrates seamlessly into React applications.

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

function SpringAnimationExample() {
  const [toggled, setToggled] = useState(false);

  // Define the animation properties using useSpring
  const springProps = useSpring({
    opacity: toggled ? 1 : 0,
    transform: toggled ? 'scale(1) translateY(0px)' : 'scale(0.8) translateY(-50px)',
    color: toggled ? '#28a745' : '#007bff',
    config: { mass: 1, tension: 170, friction: 26 } // Custom spring physics
  });

  return (
    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
      <h1>React Spring Example</h1>
      <button
        onClick={() => setToggled(!toggled)}
        style={{
          padding: '10px 20px',
          fontSize: '16px',
          cursor: 'pointer',
          borderRadius: '5px',
          border: '1px solid #ccc',
          backgroundColor: '#f0f0f0',
          marginBottom: '20px'
        }}
      >
        Toggle Animation
      </button>

      {/* The animated.div component will apply the springProps */}
      <animated.div
        style={{
          ...springProps, // Apply the animated styles
          width: '200px',
          height: '100px',
          backgroundColor: '#007bff',
          color: 'white',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          borderRadius: '10px',
          fontSize: '20px',
          fontWeight: 'bold'
        }}
      >
        Hello Spring!
      </animated.div>

      <p style={{ marginTop: '30px', maxWidth: '400px', lineHeight: '1.6' }}>
        Click the button above to see a simple `useSpring` animation. The box will fade in/out,
        scale, move, and change background color based on the `toggled` state, using physics-based transitions.
      </p>
    </div>
  );
}

export default SpringAnimationExample;