INTERACTION_017

Stagger Reveal.

A CSS custom property carrying the index drives a transition delay, so a grid resolves in a controlled cascade rather than all at once.

CATEGORY: Scroll
COMPLEXITY: Easy
TECH: CSS + JS
PLATFORM: Both
PERFORMANCE: Light

LIVE PLAYGROUND

CSS / CSS

.stagger > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
  transition-delay: calc(var(--i) * 70ms);
}
.stagger.in > * { opacity: 1; transform: none; }

IF YOU LIKE THIS, STEAL THESE TOO.

All effects

INTERACTION_015CSS + JS

Scroll Reveal

Content fades and rises as it enters the viewport.

Scroll / LightView

CARD_01

INTERACTION_006CSS

Premium Card Lift

4px elevation with border brightening.

Cards / LightView

INTERACTION_016CSS + JS

Blur Reveal

Content sharpens from blur as it enters view.

Scroll / MediumView

INTERACTION_131CSS

Depth Parallax

Three layers move at different speeds to build depth.

Scroll / LightView