blockAnim

v2.0 · ~2kb gzipped · MIT License

Animate any HTML element in one class.

The simplest way to add scroll-triggered micro-interactions to your UI. No config, no JS to write — just add a class.

🆕 New in v2: Cascade

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.

<ul class="blockanim-slide-up-100-cascade">
  <li>Design</li>
  <li>Animate</li>
  <li>Ship</li>
  <li>Repeat</li>
</ul>

Works with -repeat too: blockanim-slide-up-100-cascade-repeat

Why blockAnim?

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. |

Get Started

Up and running in seconds.

CDN (Recommended)

The fastest way. Just copy these two lines into your HTML file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/gc-guillaume/blockanim-v2/blockanim.min.css">
<script src="https://cdn.jsdelivr.net/gh/gc-guillaume/blockanim-v2/blockanim.min.js"></script>

Download

Get the source code and customize animations to your needs.

Documentation

Simple, intuitive syntax.

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 |

Examples

| 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. |

<!-- Basic animation -->
<div class="blockanim-slide-up">...</div>

<!-- With delay -->
<div class="blockanim-slide-up-400">...</div>

<!-- With repeat -->
<div class="blockanim-blur-in-repeat">...</div>

<!-- Delay + repeat -->
<div class="blockanim-clip-500-repeat">...</div>

License

Open source under MIT License. Free for personal and commercial use.

Author

Guillaume Coulin

Made with care on the Côte d'Azur.

Portfolio · LinkedIn · Contact