Animate your components on state change

Language: JavaScript


Build Status

Animate your react components on props or state changes, in contrast to entries added/removed from arrays.


npm install react-animate-on-change react


import AnimateOnChange from 'react-animate-on-change'
// CommonJS:
// const AnimateOnChange = require('react-animate-on-change').default

// functional component
const Score = (props) =>
    animate={props.diff != 0}>
      Score: {props.score}

The example above will (roughly) render to:

On enter or changes in props.diff or props.score:

<span class="Score Score--bounce">
  <span>Score: 100</span>

On animation end:

<span class="Score">
  <span>Score: 100</span>

Also, see the example folder.


baseClassName {string} : Base class name that be added to the component.

animationClassName {string} : Animation class name. Added when animate == true. Removed when the event animationend is triggered.

animate {bool} : Whether component should animate.

customTag {string} : HTML tag of the component.

onAnimationEnd {() => void)} : Callback which is called when animation ends.



npm install
cd test
npm install
cd ..

Add tests in test/client-tests.js, start tests with:

npm test

Build and view example:

npm run build-example
open example/index.html

Known issues

  • The browser must support CSS3 animations.

Project Statistics

Sourcerank 7
Repository Size 1.19 MB
Stars 55
Forks 14
Watchers 2
Open issues 1
Dependencies 504
Contributors 5
Tags 11
Last updated
Last pushed

Top Contributors See all

Arve Seljebu Erlangga Tjhie Rafael Horvat Ivan Tim Arney

Packages Referencing this Repo

Animate your components on state change
Latest release 2.1.1 - Updated - 55 stars

Recent Tags See all

v2.1.1 July 07, 2018
v2.1.0 June 11, 2018
v2.0.0 June 10, 2018
v1.0.1 October 09, 2017
v1.0.0 July 25, 2017
v0.2.1 August 29, 2016
v0.2.0 January 16, 2016
v0.1.3 January 10, 2016
v0.1.2 January 10, 2016
v0.1.1 January 02, 2016
v0.1.0 January 02, 2016

Interesting Forks See all

Animate your components on state change
JavaScript - Last pushed - 13 stars - 2 forks

Something wrong with this page? Make a suggestion

Last synced: 2018-06-11 00:43:55 UTC

Login to resync this repository