1. play: boolean = false required
  2. end: Object required
  3. start: Object
  4. complete: Object
  5. duration: number = 0.3
  6. delay: number
  7. onComplete: Function
  8. render: Function
  9. easeType: string = 'linear'
  10. Following props are used by <AnimateGroup />

  11. sequenceIndex: number
  12. sequenceId: string | number
  13. overlay: number

<Animate /> component is made to achieve a simple animation task, which is animated Components from destination A to destination B, and with the ability to reverse the animation backwards.


import React from 'react';
import { Animate }  from 'react-simple-animate';
import YourComponent from './YourComponent';

export default ({ play, onCompleteCallBack }) => (
    play={play} // set play true to start the animation
    duration={1} // how long is the animation duration
    delay={0.3} // how many delay seconds will apply before the animation start
    start={{ transform: 'translate(0, 0)' }}
    end={{ transform: 'translate(10px, 10px)' }}
    complete={{ display: 'none' }}
    easeType="cubic-bezier(0.445, 0.05, 0.55, 0.95)"
    onComplete={onCompleteCallBack} // call back function when animation is completed
    <YourComponent />


  • play: boolean = false required

    Defaults to false, set to true to start the animation, if set play as true as default prop, then the animation will play right after componentDidMount.

  • end: Object required

    Component transition to inline style.

  • start: Object

    Component initial inline style.

  • complete: Object

    Style to be applied after the animation is completed. Useful when you want to apply display: none after animation is completed.

  • duration: number = 0.3

    How long the animation takes in seconds.

  • delay: number

    How much delay should apply before animation starts

  • onComplete: Function

    Call back function after animation complete.

  • render: Function

    This is a Render props function, which is useful for render animation component without any div or span wrapper.

      start={{ opacity: 0 }}
      end={{ opacity: 1 }} 
      render={({ style }) => (
        <Component style={ style } />
  • easeType: string = 'linear'

    Easing type refer to

  • sequenceIndex: number

    This props is used by <AnimationGroup/>, which provides unique array index to associate with <AnimationGroup/> sequences.

  • sequenceId: string | number

    This props is used by <AnimationGroup/>, which provides unique id to associate with <AnimationGroup/> sequences.

  • overlay: number

    This props is used by <AnimationGroup/>, When animation need to play ahead, which overlay on top of the previous animation by seconds.