Animate any HTML element in one class. Scroll-triggered micro-interactions with zero config.
npm install blockanimv2.0 · ~2kb gzipped · MIT License
The simplest way to add scroll-triggered micro-interactions to your UI. No config, no JS to write — just add a class.
---
One class to rule them all.
Introducing Cascade — animate all children of an element sequentially with a single class. No more copy-pasting delays on every item.
``html`
Works with -repeat too: blockanim-slide-up-100-cascade-repeat
---
Everything you need, nothing you don't.
| Feature | Description |
|---------|-------------|
| ⚡ Blazing Fast | Only ~2kb gzipped. No dependencies, no bloat. Your page loads instantly while animations run buttery smooth at 60fps. |
| 🎯 One Class | Add a single class to any HTML element. That's it. No JavaScript to write, no configuration needed. |
| ⏱️ Custom Delays | Chain animations with custom delays in milliseconds. Create beautiful sequential reveals effortlessly. |
| 🔄 Repeat Mode | Animations replay every time elements scroll into view. Perfect for long pages and portfolios. |
| 🎨 35+ Animations | Slides, clips, fades, skews, diagonals, and more. A complete toolkit for modern web animations. |
---
Up and running in seconds.
The fastest way. Just copy these two lines into your HTML file:
`html`
Get the source code and customize animations to your needs.
---
One class pattern to rule them all. Combine animation type, delay, and repeat mode.
`
blockanim-{animation}-{delay}-repeat
| Part | Required | Description |
|------|----------|-------------|
| {animation} | ✅ Yes | The animation type |{delay}
| | ❌ Optional | Delay in ms |-repeat
| | ❌ Optional | Repeat on scroll |
| Class | Type | Description |
|-------|------|-------------|
| blockanim-{animation} | Required | The animation to apply. Choose from 35+ options. |blockanim-{anim}-{ms}
| | Optional | Add a delay in milliseconds before the animation starts. |blockanim-{anim}-repeat
| | Optional | Replay the animation each time the element enters the viewport. |blockanim-{anim}-{ms}-repeat
| | Optional | Combine delay and repeat for full control. |
`html
---
Open source under MIT License. Free for personal and commercial use.
---
Guillaume Coulin
Made with care on the Côte d'Azur.