Fade and blur

淡入与模糊 · fade-blur

Drive opacity, rise, scale and blur from the same progress value.

A fade alone can look like content simply appears. A small rise and scale give it direction. Blur softens the start and should be cleared once the entrance ends. The site's blur-rise-in combines four channels in a staggered entrance.

Formula

p = 1 − (1 − clamp(t / 1 s))^5
opacity = p; y = 30(1 − p) px
scale = .94 + .06p; blur = 6(1 − p) px
item i starts at 0.12i s

Parameters

	This page	Mature libraries
rise	30 px	—
scale	0.94 → 1	—
blur	6 → 0 px	—
duration / stagger	1 s / 0.12 s	GSAP `power4.out` = exponent 5These values come from the `momentum-slider` entrance.

Doing it well

Drive all four channels from one progress value. The site's momentum-slider uses 1 second, power4.out and 0.12 second between items.www-motion/rewrite/momentum-slider/app.js:85–87
Set the filter to none after the entrance instead of leaving blur(0px) on every element.www-motion/rewrite/liquid-type/app.js:4
One clock is enough for the stagger: derive row i's local progress by subtracting i × 0.12 s from the shared time.www-motion/rewrite/momentum-slider/app.js:85–87
Blur and movement change how information arrives; under reduced motion, the still final state must remain fully readable.

In our cases

67 studies use opacity or filter blur, and 23 use blur. Six use the blur-rise-in family. The momentum-slider version matches this page's 30 px rise, 0.94 scale, 6 px blur, 1 second and 0.12 second stagger.

Reference implementation · basics.js

/**
 * Opacity + blur driven by one progress value. Drop the filter at rest:
 * even `blur(0px)` keeps a filter layer alive on every element that has it.
 */
export function fadeBlur(progress, { blur = 6, from = 0 } = {}) {
  const b = blur * (1 - progress);
  return { opacity: lerp(from, 1, progress), filter: b > 0.05 ? `blur(${b.toFixed(2)}px)` : 'none' };
}