reveal
reveal-up / reveal-down / reveal-left / reveal-right slide a clip-path: inset(...) open from the corresponding edge. reveal-center expands a circle from the middle (it also fades opacity 0→1). reveal-oval-up and reveal-oval-down use an ellipse anchored to a corner — ideal for image reveals.
Variants
Section titled “Variants”| Variant | Clip-path | Reveal direction |
|---|---|---|
reveal-up | inset | opens upward from the bottom edge |
reveal-down | inset | opens downward from the top edge |
reveal-left | inset | opens leftward from the right edge |
reveal-right | inset | opens rightward from the left edge |
reveal-center | circle | expands from the centre (also fades 0→1) |
reveal-oval-up | ellipse | grows upward from a bottom-anchored oval |
reveal-oval-down | ellipse | grows downward from a top-anchored oval |
Attributes
Section titled “Attributes”| Attribute | Default | Notes |
|---|---|---|
aa-animate | (required) | reveal-up/down/left/right/center/oval-up/down |
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 — drive reveal from scroll |
Required GSAP plugins
Section titled “Required GSAP plugins”gsap, ScrollTrigger.
Live demo
Section titled “Live demo”reveal-up
reveal-right
reveal-center
reveal-oval-up