Getting started

React UI Animate makes it simple to create smooth, performant animations and interactive gestures in React applications.
This guide walks you through the core concepts, helping you build powerful animations quickly.

Prerequisites

Before you begin, you should have a basic understanding of:

1. JavaScript
2. React

If you're new to these, we recommend learning their fundamentals first.

Installation

React UI Animate works with React 16.8+ (hooks required).

Install via npm or yarn:

npm install react-ui-animate@next

or

yarn add react-ui-animate@next

Animated Elements

The main component for animations is <animate>. It acts like a normal HTML element but handles animated values under the hood.

Example

import { animate } from 'react-ui-animate';

export default function MyComponent() {
  return (
    <animate.div
      style={{
        width: 80,
        height: 80,
        background: '#ff6d6d',
        borderRadius: 8,
      }}
    />
  );
}

The useValue Hook

useValue is your starting point for animating values in React.
It tracks and updates values without causing React re-renders.

Example:

import { animate, useValue } from 'react-ui-animate';

export default function MyComponent() {
  const [width, setWidth] = useValue(80);

  return (
    <animate.div
      style={{
        width,
        height: 80,
        background: '#ff6d6d',
        borderRadius: 8,
      }}
    />
  );
}

Animation Modifiers

Animation Modifiers are functions that apply animations to values controlled by useValue.
Here’s an example using withSpring for a spring-like animation:

import { animate, useValue, withSpring } from 'react-ui-animate';

export default function App() {
  const [width, setWidth] = useValue(100);

  return (
    <>
      <button onClick={() => setWidth(withSpring(200))}>Animate</button>

      <animate.div
        style={{
          width,
          height: 100,
          backgroundColor: 'teal',
          borderRadius: 4,
        }}
      />
    </>
  );
}

Your First Full Animation

Here’s a complete example that animates width property of an element:

import React from 'react';
import { animate, useValue, withSpring, withTiming } from 'react-ui-animate';

export default function App() {
  const [width, setWidth] = useValue(100);

  return (
    <>
      <button onClick={() => setWidth(withSpring(200))}>Animate</button>
      <button onClick={() => setWidth(withTiming(100))}>Reset</button>
      <animate.div
        style={{
          width,
          marginTop: 10,
          height: 100,
          backgroundColor: 'teal',
          borderRadius: 4,
        }}
      />
    </>
  );
}

Open Sandbox

Key Takeaways

In this quick start guide, you learned:

• How to use the <animate> component for animated elements.
• How to control values with useValue.
• How to animate those values using animation modifiers like withSpring.

Next Steps:

• Explore more animation modifiers like withTiming, withDecay, and withSequence.
• Learn advanced hooks for gestures and scroll-based animations.
• Dive into complex animations with Mount animations and sequences.