Animation Libraries for React and React Native Applications
framer-motion, react-motion, react-native-animatable, react-native-reanimated, react-spring, and react-transition-group are JavaScript libraries that enable declarative animations in React and React Native applications. These tools help developers create smooth transitions, gestures, and interactive UI elements while abstracting low-level animation APIs. Some focus on web-only use (react-transition-group, react-motion), others specialize in React Native (react-native-animatable, react-native-reanimated), and a few like framer-motion and react-spring support both platforms with varying degrees of fidelity and performance characteristics.
Npm Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Animation Libraries Compared: Framer Motion, React Spring, Reanimated & More
Choosing the right animation library in the React ecosystem depends heavily on your platform (web vs. React Native), performance requirements, and desired level of abstraction. Let’s compare six major options — including one that’s past its prime — through real engineering lenses.
⚠️ Deprecation Status: Know What’s Still Alive
Before diving into features, note that react-motion is effectively deprecated. Its GitHub repo hasn’t seen meaningful updates since 2018, and the maintainers recommend migrating to alternatives like react-spring. Do not start new projects with react-motion.
The rest — framer-motion, react-spring, react-transition-group, react-native-reanimated, and react-native-animatable — are actively maintained as of 2024.
🧱 Core Philosophy: Declarative vs Imperative vs Hybrid
framer-motion: High-Level Declarative
Framer Motion treats animation as a prop. You describe what should animate, not how.
// Web or React Native
import { motion } from 'framer-motion';
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5 }}
/>
react-spring: Physics-Based Declarative
React Spring uses spring physics as its core model, giving natural-feeling motion.
import { useSpring, animated } from 'react-spring';
const props = useSpring({ opacity: 1, from: { opacity: 0 } });
return <animated.div style={props} />;
react-transition-group: Lifecycle Hooks Only
This library doesn’t animate anything itself — it just tells you when to animate.
import { CSSTransition } from 'react-transition-group';
<CSSTransition in={show} timeout={300} classNames="fade">
<div>Hello</div>
</CSSTransition>
/* CSS */
.fade-enter { opacity: 0; }
.fade-enter-active { opacity: 1; transition: opacity 300ms; }
react-native-reanimated: Native-Thread Declarative
Reanimated v2+ uses worklets — functions that run on the UI thread — for true 60fps.
import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';
const opacity = useSharedValue(0);
opacity.value = withTiming(1, { duration: 500 });
const style = useAnimatedStyle(() => ({ opacity: opacity.value }));
return <Animated.View style={style} />;
react-native-animatable: Simple Preset Animations
Provides ready-made animations via component props.
import Animatable from 'react-native-animatable';
<Animatable.View animation="fadeIn" duration={500}>
<Text>Hello</Text>
</Animatable.View>
📱 Platform Support: Web vs React Native
| Package | Web | React Native |
|---|---|---|
framer-motion | ✅ | ✅ (limited) |
react-spring | ✅ | ✅ |
react-transition-group | ✅ | ❌ |
react-native-reanimated | ❌ | ✅ |
react-native-animatable | ❌ | ✅ |
react-motion | ✅ | ❌ (deprecated) |
Note:
framer-motion’s React Native support lacks advanced features like layout animations and gesture handlers available on web.
⚡ Performance Model: JavaScript Thread vs Native Thread
This is critical on mobile:
- JavaScript-thread animations (
react-native-animatable, olderAnimatedAPI): Can jank if JS is busy. - Native-thread animations (
react-native-reanimated): Run independently of JS, ensuring smoothness.
Compare these two React Native approaches:
// react-native-animatable (JS thread)
<Animatable.View animation="slideInUp" />
// react-native-reanimated (native thread)
const translateY = useSharedValue(100);
translateY.value = withSpring(0);
const style = useAnimatedStyle(() => ({ transform: [{ translateY: translateY.value }] }));
<Animated.View style={style} />
For complex interactions (e.g., dragging a card), only reanimated guarantees consistent 60fps.
🔄 Handling Enter/Exit Transitions
All libraries handle this differently:
react-transition-group (Web)
Uses lifecycle states (entering, entered, etc.) to toggle CSS classes.
<TransitionGroup>
{items.map(item => (
<CSSTransition key={item.id} timeout={500} classNames="item">
<div>{item.name}</div>
</CSSTransition>
))}
</TransitionGroup>
framer-motion (Web & RN)
Automatic presence detection with AnimatePresence.
import { AnimatePresence, motion } from 'framer-motion';
<AnimatePresence>
{isVisible && (
<motion.div
initial={{ y: -100 }}
animate={{ y: 0 }}
exit={{ y: -100 }}
/>
)}
</AnimatePresence>
react-spring (Web & RN)
Uses useTransition hook for list/item transitions.
const transitions = useTransition(items, {
from: { opacity: 0 },
enter: { opacity: 1 },
leave: { opacity: 0 }
});
return transitions((style, item) => <animated.div style={style}>{item}</animated.div>);
react-native-reanimated
Requires manual coordination with LayoutAnimation or custom logic — no built-in presence system.
// No direct equivalent; often combined with useState + timing functions
🖱️ Gesture Integration
For drag, pan, or tap interactions:
framer-motion: Built-indragprop andwhileHover/whileTap.
<motion.div drag dragConstraints={{ left: 0, right: 0 }} />
react-spring: Works with@react-spring/webor@react-spring/native+ gesture libraries likereact-use-gesture.
const [{ x, y }, api] = useSpring(() => ({ x: 0, y: 0 }));
const bind = useDrag(({ offset: [x, y] }) => api.start({ x, y }));
return <animated.div {...bind()} style={{ x, y }} />;
react-native-reanimated: Deep integration withreact-native-gesture-handler.
const gesture = Gesture.Pan().onUpdate(e => {
translateX.value = e.translationX;
});
return <GestureHandlerRootView>
<GestureDetector gesture={gesture}>
<Animated.View style={animatedStyle} />
</GestureDetector>
</GestureHandlerRootView>;
- Others: No native gesture support; require external libraries.
📦 Bundle Impact and Learning Curve
- Lightweight & simple:
react-transition-group(just lifecycle hooks),react-native-animatable(preset animations). - Moderate:
framer-motion(rich feature set but larger bundle),react-spring(flexible but requires understanding springs). - Heavy but powerful:
react-native-reanimated(steep learning curve due to worklets and threading model).
🛠️ Real-World Selection Guide
Building a Marketing Website?
→ Use framer-motion for scroll-triggered animations, hover effects, and page transitions. Pair with AnimatePresence for route changes.
Creating a Data Dashboard with Smooth Charts?
→ react-spring excels at interpolating values and animating SVG paths based on data changes.
Shipping a Production React Native App?
→ For anything beyond basic fades: react-native-reanimated + react-native-gesture-handler. Accept the learning curve for buttery-smooth UX.
Need Simple Modal Fade-Ins on Web?
→ react-transition-group + CSS transitions. Zero runtime overhead.
Maintaining Legacy Code with react-motion?
→ Plan migration to react-spring or framer-motion. Do not extend its usage.
🔚 Final Thought
There’s no universal “best” animation library. Match the tool to your constraints:
- Web-only, design-focused? →
framer-motion - Cross-platform, physics-driven? →
react-spring - React Native, performance-critical? →
react-native-reanimated - Minimalist web transitions? →
react-transition-group - Simple mobile presets? →
react-native-animatable(with caution) - Legacy
react-motion? → Migrate away
Choose wisely — the right animation library makes interactions feel alive without sacrificing performance or maintainability.
How to Choose: react-native-animatable vs framer-motion vs react-motion vs react-native-reanimated vs react-spring vs react-transition-group
- react-native-animatable:
Choose
react-native-animatablefor simple, pre-defined animations (like fades, bounces, or slides) in React Native apps where ease of use outweighs performance needs. It runs animations on the JavaScript thread, so it’s unsuitable for complex or high-frame-rate interactions. Use it only for basic entrance/exit effects in non-performance-sensitive screens. - framer-motion:
Choose
framer-motionif you're building a modern React or React Native app and want a high-level, expressive API with excellent developer experience for common animations like gestures, layout transitions, and shared element transitions. It’s ideal when you prioritize rapid prototyping, visual polish, and don’t need fine-grained control over native animation threads. Avoid it if you require 60fps native-thread animations on mobile or must minimize bundle size in performance-critical contexts. - react-motion:
Avoid
react-motionin new projects — it is effectively deprecated and no longer actively maintained. While it pioneered spring-based physics in React, its API has been superseded by more modern alternatives likereact-springandframer-motion. If you encounter it in legacy code, plan a migration path rather than extending its usage. - react-native-reanimated:
Choose
react-native-reanimatedwhen building demanding React Native UIs that require buttery-smooth 60fps animations, gesture-driven interactions, or shared values between JS and native threads. It’s the go-to for production-grade mobile experiences like custom navigators, pull-to-refresh, or drag-and-drop interfaces. Be prepared for a steeper learning curve and more verbose syntax compared to higher-level libraries. - react-spring:
Choose
react-springif you need a physics-based animation engine that works consistently across web and React Native, with strong support for interpolations, springs, and timeline orchestration. It offers more granular control thanframer-motionwhile maintaining a declarative style. Ideal for data visualizations, complex state-driven transitions, or when you want to avoid platform-specific animation code. - react-transition-group:
Choose
react-transition-groupwhen you need minimal, reliable enter/exit animations tied to component mounting/unmounting (e.g., modals, lists, route transitions). It doesn’t handle animation logic itself but provides lifecycle hooks to drive CSS or imperative animations. Best paired with CSS transitions or other animation libraries for actual motion implementation.
Popular Comparisons
README for react-native-animatable
react-native-animatable
Declarative transitions and animations for React Native
Installation
$ npm install react-native-animatable --save
Usage
To animate things you must use the createAnimatableComponent composer similar to the Animated.createAnimatedComponent. The common components View, Text and Image are precomposed and exposed under the Animatable namespace. If you have your own component that you wish to animate, simply wrap it with a Animatable.View or compose it with:
import * as Animatable from 'react-native-animatable';
MyCustomComponent = Animatable.createAnimatableComponent(MyCustomComponent);
Declarative Usage
Animations
<Animatable.Text animation="zoomInUp">Zoom me up, Scotty</Animatable.Text>
Looping
To make looping animations simply set the iterationCount to infinite. Most animations except the attention seekers work best when setting direction to alternate.
<Animatable.Text animation="slideInDown" iterationCount={5} direction="alternate">Up and down you go</Animatable.Text>
<Animatable.Text animation="pulse" easing="ease-out" iterationCount="infinite" style={{ textAlign: 'center' }}>❤️</Animatable.Text>
Generic transitions
You can create your own simple transitions of a style property of your own choosing. The following example will increase the font size by 5 for every tap – all animated, all declarative! If you don't supply a duration property, a spring animation will be used.
Note: If you are using colors, please use rgba() syntax.
Note: Transitions require StyleSheet.flatten available in React Native 0.15 or later. If you are running on anything lower, please polyfill as described under imperative usage.
<TouchableOpacity onPress={() => this.setState({fontSize: (this.state.fontSize || 10) + 5 })}>
<Animatable.Text transition="fontSize" style={{fontSize: this.state.fontSize || 10}}>Size me up, Scotty</Animatable.Text>
</TouchableOpacity>
Properties
Note: Other properties will be passed down to underlying component.
| Prop | Description | Default |
|---|---|---|
animation | Name of the animation, see below for available animations. | None |
duration | For how long the animation will run (milliseconds). | 1000 |
delay | Optionally delay animation (milliseconds). | 0 |
direction | Direction of animation, especially useful for repeating animations. Valid values: normal, reverse, alternate, alternate-reverse. | normal |
easing | Timing function for the animation. Valid values: custom function or linear, ease, ease-in, ease-out, ease-in-out, ease-in-cubic, ease-out-cubic, ease-in-out-cubic, ease-in-circ, ease-out-circ, ease-in-out-circ, ease-in-expo, ease-out-expo, ease-in-out-expo, ease-in-quad, ease-out-quad, ease-in-out-quad, ease-in-quart, ease-out-quart, ease-in-out-quart, ease-in-quint, ease-out-quint, ease-in-out-quint, ease-in-sine, ease-out-sine, ease-in-out-sine, ease-in-back, ease-out-back, ease-in-out-back. | ease |
iterationCount | How many times to run the animation, use infinite for looped animations. | 1 |
iterationDelay | For how long to pause between animation iterations (milliseconds). | 0 |
transition | What style property to transition, for example opacity, rotate or fontSize. Use array for multiple properties. | None |
onAnimationBegin | A function that is called when the animation has been started. | None |
onAnimationEnd | A function that is called when the animation has been completed successfully or cancelled. Function is called with an endState argument, refer to endState.finished to see if the animation completed or not. | None |
onTransitionBegin | A function that is called when the transition of a style has been started. The function is called with a property argument to differentiate between styles. | None |
onTransitionEnd | A function that is called when the transition of a style has been completed successfully or cancelled. The function is called with a property argument to differentiate between styles. | None |
useNativeDriver | Whether to use native or JavaScript animation driver. Native driver can help with performance but cannot handle all types of styling. | false |
isInteraction | Whether or not this animation creates an "interaction handle" on the InteractionManager. | false if iterationCount is less than or equal to one |
Imperative Usage
Animations
All animations are exposed as functions on Animatable elements, they take an optional duration argument. They return a promise that is resolved when animation completes successfully or is cancelled.
import * as Animatable from 'react-native-animatable';
class ExampleView extends Component {
handleViewRef = ref => this.view = ref;
bounce = () => this.view.bounce(800).then(endState => console.log(endState.finished ? 'bounce finished' : 'bounce cancelled'));
render() {
return (
<TouchableWithoutFeedback onPress={this.bounce}>
<Animatable.View ref={this.handleViewRef}>
<Text>Bounce me!</Text>
</Animatable.View>
</TouchableWithoutFeedback>
);
}
}
To stop any ongoing animations, just invoke stopAnimation() on that element.
You can also animate imperatively by using the animate() function on the element for custom animations, for example:
this.view.animate({ 0: { opacity: 0 }, 1: { opacity: 1 } });
Generic transitions
transition(fromValues, toValues[[, duration], easing])
Will transition between given styles. If no duration or easing is passed a spring animation will be used.
transitionTo(toValues[[, duration], easing])
This function will try to determine the current styles and pass it along to transition() as fromValues.
import * as Animatable from 'react-native-animatable';
class ExampleView extends Component {
handleTextRef = ref => this.text = ref;
render() {
return (
<TouchableWithoutFeedback onPress={() => this.text.transitionTo({ opacity: 0.2 })}>
<Animatable.Text ref={this.handleTextRef}>Fade me!</Animatable.Text>
</TouchableWithoutFeedback>
);
}
}
Custom Animations
Animations can be referred to by a global name or a definition object.
Animation Definition Schema
An animation definition is a plain object that contains an optional easing property, an optional style property for static non-animated styles (useful for perspective, backfaceVisibility, zIndex etc) and a list of keyframes. The keyframes are refered to by a number between 0 to 1 or from and to. Inspect the source in the definitions folder to see more in depth examples.
A simple fade in animation:
const fadeIn = {
from: {
opacity: 0,
},
to: {
opacity: 1,
},
};
<Animatable.Text animation={fadeIn} >Fade me in</Animatable.Text>
Combining multiple styles to create a zoom out animation:
const zoomOut = {
0: {
opacity: 1,
scale: 1,
},
0.5: {
opacity: 1,
scale: 0.3,
},
1: {
opacity: 0,
scale: 0,
},
};
<Animatable.Text animation={zoomOut} >Zoom me out</Animatable.Text>
To make your animations globally available by referring to them by a name, you can register them with initializeRegistryWithDefinitions. This function can also be used to replace built in animations in case you want to tweak some value.
Animatable.initializeRegistryWithDefinitions({
myFancyAnimation: {
from: { ... },
to: { ... },
}
});
React Europe Talk
The talk A Novel Approach to Declarative Animations in React Native from React Europe 2017 about this library and animations/transitions in general is available on YouTube.
MakeItRain example
See Examples/MakeItRain folder for the example project from the talk.
AnimatableExplorer example
See Examples/AnimatableExplorer folder for an example project demoing animations available out of the box and more.
Animations
Animations are heavily inspired by Animated.css.
Attention Seekers
bounceflashjellopulserotaterubberBandshakeswingtadawobble
Bouncing Entrances
bounceInbounceInDownbounceInUpbounceInLeftbounceInRight
Bouncing Exits
bounceOutbounceOutDownbounceOutUpbounceOutLeftbounceOutRight
Fading Entrances
fadeInfadeInDownfadeInDownBigfadeInUpfadeInUpBigfadeInLeftfadeInLeftBigfadeInRightfadeInRightBig
Fading Exits
fadeOutfadeOutDownfadeOutDownBigfadeOutUpfadeOutUpBigfadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBig
Flippers
flipInXflipInYflipOutXflipOutY
Lightspeed
lightSpeedInlightSpeedOut
Sliding Entrances
slideInDownslideInUpslideInLeftslideInRight
Sliding Exits
slideOutDownslideOutUpslideOutLeftslideOutRight
Zooming Entrances
zoomInzoomInDownzoomInUpzoomInLeftzoomInRight
Zooming Exits
zoomOutzoomOutDownzoomOutUpzoomOutLeftzoomOutRight
Changelog
License
MIT License. © Joel Arvidsson 2015