About 5 minutes · React 16.8+ · React DOM

Start

From install to gestures and enter/leave motion in six steps. Each step is a small, working component.

1
Install
Animated has no runtime dependencies. React 16.8+ is a peer dependency.
The package entry is marked 'use client'. In the Next.js App Router, a server layout can render AnimatedProvider; use hooks and Animated.<tag> inside Client Components.
$
```
npm install @kkwaenggwari/animated
```
The import @kkwaenggwari/animated resolves in your editor.
Move your first value
useAnimatedValue(1) owns a live number for the lifetime of the component. Put it straight into style: it becomes a CSS variable, so React does not render while it changes.
timing(value, { toValue, duration }).start() moves it. Pressing again mid-way starts from the current opacity.
Preparing the example…
The box fades out and back in, and a second press mid-way reverses from where it is.
Derive many outputs from one value
interpolate maps the value to lengths, angles or numbers. With no easing, it becomes an exact calc() of the same variable, so five lanes cost the same as one.
Different input ranges on the same value create a cascade without five separate animations.
Preparing the example…
One press moves five lanes with a cascade; changing spread changes only the ranges.
Describe a destination
Animated.button renders an ordinary button. seed is the first frame, pose is where it should be now, and tempo is how it gets there.
When pose changes mid-trip, the element turns from where it is on screen, keeping its velocity with a spring.
Preparing the example…
Clicking cards quickly never makes one jump.
Connect input
input(ref, moveInput(...)) writes pointer coordinates into values. follow(target, source) makes one value spring after another.
Everything declared in a useAnimated factory is owned by the component: listeners and springs stop when it unmounts or a dependency changes.
Preparing the example…
The card tilts toward the pointer and settles back when the pointer leaves.
Animate leaving
Removing a React child normally removes it at once. Animated.Keep retains keyed children until their depart pose finishes.
wait renders new children only after every departure has finished.
Preparing the example…
Dismissed messages leave with the chosen motion before they disappear.

You have the whole model

Values, destinations, input and departures share the same controllers, interruption rules and cleanup. The guides go deeper into each.

Install

Move your first value

Derive many outputs from one value

Describe a destination

Connect input

Animate leaving

You have the whole model