text-slide
text-slide-up and text-slide-down split the element into lines, mask each line, and slide the inner text into place. The mask clips the offscreen portion so adjacent lines stay clean during animation.
Variants
Section titled “Variants”| Variant | Lines slide in from |
|---|---|
text-slide-up | below the line |
text-slide-down | above the line |
Attributes
Section titled “Attributes”| Attribute | Default | Notes |
|---|---|---|
aa-animate | (required) | text-slide-up or text-slide-down. |
aa-split | lines | Override split mode (chars, words, lines). Lines stay masked regardless — see descender padding. |
aa-stagger | 0.1 (init) | Seconds between lines. Falls back to init({ stagger: { lines } }) (default 0.1). |
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. |
Each line is clipped by a wrapper, so tight line-height values can shave descenders (g, j, p, q, y). Tune the descender padding via --aa-line-mask-pad if your typeface needs more room.
Required GSAP plugins
Section titled “Required GSAP plugins”gsap, ScrollTrigger, SplitText (line splitting requires SplitText).
Live demo
Section titled “Live demo”text-slide-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-slide-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")