Skip to content
khua
← All writing

Article · June 4, 2026

React Native Animation: Reanimated vs Moti vs Animated, From a Motion Designer

I animated for years before I wrote apps. Here is which library to reach for, and the timing mistakes that make good code feel cheap.By Khua · 2 min read

I spent years in After Effects before I wrote a line of React Native, which means I notice a badly timed transition the way a musician notices a flat note. Most app animation is not broken — it is just poorly timed.

Which library

Reanimated for anything driven by a gesture or running continuously. Its worklets execute on the UI thread, so the animation keeps running while JavaScript is busy. This matters more than any API difference: an animation that stutters exactly when data arrives is running on the wrong thread.

Moti when you want Reanimated's engine with a declarative API. It is a wrapper, not a competitor — same performance, far less ceremony for the common cases. Most of my screen transitions are Moti.

Animated (the built-in) only for something trivial with useNativeDriver: true, or when you cannot add a dependency. It is not bad, it is just superseded.

Layout Animation is tempting for list insertions and genuinely hard to control. I reach for it last.

The timing mistakes

This is the part that actually separates apps that feel expensive from apps that do not.

Everything is 300ms. It is the default in every tutorial and it is wrong for most things. Small elements move faster than large ones — a toggle should settle in about 150ms, a full-screen sheet nearer 400ms. Uniform duration is why an interface can feel sluggish and twitchy at the same time.

Ease-in on entrances. An element arriving should decelerate: fast at the start, slow as it settles — ease-out. Ease-in makes it crawl then snap, which reads as broken. Exits are the reverse.

Everything animates at once. A list appearing should stagger, 20–40ms apart. Simultaneous is what a computer does; sequential is what the eye expects.

Spring physics with no damping. A bouncy spring on a modal is fun on the first open and irritating by the twentieth. Save overshoot for things that are meant to feel playful, and use it once per screen at most.

No reduced-motion path. useReducedMotion exists in Reanimated. Some people get motion sickness from parallax and full-screen transitions. Honour the setting.

The rule I use

If a user notices the animation, it is too slow or too big. Motion in an interface is there to explain where something came from — not to be admired.


Motion design is the other half of what I do. The studio side is here, and the apps are here.