📦 react-animate-z

✨ Simple React animation components built with styled-components.

react-animate-z

LIVE EXAMPLE

A React + styled-components based animation library with more than 180+ pre-built animations.

🚀 Features

✅ Easy-to-use animation wrapper for any element

✅ Fully typed with TypeScript

✅ Customizable duration, delay, iteration, timing, direction, fillMode

✅ Typewriter-style text animation with blinking cursor

🚀 Installation

npm install react-animate-z

# or

yarn add react-animate-z

🎬 Usage

import React from "react";
import Animate from "react-animate-z";
import { animGroups, animNames } from "react-animate-z";

export default function App() {
  return (
    <Animate type="bounce" duration="1s">
      <h1>Hello Animation</h1>
    </Animate>
  );
}

// 1. Get all animation names
import { animGroups, animNames } from "react-animate-z";

// 2. Get animation groups
console.log(animNames);
console.log(animGroups);

🔧 Props

Prop Type Default Description

Prop	Type	Default	Description
type	AnimateType	'blurIn'	Animation name (ví dụ: 'blurIn', 'bounce', 'fadeOut', ...)
duration	string | number	'defaultDurationMap'	Duration of the animation (can be in seconds '1s' or milliseconds 1000)
timing	TimingKey	'ease'	Timing function (e.g., 'ease', 'linear', 'ease-in', 'ease-out')
delay	string | number	'0s'	Delay before the animation starts
iteration	number | "infinite"	1	Repeat count of the animation
direction	string	'normal'	Animation direction ('normal', 'alternate', 'reverse', etc.)
fillMode	string	'forwards'	How styles are applied after animation ('forwards', 'backwards', 'both', 'none')
tagName	string	'div'	Custom HTML tag to render

---

Chain Animation

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

import React, { useState } from "react";
import { AnimateTyping } from "react-animate-z";

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

const AnimationChain: React.FC = () => {
  // const [animationIndex, setAnimationIndex] = useState(0);
  // const [animationType, setAnimationType] = useState(AnimationsForChaining[0]);

  // const handleChainAnimation = () => {
  //   const nextIndex = (animationIndex + 1) % AnimationsForChaining.length;
  //   setAnimationIndex(nextIndex);
  //   setAnimationType(AnimationsForChaining[nextIndex]);
  // };

  return (
    <>
      <AnimateTyping
        heading="Hello,"
        dataText={["I am Delpi", "I build animations", "I love coding!"]}
        cursorColor="red"
      />

      <AnimateTyping dataText="Only once" />

      <AnimateTyping
        heading="Fast typing:"
        dataText={["speed x2", "super fast!"]}
        typingSpeed={50}
        deletingSpeed={20}
        pauseTime={1000}
      />
    </>
  );
};

export default AnimationChain;

---

🎨 Available Animations

🎾 Bounce

• bounce
• bounceIn
• bounceOut
• bounceElastic
• bounceSmall
• bounceRotate
• bounceJelly

✨ Text / Glow Effects

• effect3D
• neonGlow
• retro3D
• emboss
• fireGlow
• iceGlow
• shine

🌫 Blur

• blurIn
• blurInZoom
• blurInScale
• blurInUp
• blurInRotate
• blurOut
• blurOutZoom
• blurOutScale
• blurOutDown
• blurOutRotate

⚡ Flash

• flash
• flashIrregular
• flashFast
• flashSlow
• flashPulse

🎈 Float

• float
• floatSway
• floatHorizontal
• floatCircular
• floatWiggle

💡 Glow

• glow
• glowTextFlicker
• glowRainbow
• glowBreathing
• glowGlitch

🍮 Jelly

• jelly
• jellyX
• jellyY
• jellyIn
• jellyOut

🌑 Shadow / Spin / Swing / Orbit

• shadow
• shadowText
• shadowPulse
• shadowNeon
• spin
• spin3D
• spinX
• spinBounce
• swing
• swingPivot
• swingX
• swingY
• orbit
• orbitEllipse

💓 Pulse

• pulse
• pulseInOut
• pulseFade
• pulseFast
• pulseColor

🌫 Fade

• fadeIn
• fadeOut
• fadeInFromLeft
• fadeInFromRight
• fadeInFromTop
• fadeInFromBottom
• fadeOutToLeft
• fadeOutToRight
• fadeOutToTop
• fadeOutToBottom
• fadeInZoom
• fadeOutZoom
• fadeInRotate
• fadeOutRotate
• fadeInSkew
• fadeOutSkew
• fadeInFlipX
• fadeOutFlipX
• fadeInFlipY
• fadeOutFlipY
• fadeInPerspective
• fadeOutPerspective

🤯 Squeeze / Shake

• squeezeMix
• squeezeHorizontal
• squeezeVertical
• squeezeDiagonal
• squeezePulse
• squeezeBounce
• squeezeElastic
• squeezeFlash
• shakeMix
• shakeHorizontal
• shakeVertical
• shakeDiagonal
• shakeQuick
• shakeRotate
• shakeSkew
• shakeBounce
• shakeCrazy
• squeezeThenShakeX
• shakeYThenSqueeze
• squeezeShakeCrazy

📥 Slide

• slideInFromLeft
• slideInFromRight
• slideOutToLeft
• slideOutToRight
• slideInFromTop
• slideInFromBottom
• slideOutToTop
• slideOutToBottom
• slideInFromLeftOvershoot
• slideInFromRightOvershoot
• slideOutToLeftOvershoot
• slideOutToRightOvershoot
• slideInFromTopOvershoot
• slideInFromBottomOvershoot
• slideOutToTopOvershoot
• slideOutToBottomOvershoot

🔄 Flip

• flip
• flipIn
• flipOut
• flipSlowDown
• flipToLeft
• flipToRight
• flipFromTop
• flipToTop
• flipToBottom
• flipFromBottom
• flipFromLeftToCenter
• flipFromRightToCenter
• flipRich
• flipToTopRich
• flipToBottomRich
• flipToTopLeftRich
• flipToRightRich
• flipFromTopRich
• flipFromBottomRich
• flipFromLeftToCenterRich
• flipFromRightToCenterRich

📂 Fold / Unfold

• fold
• foldDeep
• unfold
• unfoldDeep

🪝 Hang On

• hangOnLeft
• hangOnRight
• hangOnTop
• hangOnBottom
• hangOnLeftSwing
• hangOnRightSwing
• hangOnTopSwing
• hangOnBottomSwing
• hangOnOscillate
• hangOnDrop

🔍 Zoom

• zoomIn
• zoomOut
• zoomInFromLeft
• zoomInFromRight
• zoomInFromTop
• zoomInFromBottom
• zoomOutToLeft
• zoomOutToRight
• zoomOutToTop
• zoomOutToBottom

🌀 Rotate

• rotateCW
• rotateACW
• rotateSlowDown
• rotateX
• rotateY
• rotateFromLeft
• rotateFromRight
• rotateToLeft
• rotateToRight
• rotateFromTop
• rotateFromBottom
• rotateToTop
• rotateToBottom

🎉 Fun / Attention

• heartBeat
• tada
• hinge
• lightSpeedInLeft
• lightSpeedOutRight
• popIn
• popOut
• popBounceIn
• popBounceOut
• popUpIn
• popUpOut
• popRotateIn
• popRotateOut
• popBlurIn
• popBlurOut
• popLeftIn
• popLeftOut
• popRightIn
• popRightOut
• rubberBand
• jello
• wobble
• rollIn
• jackInTheBox

📜 License

MIT © Delpi