react-animate-z

react-animate-z

LIVE EXAMPLE

A lightweight, UX-first animation library for React.

react-animate-z provides a clean imperative + declarative API to orchestrate animations

---

Why react-animate-z

• 180+ prebuilt animations
• Semantic UX states (loading / success / error)
• Timeline API (sequence, parallel, wait)
• Ref-based animation (no wrapper required)
• Random & playful animation hooks
• Reduced-motion safe
• Fully typed with TypeScript

---

Installation

npm install react-animate-z
# or
yarn add react-animate-z

---

Basic Usage (Declarative)

import Animate from "react-animate-z";

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

Animation Catalog

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

console.log(animNames);   // all animation names
console.log(animGroups); // grouped by category

---

Animate Props

Prop	Type	Default	Description
type	AnimateType	blurIn	Animation name
duration	string | number	preset map	'1s' or 1000
timing	TimingKey	ease	CSS timing function
delay	string | number	0s	Delay before start
iteration	number | "infinite"	1	Repeat count
direction	string	normal	Animation direction
fillMode	string	forwards	CSS fill-mode
tagName	string	div	Rendered HTML tag

---

Ref-based Animation (Imperative)

import { useAnimate } from "react-animate-z";

function Box() {
  const { ref, play } = useAnimate<HTMLDivElement>();

  return (
    <div ref={ref} onClick={() => play("pulse")}>
      Click me
    </div>
  );
}

---

Timeline API

Compose animations as clear motion flows, not nested callbacks.

import { useAnimate } from "react-animate-z";
import { useEffect } from "react";

function Example() {
  const { ref, sequence } = useAnimate<HTMLDivElement>();

  useEffect(() => {
    sequence()
      .animate("fadeInFromBottom")
      .wait(300)
      .animate("pulse");
  }, []);

  return <div ref={ref}>Hello</div>;
}

---

Semantic Recipes (State-driven UX)

import { useRecipe } from "react-animate-z";

function SaveButton() {
  const anim = useRecipe();

  return (
    <button
      ref={anim.ref}
      onClick={async () => {
        anim.loading();
        await save();
        anim.success();
      }}
    >
      Save
    </button>
  );
}

Available presets:

• loading()
• success()
• error()
• idle()

---

— Trigger by State Change

import { AnimateOn } from "react-animate-z";

<AnimateOn when={status} value="success" anim={["fadeIn", "pulse"]}>
  <div>Done!</div>
</AnimateOn>

---

AnimateGroup – Staggered Children

import { AnimateGroup } from "react-animate-z";

<AnimateGroup type="fadeInUp" stagger={160}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</AnimateGroup>

---

Typing Animation

import { AnimateTyping } from "react-animate-z";

<AnimateTyping
  dataText={[
    "Hello World",
    "React Animate Z",
    "Built for UX",
  ]}
/>

---

Random & Playful Motion

import { useRandomAnimateNoRepeat } from "react-animate-z";

const play = useRandomAnimateNoRepeat(run, [
  "shakeMix",
  "pulse",
  "flash",
  "jelly",
]);

<button onClick={() => play()}>Surprise me</button>

---

AnimatePresence (Enter / Exit)

AnimatePresence animates mount / unmount using enter / exit animation pairs, similar to Framer Motion but lighter, CSS-based, and no styled-components dependency.

Use case

• Modal
• Drawer / Sidebar
• Toast / Snackbar
• Tooltip
• Dropdown
• Conditional UI

---

Basic usage

import { AnimatePresence } from "react-animate-z";

function Example({ open }: { open: boolean }) {
  return (
    <AnimatePresence
      show={open}
      enter="fadeIn"
      exit="fadeOut"
      duration={300}
    >
      <div>Hello</div>
    </AnimatePresence>
  );
}

---

Example: Modal

<AnimatePresence
  show={open}
  enter="zoomIn"
  exit="fadeOut"
  duration={250}
>
  <div className="modal" />
</AnimatePresence>

---

Behavior timeline

show = false
  └─ nothing rendered

show = true
  └─ mount
      └─ enter animation

show = false
  └─ exit animation
      └─ wait(duration)
          └─ unmount

• Declarative intent, not keyframes
• Timeline-based composition
• Ref-first, framework-agnostic core
• Safe defaults for accessibility

---

Additional APIs

Components

• AnimateHost: Low-level animation context host, used for coordinating multiple animated elements.
• WrapperAnimate: Conditional animation wrapper without breaking DOM structure.
• TypingText: Lightweight typing animation for inline text (simpler than AnimateTyping).

Hooks

• useAnimateController: Imperative control over animation lifecycle (play, stop, reset).
• useAnimateSequence: Timeline logic as a hook for reusable animation flows.
• useRandomAnimateNoRepeat: Random animation helper with no immediate repetition.
• useRecipe: Semantic, state-driven animation (loading, success, error).

These APIs are intended for advanced or compositional use cases. Most applications only need and useAnimate().

---

License

MIT