text-block
text-block-{up,down,left,right} splits the element into lines and runs a two-phase reveal per line: a colored bar grows in from one edge to fully cover the line, then shrinks out the opposite edge while the underlying text fades into place from a small offset.
The animation is transform-only — the bar uses scaleX / scaleY with transformOrigin flipped at the half-way point — so it stays GPU-cheap even on long paragraphs.
Variants
Section titled “Variants”The suffix names the edge the bar exits toward — i.e. the direction the bar leaves once the text is revealed.
| Variant | Bar enters from | Bar exits toward |
|---|---|---|
text-block-up | bottom | top |
text-block-down | top | bottom |
text-block-left | right | left |
text-block-right | left | right |
Attributes
Section titled “Attributes”| Attribute | Default | Notes |
|---|---|---|
aa-animate | (required) | text-block-up, -down, -left, or -right. The named edge is where the bar exits to. |
aa-color | currentColor | Bar color. Raw CSS color (#hex, rgb(), named) or a CSS custom property name (--brand). |
aa-stagger | 0.1 (init) | Seconds between lines. Falls back to init({ stagger: { lines } }) (default 0.1). |
aa-duration | (init) | Seconds. Total length of one line’s animation — falls back to init({ duration }) (default 0.6). |
aa-delay | 0 | Seconds. |
aa-ease | (init) | Any GSAP ease. |
aa-scrub | (off) | true or seconds — bind progress to scroll. |
The duration is split internally as 0.4 × duration for the bar enter and 0.6 × duration for the bar exit. The text fade overlaps the exit phase.
Required GSAP plugins
Section titled “Required GSAP plugins”gsap, ScrollTrigger, SplitText.
Live demo
Section titled “Live demo”text-block-right 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 across each line as you scrub up and down.
text-block-left 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 across each line as you scrub up and down.
text-block-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.
aa-scrub="1")Tied to scroll. Watch the easing across each line as you scrub up and down.
text-block-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.
aa-scrub="1")Tied to scroll. Watch the easing across each line as you scrub up and down.
text-block-right · aa-color="#C700EF" 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")