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.
Add aa-color to any text-fade* element for an accent colour wave: each character fills in from its dim resting state, takes on the accent colour, holds it, then settles to the base text colour — so the accent lingers and the per-character stagger reads as a gradient wave. See Accent colour wave below.
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. |
aa-color | (off) | Accent colour each character pulses through (base → accent → hold → base) as it fades in. Any CSS colour (#F84131, rgb(...), named) or a --custom-prop name. Enables the accent colour wave. |
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")Tied to scroll.
Watch the easing.
Feel each beat.
Accent colour wave
Section titled “Accent colour wave”Adding aa-color to a text-fade* element gives each character a colour pulse on top of the usual opacity fade. Each character rests dim in its base colour (opacity only — no tint yet), then as it fills in it takes on the accent colour, holds it briefly, and finally settles back to the base. The pulse runs longer than the fade-in and lingers on the accent, so — with the per-character stagger — the accent trails the reveal front as a gradient wave: leading characters have already settled to the base while trailing ones are still glowing with the accent.
- Base colour is automatic — it’s the element’s own computed CSS
color, so the wave always resolves to whatever the text normally is. - One-shot by default, tied to scroll when you add
aa-scrub— the scrubbed rows below track the wave to scroll position in both directions. text-fade-30/text-fade-10keep the characters partly visible in the base colour from the start, then brighten to the accent as they fill to full opacity before settling back — the softest, most gradient-like look.
The same attribute works on the blur family too.
text-fadeaa-color="#F84131"A 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-30aa-color="#F84131"A 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-upaa-color="#5B8DEF"A 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")