text-tilt

text-tilt-up and text-tilt-down are the same shape as text-slide-* but add a 10° rotation pivoting from the bottom-left (up) or top-left (down) corner of each line. The result has more weight than a flat slide-up — useful when you want type to feel like it lands rather than glides.

Variants

Variant	Lines slide in from	Rotation pivot
text-tilt-up	below the line	bottom-left corner
text-tilt-down	above the line	top-left corner

Attributes

Attribute	Default	Notes
aa-animate	(required)	text-tilt-up or text-tilt-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.

Live demo

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

text-tilt-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-tilt-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.