text-blur
The blur family splits the element into characters and fades each one in while a CSS blur filter dissipates. The plain variant has no positional offset; directional variants add an offset so characters drift into place behind the blur.
text-blur-up / text-blur-down are line-masked — characters slide vertically by 110% of their own height and are clipped by their parent line. text-blur-left / text-blur-right slide horizontally by 30 × distance pixels.
Variants
Section titled “Variants”| Variant | Blur amount | Offset |
|---|---|---|
text-blur | 20px | none |
text-blur-up | 10px | translateY 110% from below (line-masked) |
text-blur-down | 10px | translateY 110% from above (line-masked) |
text-blur-left | 10px | translateX 30 × distance from the right |
text-blur-right | 10px | translateX 30 × distance from the left |
Attributes
Section titled “Attributes”| Attribute | Default | Notes |
|---|---|---|
aa-animate | (required) | One of the variants above. |
aa-split | chars | Override split mode. |
aa-stagger | 0.02 | Seconds between parts. |
aa-duration | (init) | Seconds. |
aa-delay | 0 | Seconds. |
aa-distance | 1 | Multiplier on the horizontal offset (left/right). |
aa-ease | (init) | Any GSAP ease. |
aa-scrub | (off) | true or seconds — bind progress to scroll. |
Required GSAP plugins
Section titled “Required GSAP plugins”gsap, ScrollTrigger, SplitText.
Live demo
Section titled “Live demo”text-blurA short hero line
A two-line subhead that wraps onto a second line to show per-line behaviour.
A three-line paragraph of body copy so we can see how the animation reads at a longer scale, with several lines of text wrapping naturally across the page width.
aa-scrub="1")
Tied to scroll.
Watch the easing.
Feel each beat.
text-blur-upA short hero line
A two-line subhead that wraps onto a second line to show per-line behaviour.
A three-line paragraph of body copy so we can see how the animation reads at a longer scale, with several lines of text wrapping naturally across the page width.
aa-scrub="1")
Tied to scroll.
Watch the easing.
Feel each beat.
text-blur-downA short hero line
A two-line subhead that wraps onto a second line to show per-line behaviour.
A three-line paragraph of body copy so we can see how the animation reads at a longer scale, with several lines of text wrapping naturally across the page width.
aa-scrub="1")
Tied to scroll.
Watch the easing.
Feel each beat.
text-blur-leftA short hero line
A two-line subhead that wraps onto a second line to show per-line behaviour.
A three-line paragraph of body copy so we can see how the animation reads at a longer scale, with several lines of text wrapping naturally across the page width.
aa-scrub="1")
Tied to scroll.
Watch the easing.
Feel each beat.
text-blur-rightA short hero line
A two-line subhead that wraps onto a second line to show per-line behaviour.
A three-line paragraph of body copy so we can see how the animation reads at a longer scale, with several lines of text wrapping naturally across the page width.
aa-scrub="1")