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

| Property | Corresponding Animation Property | Data Type | Default Value | Property Unit | | :---------: | :------------------------------: | :---------------: | :------------: | :-----------: | | type | animation-name | String | "blur" | - | | duration | animation-duration | String | "1s" | s or ms | | delay | animation-delay | String | "0s" | s or ms | | direction | animation-direction | String | "alternate" | - | | timing | animation-timing-function | String | "ease" | - | | iteration | animation-iteration-count | Number String | "infinite" | - | | fillMode | animation-fill-mode | String | "none" | - |

Available animations name (see mapping)

| type / Animation name | | ----------------------- | | blur | | fadeIn | | fadeOut | | hang | | hangOnLeft | | hangOnRight | | swing | | glowing | | shakeMix | | shakeHorizontal | | shakeVertical | | spin | | bounce | | flipCenterToRight | | flipFromLeftToCenter | | flash | | pulse | | jelly | | squeezeHorizontal | | squeezeVertical | | flipHorizontal | | flipVertical |

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>
  )
}

animation type - mapping name

// 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"

animation 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[];
/>

License

MIT