Nearly Perfected Mystique

    animate-reactor

    2.0.0 • Public • Published

    Animate Reactor

    A component that makes Animate.css a React Component

    npm package

    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.

    Install

    npm i animate-reactor

    DownloadsWeekly Downloads

    12

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    350 kB

    Total Files

    18

    Last publish

    Collaborators

    • cooskun