<Animate />

<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.

Example:

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

export default ({ play, onCompleteCallBack }) => (
  <Animate
    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 />
  </Animate>
);

Props

• 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.

  <Animate 
    play 
    start={{ opacity: 0 }}
    end={{ opacity: 1 }} 
    render={({ style }) => (
      <Component style={ style } />
    )} 
  />

• easeType: string = 'linear'

  Easing type refer to http://easings.net/

• sequenceIndex: number

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

  Learn Animate Group
• sequenceId: string | number

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

  Learn Animate Group
• overlay: number

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

  Learn Animate Group