blur
blur fades opacity 0 → 1 while the CSS blur filter shrinks from 20px to 0. The result is a soft, hazy entrance — useful for hero imagery and editorial layouts.
For per-character blur on text, see text-blur instead.
Attributes
Section titled “Attributes”| Attribute | Default | Notes |
|---|---|---|
aa-animate | (required) | blur |
aa-duration | (init) | seconds — falls back to init({ duration }) (default 0.6) |
aa-delay | 0 | seconds |
aa-ease | (init) | any GSAP ease — falls back to init({ ease }) (default power4.out) |
aa-stagger | (off) | when set on a parent with children, staggers the children |
aa-scrub | (off) | true or seconds — bind progress to scroll |
Required GSAP plugins
Section titled “Required GSAP plugins”gsap, ScrollTrigger.
Live demo — solo
Section titled “Live demo — solo”blur
Live demo — staggered
Section titled “Live demo — staggered”stagger
blur
across
a
grid
of
Live demo — scrub-driven
Section titled “Live demo — scrub-driven”Pair blur with aa-scrub to bind its progress directly to scroll position. aa-scrub="true" snaps the blur and opacity to scroll exactly; a numeric value (e.g. "1") smooths it with that many seconds of lag.
scrubbed blur