A small scroll animation library: one class on an HTML element is enough for it to animate as it comes into view.
Origin
Animations I kept rebuilding.
On almost every site, I was rebuilding the same scroll reveals, like a heading that slides in, an image that unveils or a list that appears item by item.
Loading GSAP for so little felt excessive, so I gathered these animations into my own library.
Usage
One class per animation.
Add a class like blockanim-slide-up to an element, and it animates as it comes into view, with no configuration and no JavaScript to write.
The library installs with npm or CDN links, and weighs about 2 KB compressed.
New in v2
Cascade and Repeat.
With Cascade, one class on a list is enough: its items appear one after another, with no delay to write for each.
Repeat replays the animation each time the element comes back into view, handy on long pages where people scroll back up.
Demo
35+ animations to try.
On the demo site, you can replay each animation and copy its class in one click.
Under the hood
Browser APIs only.
IntersectionObserver detects when an element enters the screen, and CSS variables handle the cascade delays. For more complex sequences, the Web Animations API takes over.
I use it in production on my own projects.