text-oval
text-oval-up and text-oval-down auto-split the element into lines and animate a clip-path: ellipse(...) open on each line, from a small starting ellipse to a fully-revealed line. up anchors the ellipse at the bottom edge (line emerges over the horizon); down anchors at the top.
This is purely CSS clip-path — no opacity fade — so the silhouette of the type is visible during the reveal.
aa-split is locked to lines: the reveal is structurally per-line, so chars/words don't apply. Any value you set is ignored.
Variants
Section titled “Variants”| Variant | Ellipse anchor | Effect |
|---|---|---|
text-oval-up | bottom edge | Lines emerge upward over a horizon |
text-oval-down | top edge | Lines emerge downward from above |
Attributes
Section titled “Attributes”| Attribute | Default | Notes |
|---|---|---|
aa-animate | (required) | text-oval-up or text-oval-down. |
aa-split | lines (locked) | Cannot be overridden — the reveal wraps each line in a clip-ellipse. |
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 an ellipse 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.
Live demo
Section titled “Live demo”text-oval-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-oval-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")