text-oval
text-oval-up and text-oval-down wrap each line and animate a clip-path: ellipse(...) open 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.
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-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
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.
scrubbed (
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.
scrubbed (
aa-scrub="1")