• React wrapper animate react-animate-z.
• Not support type = typewriter

Installation

Install via npm:

npm i react-wrap-animate-z

Usage

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

import { FadeInAnimate } from 'react-wrap-animate-z'

const Animate = () => {
  return (
    <FadeInAnimate>
        Animate
    </FadeInAnimate>
  )
}

Available properties

see: react-animate-z

Available wrapper

"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"
// apply more
"rubberBand"
"jello"
"wobble"
"rollIn"
"jackInTheBox"

License

MIT