react-animate-style

Easy animate react app with animate.css library

Install

With npm :

npm install --save react-animate-style

With yarn :

yarn add react-animate-style

Usage

Import Animation component from react-animate-style and wrap your content with <Animation>[...]</Animation> tags. Availables props to configure animation are described in Props section

import {Animation} from 'react-animate-style'


class Example extends Component {
  render() {
    return <Animation animationIn="bounceIn" animationOut="bounceOut" >
      <div>My animated content</div>
    </Animation>
  }
}

Props

animationIn

The animation to use when the component mounts or when isVisible change to true. If not set or set to null, No animation will be applied. You need to use the animate.css animation name. You can also read Available animations section to get the complete liste

animationOut

The animation to use when the component unmounts or when isVisible change to false. If not set or set to null, No animation will be applied. You need to use the animate.css animation name. You can also read Available animations section to get the complete liste

animationInDelay

The delay in miliseconds to wait before start the entrance animation. For example, to wait 1 second before start animation, you need to set this props to 1000

animationOutDelay

The delay in miliseconds to wait before start the exit animation. For example, to wait 1 second before start animation, you need to set this props to 1000

animationInDuration

The duration in miliseconds of the entrance animation. By default it set to 1000 or 1 second

animationOutDuration

The duration in miliseconds of the exit animation. By default it set to 1000 or 1 second

isVisible

Display or not the content. Set this to true to start the entrance animation (if defined) and display this component. Set this to false to start the exit animation (if defined) and hide this component. By default, this parameter is set to true. In this way, if you not provide this props, content of Animation is automatically animated and displayed on render.

Note : Exit animation is started when isVisible is set to false only if isVisible was set to true in a previous state. If isVisible receive false as initial state, content is hidden but not animation was launched on render.

style

The JSS style object applied to the component. for example, you can set this value to { backgroundColor: '#ff0000' }

className

The complementary classes to apply to animation container. For exemple, you can set this to 'my-class'

ref

The ref to attach to the animation container.

Available animation

Available animations are all animations available on Animate.style webstie. You can try each of them on their website

• bounce
• flash
• pulse
• rubberBand
• shakeX
• shakeY
• headShake
• swing
• tada
• wobble
• jello
• heartBeat
• backInDown
• backInLeft
• backInRight
• backInUp
• backOutDown
• backOutLeft
• backOutRight
• backOutUp
• bounceIn
• bounceInDown
• bounceInLeft
• bounceInRight
• bounceInUp
• bounceOut
• bounceOutDown
• bounceOutLeft
• bounceOutRight
• bounceOutUp
• fadeIn
• fadeInDown
• fadeInDownBig
• fadeInLeft
• fadeInLeftBig
• fadeInRight
• fadeInRightBig
• fadeInUp
• fadeInUpBig
• fadeInTopLeft
• fadeInTopRight
• fadeInBottomLeft
• fadeInBottomRight
• fadeOut
• fadeOutDown
• fadeOutDownBig
• fadeOutLeft
• fadeOutLeftBig
• fadeOutRight
• fadeOutRightBig
• fadeOutUp
• fadeOutUpBig
• fadeOutTopLeft
• fadeOutTopRight
• fadeOutBottomRight
• fadeOutBottomLeft
• flip
• flipInX
• flipInY
• flipOutX
• flipOutY
• lightSpeedInRight
• lightSpeedInLeft
• lightSpeedOutRight
• lightSpeedOutLeft
• rotateIn
• rotateInDownLeft
• rotateInDownRight
• rotateInUpLeft
• rotateInUpRight
• rotateOut
• rotateOutDownLeft
• rotateOutDownRight
• rotateOutUpLeft
• rotateOutUpRight
• hinge
• jackInTheBox
• rollIn
• rollOut
• zoomIn
• zoomInDown
• zoomInLeft
• zoomInRight
• zoomInUp
• zoomOut
• zoomOutDown
• zoomOutLeft
• zoomOutRight
• zoomOutUp
• slideInDown
• slideInLeft
• slideInRight
• slideInUp
• slideOutDown
• slideOutLeft
• slideOutRight
• slideOutU

License

MIT © fabienlege