text-fade
The fade family splits the element into characters and animates the opacity of each one. text-fade is plain. text-fade-up, -down, -left, -right add a directional offset. text-fade-30 / text-fade-10 start at 30% / 10% opacity instead of 0 — pair them with aa-scrub to dim a paragraph as it enters view.
Variants
Section titled “Variants”| Variant | Starts at | Offset |
|---|---|---|
text-fade | opacity 0 | none |
text-fade-up | opacity 0 | translateY from below |
text-fade-down | opacity 0 | translateY from above |
text-fade-left | opacity 0 | translateX from the right |
text-fade-right | opacity 0 | translateX from the left |
text-fade-30 | opacity 0.3 | none — pair with aa-scrub for a dim |
text-fade-10 | opacity 0.1 | none — pair with aa-scrub for a dim |
Attributes
Section titled “Attributes”| Attribute | Default | Notes |
|---|---|---|
aa-animate | (required) | One of the variants above. |
aa-split | chars | Override split mode (chars, words, lines). Add mask flag for line clipping (see descender padding). |
aa-stagger | 0.02 | Seconds between parts. Falls back to init({ stagger: { chars } }) (default 0.02). |
aa-duration | (init) | Seconds. Falls back to init({ duration }) (default 0.6). |
aa-delay | 0 | Seconds. |
aa-intensity | 1 | Multiplier on offset variants. Falls back to init({ intensity }) (default 1). |
aa-ease | (init) | Any GSAP ease. Falls back to init({ ease }) (default power4.out). |
aa-scrub | (off) | true or seconds — bind progress to scroll. |
Required GSAP plugins
Section titled “Required GSAP plugins”gsap, ScrollTrigger, SplitText (chars fall back to a regex splitter when SplitText is missing).
Live demo
Section titled “Live demo”text-fadeA 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-fade-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-fade-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-fade-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-fade-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")
Tied to scroll.
Watch the easing.
Feel each beat.
text-fade-30A 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-fade-10A 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")