REACT Spring

React Spring is a popular animation library for React that allows you to create smooth, interactive, and performant animations. It uses a physics-based approach to animations, making them feel more natural and dynamic. React Spring is highly flexible and works well with both functional and class components.

Installing React Spring

To start using React Spring, install it via npm:

npm install @react-spring/web

Try It Now

Core Concepts in React Spring

  1. useSpring: Animates a single value or set of values.
  2. useSprings: Animates multiple elements or values.
  3. useTransition: Animates elements when they are added or removed from the DOM.
  4. useTrail: Animates multiple elements in sequence.
  5. useChain: Chains multiple animations.

1. Animating with useSpring

Example: Fade-In Animation

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

const App = () => {
  const styles = useSpring({
    from: { opacity: 0 },
    to: { opacity: 1 },
    config: { duration: 1000 }, // Animation duration in milliseconds
  });

  return <animated.h1 style={styles}>Hello, React Spring!</animated.h1>;
};

export default App;

Try It Now

2. Animating Multiple Items with useSprings

Example: Animating a List of Items

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

const App = () => {
  const items = ['Item 1', 'Item 2', 'Item 3'];
  const springs = useSprings(
    items.length,
    items.map((item, index) => ({
      from: { opacity: 0, transform: 'translateY(-20px)' },
      to: { opacity: 1, transform: 'translateY(0)' },
      delay: index * 200, // Staggering the animation
    }))
  );

  return (
    <div>
      {springs.map((styles, index) => (
        <animated.div key={index} style={styles}>
          {items[index]}
        </animated.div>
      ))}
    </div>
  );
};

export default App;

Try It Now

3. Animating Element Transitions with useTransition

Example: Animating Items on Add/Remove

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

const App = () => {
  const [items, setItems] = useState([]);
  const transitions = useTransition(items, {
    from: { opacity: 0, transform: 'translateY(-20px)' },
    enter: { opacity: 1, transform: 'translateY(0)' },
    leave: { opacity: 0, transform: 'translateY(-20px)' },
  });

  const addItem = () => {
    setItems([...items, `Item ${items.length + 1}`]);
  };

  const removeItem = () => {
    setItems(items.slice(0, -1));
  };

  return (
    <div>
      <button onClick={addItem}>Add Item</button>
      <button onClick={removeItem}>Remove Item</button>
      <div>
        {transitions((style, item) => (
          <animated.div style={style}>{item}</animated.div>
        ))}
      </div>
    </div>
  );
};

export default App;

Try It Now

4. Animating a Sequence with useTrail

Example: Staggered Animation for Multiple Elements

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

const App = () => {
  const items = ['A', 'B', 'C'];
  const trail = useTrail(items.length, {
    from: { opacity: 0, transform: 'translateX(-20px)' },
    to: { opacity: 1, transform: 'translateX(0)' },
  });

  return (
    <div>
      {trail.map((style, index) => (
        <animated.div key={index} style={style}>
          {items[index]}
        </animated.div>
      ))}
    </div>
  );
};

export default App;

Try It Now

5. Chaining Animations with useChain

Example: Sequential Animations

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

const App = () => {
  const firstRef = useRef();
  const secondRef = useRef();

  const firstStyle = useSpring({
    ref: firstRef,
    from: { opacity: 0, transform: 'scale(0.5)' },
    to: { opacity: 1, transform: 'scale(1)' },
  });

  const secondStyle = useSpring({
    ref: secondRef,
    from: { opacity: 0, transform: 'translateY(20px)' },
    to: { opacity: 1, transform: 'translateY(0)' },
  });

  useChain([firstRef, secondRef]);

  return (
    <div>
      <animated.div style={firstStyle}>First Animation</animated.div>
      <animated.div style={secondStyle}>Second Animation</animated.div>
    </div>
  );
};

export default App;

Try It Now

Step 6: Advanced Example – Animated Modal

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

function App() {
  const [isOpen, setIsOpen] = useState(false);

  const modalStyles = useSpring({
    opacity: isOpen ? 1 : 0,
    transform: isOpen ? 'scale(1)' : 'scale(0.8)',
    display: isOpen ? 'block' : 'none',
    config: { tension: 200, friction: 20 },
  });

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <button
        onClick={() => setIsOpen(true)}
        style={{ padding: '10px 20px', fontSize: '16px', cursor: 'pointer' }}
      >
        Open Modal
      </button>

      <animated.div
        style={{
          position: 'fixed',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          backgroundColor: 'white',
          padding: '20px',
          borderRadius: '10px',
          boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
          ...modalStyles,
        }}
      >
        <h2>Animated Modal</h2>
        <p>This modal animates smoothly!</p>
        <button
          onClick={() => setIsOpen(false)}
          style={{ padding: '10px 20px', fontSize: '16px', cursor: 'pointer' }}
        >
          Close
        </button>
      </animated.div>
    </div>
  );
}

export default App;

Try It Now

Explanation:

  1. Modal Animation:
    • The modal fades in and scales up when opened.
    • The display property ensures the modal is hidden when not in use.
  2. Interactive:
    • The modal opens and closes based on the isOpen state.

 

React Spring vs Other Animation Libraries

Feature React Spring Framer Motion CSS Transitions
Physics-Based Motion ✅ ✅ ❌
Declarative API ✅ ✅ ❌
Ease of Integration ✅ ✅ ✅
Advanced Animations ✅ ✅ ❌

Best Practices

  1. Avoid Overuse: Too many animations can slow down your app.
  2. Leverage Physics: Use React Spring’s physics properties for natural animations.
  3. Combine with State: Synchronize animations with React state for dynamic effects.
  4. Optimize Performance: Use will-change in CSS to improve animation performance.