text-marker
text-marker-{up,down,left,right} splits the element into lines, places a colored bar over each line, and scales the bar away toward the named edge. There’s no enter phase — the bars are visible from the moment the page loads, mimicking a highlighter being pulled across the text.
The default color is currentColor so the bars match the element’s text color out of the box. Override with aa-color for a contrasting highlight.
Variants
Section titled “Variants”The suffix names the edge the bar collapses toward — like a highlighter pulled in that direction.
| Variant | Bar collapses toward |
|---|---|
text-marker-up | top |
text-marker-down | bottom |
text-marker-left | left |
text-marker-right | right |
Attributes
Section titled “Attributes”| Attribute | Default | Notes |
|---|---|---|
aa-animate | (required) | text-marker-up, -down, -left, or -right. The named edge is where the bar collapses 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. 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”text-marker-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-marker-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-marker-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-marker-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-marker-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")