How to Animate in React: Simple Guide with Examples

To animate in React, use the react-spring library with hooks like useSpring to create smooth animations declaratively. You define animation styles and apply them to components using the animated wrapper for easy, performant transitions.

Syntax

Use useSpring hook to define animation properties and animated components to apply them. The hook returns styles that you spread on the animated element.

• useSpring({ to: { ... }, from: { ... } }): defines animation start and end states.
• animated.div: a special div that accepts animated styles.

jsx

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

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

  return <animated.div style={styles}>Fade In Text</animated.div>;
}

Output

A div with text 'Fade In Text' that smoothly fades in from transparent to fully visible.

Example

This example shows a button that toggles a box's visibility with a smooth fade and slide animation using react-spring.

jsx

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

export default function ToggleBox() {
  const [show, setShow] = useState(false);
  const styles = useSpring({
    opacity: show ? 1 : 0,
    transform: show ? 'translateY(0)' : 'translateY(-20px)',
    config: { tension: 200, friction: 20 }
  });

  return (
    <div>
      <button onClick={() => setShow(!show)} aria-pressed={show} aria-label="Toggle box">
        Toggle Box
      </button>
      <animated.div style={styles} role="region" aria-live="polite" tabIndex={0}>
        {show && <p>This box appears with animation!</p>}
      </animated.div>
    </div>
  );
}

Output

A button labeled 'Toggle Box'. When clicked, a box with text 'This box appears with animation!' smoothly fades in and slides down, and disappears with reverse animation.

Common Pitfalls

• Not wrapping elements with animated causes styles not to animate.
• Forgetting to import useSpring or animated from react-spring.
• Animating non-style props or unsupported CSS properties.
• Not managing component mount/unmount properly when animating visibility.

jsx

/* Wrong: Using normal div without animated wrapper */
const styles = useSpring({ opacity: 1 });
return <div style={styles}>No animation</div>;

/* Right: Use animated.div to enable animation */
import { animated } from 'react-spring';
return <animated.div style={styles}>Animated</animated.div>;

Quick Reference

Remember these tips for smooth React animations:

• Use useSpring or useTransition hooks for different animation needs.
• Wrap elements with animated components to apply animated styles.
• Control animation states with React state and props.
• Use config to adjust animation speed and bounce.
• Ensure accessibility by managing focus and ARIA attributes during animations.

Key Takeaways

Use react-spring's useSpring hook and animated components for easy React animations.

Always wrap elements with animated components to apply animation styles correctly.

Control animation states with React state for interactive effects.

Avoid animating unsupported CSS properties or non-style props.

Add accessibility attributes to animated elements for better user experience.