text-scale
The scale family splits the element into characters and tweens scaleY from 0 to 1. The transform origin decides which edge stays put: text-scale opens from the vertical center outward, text-scale-up grows upward from the baseline, and text-scale-down grows downward from the cap line.
Variants
Section titled “Variants”| Variant | Transform origin | Visual effect |
|---|---|---|
text-scale | 50% 50% | Each char opens from its vertical center. |
text-scale-up | 50% 100% | Each char grows upward from the bottom edge. |
text-scale-down | 50% 0% | Each char grows downward from the top edge. |
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. Append center / edges / random to reorder. 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-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.
Live demo
Section titled “Live demo”Scale animations read well when they're snappy — these demos shorten the duration to 0.4s and tighten the stagger to 0.015s. The first row staggers from the center out; the up/down rows use the default stagger order.
text-scaleA 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-scale-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-scale-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")