Getting Started

React UI Animate is a lightweight, declarative animation and gesture library for React. It covers springs, sequences, gestures, and exit animations with values that update outside React's render cycle.

Install

Requires React 16.8+ (hooks).

npm install react-ui-animate@next

Quick example

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

function MyComponent() {
  /* 1. Create an animated value (updates outside React render) */
  const [width, setWidth] = useValue(100);

  return (
    /* 2. Spring the width on click — animate.div reads it directly */
    <animate.div
      style={{ width, height: 100, backgroundColor: '#60a5fa', borderRadius: 4 }}
      onClick={() => setWidth(withSpring(200))}
    />
  );
}

useValue(100) creates an animated width; withSpring(200) animates it. animate.div picks up the change directly, with no re-render involved.

Preview

tip

Start here, then learn useValue and withSpring when you need more control.

Where to next

• The animate Component & useValue: the core mental model.
• Animation Modifiers: withSpring, withTiming, and the rest.
• Interactive Props: hover/press/focus/view.
• Gestures: useDrag, useGesture.
• Unmount & Flip: exit animations.