~2kb gzipped Star on GitHub –

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.

blockanim-clip-300

blockanim-blur-in-450

blockanim-slide-left-600

New in v2

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

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

Live Preview

Design
Animate
Ship
Repeat

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

Why blockAnim?

Everything you need,
nothing you don't.

Blazing Fast

Only ~2kb gzipped. No dependencies, no bloat. Your page loads instantly while animations run buttery smooth at 60fps.

~2kb gzipped

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.

slide-up clip fade skew diagonal +30 more

Get Started

Up and running in seconds.

Recommended

CDN

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

HTML

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

Download from GitHub

Documentation

Simple, intuitive syntax.

One class pattern to rule them all. Combine animation type, delay, and repeat mode.


              blockanim-{animation}-{delay}-repeat

Animation type Required

Delay in ms Optional

Repeat on scroll Optional

Class	Type	Description	Example
`blockanim-{animation}`	Required	The animation to apply. Choose from 35+ options.	`<div class="blockanim-slide-up">...</div>`
`blockanim-{anim}-{ms}`	Optional	Add a delay in milliseconds before the animation starts.	`<div class="blockanim-slide-up-400">...</div>`
`blockanim-{anim}-repeat`	Optional	Replay the animation each time the element enters the viewport.	`<div class="blockanim-blur-in-repeat">...</div>`
`blockanim-{anim}-{ms}-repeat`	Optional	Combine delay and repeat for full control.	`<div class="blockanim-clip-500-repeat">...</div>`

Browse all 35+ animations