React Component to show animated text and objects, built with styled-components.

The Component provides regular animation for common object and some animation effects especially for typography like letters and multi-line text.

WrapBlock: div (default)

Installation

Install via npm:

npm i react-animate-z

Usage

To use react-animate-z in your react project, wrap the content with a Animate component and customize the animation with relevant properties.

import Animate from 'react-animate-z'

const Animate = () => {
  return (
    <Animate
      type="blur"
      duration="1000ms"
      delay="0s"
      direction="normal"
      timing="ease"
      iteration="infinite"
      fillMode="none">
      Content...
    </Animate>
  )
}

Available properties

Props

type

// props: type
"blur"
"bounce"
"effect3D"
"flash"
"float"
"glowing"
"jelly"
"pulse"
"shadow"
"spin"
"swing"
"fadeIn"
"fadeInFromLeft"
"fadeInFromRight"
"fadeInFromTop"
"fadeInFromBottom"
"fadeOut"
"fadeOutToLeft"
"fadeOutToRight"
"fadeOutToTop"
"fadeOutToBottom"
"flip"
"flipIn"
"flipOut"
"flipSlowDown"
"flipFromTop"
"flipToTop"
"flipFromBottom"
"flipToBottom"
"flipFromLeftToCenter"
"fold"
"unfold"
"hangOnLeft"
"hangOnRight"
"rotateSlowDown"
"rotateCW"
"rotateACW"
"shakeMix"
"shakeHorizontal"
"shakeVertical"
"squeezeMix"
"squeezeHorizontal"
"squeezeVertical"
"slideInFromLeft"
"slideInFromRight"
"slideOutToLeft"
"slideOutToRight"
"slideInFromTop"
"slideInFromBottom"
"slideOutToTop"
"slideOutToBottom"
"zoomIn"
"zoomOut"
"popIn"
"popOut"
// 1.0.3
"rubberBand"
"jello"
"wobble"
"rollIn"
"jackInTheBox"

type-name: typewriter

// import { AnimateTyping } from 'react-animate-z';
<Animate
    type="typewriter"
    // props
    typingWrite={{
      dataText: ["Sushi", "Pizza", "Brötchen", "Salat"],
      // heading?: string;
      // className?: string;
      // dataText?: string[];
    }}
/>

// or
<AnimateTyping
    dataText ={["Sushi", "Pizza", "Brötchen", "Salat"]}
    // heading?: string;
    // className?: string;
    // dataText?: string[];
/>

Chain Animation

An string-arry of animation names is used to wrap the animations you want to chain.

import Animate from 'react-animate-z'

const AnimationsForChaining = ["swing", "flipSlowDown", "fadeOutToBottom", "jelly"]

const AnimationChain = () => {

  const [animationIndex, setAnimationIndex] = useState(0)
  const [animationType, setAnimationType] = useState(AnimationsForChaining[0])

  const handleChainAnimation = () => {
    setCounter(animationIndex+1)
    setAnimationType(selectedItems[animationIndex+1])
  }

  return (
    <Animate
      onAnimationEnd={handleChainAnimation}
      type={animationType}
      duration="1000ms"
      timing="linear"
      iteration={1}>
      Animate
    </Animate>
  )
}

License

MIT