https://github.com/delpikye-v/react-animate
Lightweight React animation library with Animate and AnimateTyping components, built using styled-components.
https://github.com/delpikye-v/react-animate
animate animation react-animate react-animations simple-animation smooth-animation
Last synced: 4 months ago
JSON representation
Lightweight React animation library with Animate and AnimateTyping components, built using styled-components.
- Host: GitHub
- URL: https://github.com/delpikye-v/react-animate
- Owner: delpikye-v
- License: mit
- Created: 2023-05-08T20:07:07.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2026-02-05T19:35:30.000Z (4 months ago)
- Last Synced: 2026-02-06T05:04:44.676Z (4 months ago)
- Topics: animate, animation, react-animate, react-animations, simple-animation, smooth-animation
- Homepage: https://www.npmjs.com/package/react-animate-z
- Size: 184 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🎞️ react-animate-z
[](https://www.npmjs.com/package/react-animate-z) 
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
```bash
npm install react-animate-z
# or
yarn add react-animate-z
```
---
## 🚀 Basic Usage (Declarative)
```tsx
import Animate from "react-animate-z";
export default function App() {
return (
Hello Animation
);
}
```
## 🎛️ Animation Catalog
```ts
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)
```tsx
import { useAnimate } from "react-animate-z";
function Box() {
const { ref, play } = useAnimate();
return (
play("pulse")}>
Click me
);
}
```
---
## ⛓️ 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 (
{
anim.loading();
await save();
anim.success();
}}
>
Save
);
}
```
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",
]);
play()}>Surprise me
```
---
## 🪄 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