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

Variant	Lines slide in from
text-slide-up	below the line
text-slide-down	above the line

Attributes

Attribute	Default	Notes
aa-animate	(required)	text-slide-up or text-slide-down.
aa-stagger	0.1 (init)	Seconds between lines. Falls back to init({ stagger: { lines } }) (default 0.1).
aa-duration	(init)	Seconds.
aa-delay	0	Seconds.
aa-ease	(init)	Any GSAP ease.
aa-scrub	(off)	true or seconds — bind progress to scroll.

Required GSAP plugins

gsap, ScrollTrigger, SplitText (line splitting requires SplitText).

Live demo

aa-animate="text-slide-up | text-slide-down"

text-slide-up

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.

scrubbed (aa-scrub="1")

Tied to scroll.
Watch the easing.
Feel each beat.

text-slide-down

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.

scrubbed (aa-scrub="1")

Tied to scroll.
Watch the easing.
Feel each beat.