);
}
```
---
## ⛓️ Timeline API
Compose animations as clear motion flows, not nested callbacks.
```tsx
import { useAnimate } from "react-animate-z";
import { useEffect } from "react";
function Example() {
const { ref, sequence } = useAnimate();
useEffect(() => {
sequence()
.animate("fadeInFromBottom")
.wait(300)
.animate("pulse");
}, []);
return
Hello
;
}
```
---
## 🧠 Semantic Recipes (State-driven UX)
```tsx
import { useRecipe } from "react-animate-z";
function SaveButton() {
const anim = useRecipe();
return (
);
}
```
Available presets:
- loading()
- success()
- error()
- idle()
---
## 🔁 — Trigger by State Change
```ts
import { AnimateOn } from "react-animate-z";
Done!
```
---
## 🧩 AnimateGroup – Staggered Children
```tsx
import { AnimateGroup } from "react-animate-z";
Item 1
Item 2
Item 3
```
---
## ⌨️ Typing Animation
```tsx
import { AnimateTyping } from "react-animate-z";
```
---
## 🎲 Random & Playful Motion
```ts
import { useRandomAnimateNoRepeat } from "react-animate-z";
const play = useRandomAnimateNoRepeat(run, [
"shakeMix",
"pulse",
"flash",
"jelly",
]);
```
---
## 🪄 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
```tsx
import { AnimatePresence } from "react-animate-z";
function Example({ open }: { open: boolean }) {
return (
Hello
);
}
```
---
#### 🔥 Example: Modal
```tsx
```
---
#### 🧠 Behavior timeline
```bash
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
---
_Source: https://npm.io/package/react-animate-z · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._