Animate your components on state change Sample in 2020

Animate your components on state change Sample in 2020

tutorials -


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 start

Add tests in test.js and hack away.

Known issues

  • The browser must support CSS3 animations.


Trending On Tutorial Stuff

Our Sponsors

Top Applications in Tutorial Stuff

Top Experts In Tutorial Stuff