React Native Animatable

Standard set of easy to use animations and declarative transitions for React Native
Alternatives To React Native Animatable
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Scrollreveal21,5032,504763 months ago72March 05, 202125JavaScript
Animate elements as they scroll into view.
Material Animations13,282
4 years ago19mitJava
Android Transition animations explanation with examples.
Barba10,6427716 days ago67January 16, 20208mitTypeScript
Create badass, fluid and smooth transitions between your website’s pages.
Lax.js9,8172273 months ago15December 28, 202015mitJavaScript
Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.
React Transition Group9,77147,7154,6862 months ago43August 01, 2022218otherJavaScript
An easy way to perform animations when a React component enters or leaves the DOM
React Native Animatable9,4982,13024916 days ago23October 13, 2019209mitJavaScript
Standard set of easy to use animations and declarative transitions for React Native
217 days ago11April 10, 2020134mitSwift
Powerful and easy-to-use vector graphics Swift library with SVG support
Ramjet5,4412346 years ago9February 05, 201611mitJavaScript
Morph DOM elements from one state to another with smooth animations and transitions
Expanding Collection5,226
143 years ago26September 26, 201828mitSwift
:octocat: ExpandingCollection is an animated material design UI card peek/pop controller. iOS library made by @Ramotion -
React Burger Menu4,8629401152 months ago134May 23, 20227mitJavaScript
:hamburger: An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations
Alternatives To React Native Animatable
Select To Compare

Alternative Project Comparisons


Declarative transitions and animations for React Native

Travis npm npm


$ npm install react-native-animatable --save


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


<Animatable.Text animation="zoomInUp">Zoom me up, Scotty</Animatable.Text>


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>

Animatable looping demo

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>


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


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>

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>

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.

  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.

MakeItRain Example

AnimatableExplorer example

See Examples/AnimatableExplorer folder for an example project demoing animations available out of the box and more.

Animatable Explorer


Animations are heavily inspired by Animated.css.

Attention Seekers


  • bounce
  • flash
  • jello
  • pulse
  • rotate
  • rubberBand
  • shake
  • swing
  • tada
  • wobble

Bouncing Entrances


  • bounceIn
  • bounceInDown
  • bounceInUp
  • bounceInLeft
  • bounceInRight

Bouncing Exits


  • bounceOut
  • bounceOutDown
  • bounceOutUp
  • bounceOutLeft
  • bounceOutRight

Fading Entrances


  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInUp
  • fadeInUpBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig

Fading Exits


  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutUp
  • fadeOutUpBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig



  • flipInX
  • flipInY
  • flipOutX
  • flipOutY



  • lightSpeedIn
  • lightSpeedOut

Sliding Entrances


  • slideInDown
  • slideInUp
  • slideInLeft
  • slideInRight

Sliding Exits


  • slideOutDown
  • slideOutUp
  • slideOutLeft
  • slideOutRight

Zooming Entrances


  • zoomIn
  • zoomInDown
  • zoomInUp
  • zoomInLeft
  • zoomInRight

Zooming Exits


  • zoomOut
  • zoomOutDown
  • zoomOutUp
  • zoomOutLeft
  • zoomOutRight



MIT License. © Joel Arvidsson 2015

Popular Transition Projects
Popular Animation Projects
Popular User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.