react-animate-z

v2.3.0

Published

3 months ago

Lightweight React animation library with Animate and AnimateTyping components, built using styled-components.

📦 react-animate-z

Downloads

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