node package manager



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


npm install react-animate-on-change react


const AnimateOnChange = require('react-animate-on-change')
// 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} : Wheter component should animate.


npm start

Add tests in test.js and hack away.

Known issues

  • Android tests on saucelabs fails, but animation components work when testing them manually. If you have any experience with testing android browsers on saucelabs, please let me know.
  • The browser must support CSS3 animations, doh.