Utilities
Lazy‑Load Animations
Defer reveal animations with .lazy-load. When you add the .show class (via your preset JS), elements fade and slide into view.
Basic Usage
Simply add .lazy-load to any element. Your JS will detect when it scrolls into view and add .show.
<div class="lazy-load">
<h2>Hello, world!</h2>
</div>This block fades in when visible.
Each element animates once.
Direction Variants
Combine with:
.lazy-from-left,
.lazy-from-right,
.lazy-from-top, or
.lazy-from-bottom
for slide‑in directions.
<div class="lazy-load lazy-from-left">…</div>
<div class="lazy-load lazy-from-top show">…</div>Slide in from left
Slide in from right
Slide in from top
Slide in from bottom