Add a class. Get a polished, production-ready animation. Or go deeper — CSS variables, a JS timeline API, FLIP layout transitions, and scroll-driven effects. Everything in one library.
Start with zero knowledge and add complexity only when you need it. Each layer is a superset of the one before.
data-gleam and go.<script src="gleam.bundle.min.js"></script>
<div data-gleam="fade-up"
data-gleam-scroll
data-gleam-delay="200">
Hello world
</div>
<!-- Stagger children automatically -->
<ul data-gleam="fade-up"
data-gleam-scroll
data-gleam-stagger="80">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul><link rel="stylesheet"
href="gleam.all.min.css">
<div class="gleam entrance-rise
util-duration-700
util-delay-200">
Silky entrance
</div>
/* Customise per-element */
.my-card {
--duration: 800ms;
--ease: var(--ease-spring);
--distance: 40px;
}// Sequence with timeline
gleam.timeline()
.add('.hero', 'rise')
.add('.subtitle', 'fade-up', { delay: 150 })
.add('.cards', 'fade-up', { stagger: 80 })
.play();
// FLIP list sort
gleam.flip('.list', () => {
items.sort(byDate).forEach(i => list.append(i));
});
// Animate on event
gleam.on('.btn', 'click', '#panel', 'rise');Browse all 280+ effects. Click one to preview it instantly — then grab the class name.
<div class="gleam entrance-pop-in">...</div>Not just bouncing boxes. GLEAM solves the motion patterns you actually build.
grid-template-rows: 0fr → 1fr trick — no JS required for the transition. Works on any content height without measuring..gleam-expanded. The transition is 100% CSS with no height calculations.gleam-expanded from your component state and the CSS handles the rest.
Wire a trigger to a target. GLEAM plays the open animation on first click and the close animation on second — managing hidden state automatically.
<button data-gleam-trigger="#panel">Open</button>
<div id="panel"
data-gleam-open="rise"
data-gleam-close="sink">...</div>This section animates as you reach it — using GLEAM's own scroll trigger system. Zero extra configuration.
24 animated gradient and surface effects. Customise via CSS variables. Stack on anything.
15 hover micro-interactions. Add one class — no JavaScript, no event listeners.
Glitch, hologram, VHS, portal — drop-in effects for hero sections, image overlays, and game UIs.
| Feature | GLEAM v3 | Animate.css | AOS | GSAP (free) |
|---|---|---|---|---|
| Zero-config (data attributes) | ✓ | – | ✓ | – |
| CSS class API | ✓ | ✓ | △ | – |
| JS timeline API | ✓ | – | – | ✓ |
| FLIP layout transitions | ✓ | – | – | ✓ |
| Height:auto animation | ✓ | – | – | ✓ |
| scroll() timeline (zero JS) | ✓ | – | – | – |
| @starting-style native dialogs | ✓ | – | – | – |
| @layer (no specificity fights) | ✓ | – | – | – |
| CSS variable customisation | ✓ | △ | – | ✓ |
| Gradient / surface effects | ✓ | – | – | – |
| TypeScript definitions | ✓ | – | – | ✓ |
| No build step required | ✓ | ✓ | ✓ | ✓ |
| Prefers-reduced-motion | ✓ | ✓ | △ | △ |
Every module is a standalone CSS file. Use the full bundle or cherry-pick by feature.