INTERACTION_016

Blur Reveal.

Same observer as scroll reveal, but the element also resolves from a 8px blur, which reads as a camera pulling focus.

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

LIVE PLAYGROUND

CSS / CSS

[data-blur-reveal] {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(12px);
  transition: all 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-blur-reveal].in { opacity: 1; filter: blur(0); 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

MOVEDIFFERENT.

INTERACTION_018CSS

Headline Reveal

Lines rise out of a clipped mask, one after another.

Typography / LightView

INTERACTION_017CSS + JS

Stagger Reveal

Children enter in sequence with a fixed delay step.

Scroll / LightView

INTERACTION_131CSS

Depth Parallax

Three layers move at different speeds to build depth.

Scroll / LightView