Animate Reactor

A component that makes Animate.css a React Component

Animate Reactor created to animate things with power of Animate.css. To use this component effectively, have a look this animation list.

Install

With NPM

npm install animate-reactor

With Yarn

yarn add animate-reactor

Usage

import Animate from 'animate-reactor'
 
const Component = () => {
  return (
    <Animate enter="shakeX" delay={3} speed="faster">
      Shake Me!
    </Animate>
  )
}

Storybook

To see Animate Reactor in action, visit Storybook page.

Enter and Exit

Animate Reactor can get two animation which triggers after each other. Which means, you can have a simple timeline with this. See on example.

<Animate enter="fadeIn" exit="fadeOut">
  Welcome and Good bye
</Animate>

Endless Animation

To create an endless animation use infinite prop.

<Animate enter="shake" infinite>
  Endless Shake!
</Animate>

An important note. If you use infinite prop, exit, onEnterEnd, onEachEnd props will be disabled since the enter animation never ends. This is not an Animate Reactor bug. This is a part of nature of CSS Animations.

If you want animation run certain times, use repeat prop instead. Unlike infinite, all props will be available to use. Includes exit, onEnterEnd, onEachEnd.

<Animate enter="heartBeat" repeat={3}>
  Beat three times and stop!
</Animate>

Power of callbacks

Animate Reactor let your callbacks have a place on each part of the animation process.

<Animate
  enter="bounce"
  exit="flash"
  onEachAction={() => console.log('Something happened')}
  onEachStart={() => console.log('Something started')}
  onEachEnd={() => console.log('Something ended')}
  onEnterStart={() => console.log('Enter animation started')}
  onEnterEnd={() => console.log('Enter animation ended')}
  onExitStart={() => console.log('Exit animation started')}
  onExitEnd={() => console.log('Exit animation ended')}>
  Endless Shake!
</Animate>

Custom CSS Support

You can get support of CSS to make your animations even stronger.

<Animate
  enter="bounce"
  style={{
    animationDelay: '10s',
    animationDuration: '1s',
    animationTimingFunction: 'ease-in-out',
  }}>
  I am powered by CSS.
</Animate>

Control Animate Manually

Via animate prop, you can prefer to start the animation by hand.

import React, { useState } from 'react'
import Animate from 'animate-reactor'
 
const AnimateMe = () => {
  const [animate, setAnimate] = useState(false)
 
  const toggleAnimate = () => setAnimate(!animate)
 
  return (
    <Animate enter="bounce" animate={animate} click={toggle}>
      Animate me on Click
    </Animate>
  )
}

Props References

enter

First animation. Pick one of animation list from the list.

exit

Second animation. This runs right after first animation.

infinite

Make the animation infinite (endless).

Prop	Values	Default
infinite	true/false	false

repeat

Run animation certain time(s).

Prop	Values	Default
repeat	1, 2, 3	null

Note For more repeat, consider to use Custom CSS.

delay

Delay time before animation start. If you have both enter and leave animation, it will impact twice.

Value	Values
1	1s
2	2s
3	3s
4	4s
5	5s

Note If those values wasn't enough, you can use inline CSS via style prop.

speed

Animation speed in string base.

Value	Speed Time
slow	2s
slower	3s
fast	800ms
faster	500ms

onEnterStart

Triggers when enter animation starts.

onEnterEnd

Triggers when enter animation ends.

onExitStart

Triggers when leave animation starts.

onExitEnd

Triggers when leave animation ends

onEachStart

Triggers when enter and leave animation starts.

onEachEnd

Triggers when enter and leave animation ends.

onEachAction

Triggers when enter and leave animations starts and ends.