reveal-slices
reveal-slices overlays the element with a stack of N rows (default 6) that match its currentColor. As you scroll past, each row scales vertically to zero — staggered from the last row first — to expose the element’s content. The technique is the same as Osmo’s shutter transition: transform-only, no clip-path, GPU-friendly.
Set the wrapper’s color (CSS) to control the slice colour — it should match the surrounding background so the reveal looks seamless.
Variants
Section titled “Variants”The mode and slice count are packed into the aa-animate value: reveal-slices[-mode][-N]. Both segments are optional and order-independent.
| Variant | Mode | Rows | Notes |
|---|---|---|---|
reveal-slices | reveal | 6 | Default — slices vanish upward to expose content. |
reveal-slices-12 | reveal | 12 | More rows = finer reveal. |
reveal-slices-cover | cover | 6 | Slices grow upward to cover content. |
reveal-slices-cover-8 | cover | 8 | Cover with custom row count. |
reveal (default) starts with the slices fully covering the element and scales them away (origin: top, so they retract upward) to expose the content. cover is the inverse — slices start hidden and scale in (origin: bottom) to fill the element. Useful as a section transition layer between two adjacent backgrounds.
Attributes
Section titled “Attributes”| Attribute | Default | Notes |
|---|---|---|
aa-animate | (required) | See variants table above. |
aa-stagger | (init) | Seconds between rows. Falls back to init({ stagger: { default } }) (default 0.1). |
aa-duration | (init) | Seconds per row. Falls back to init({ duration }) (default 0.6). |
aa-ease | (init) | Any GSAP ease. Falls back to init({ ease }) (default power4.out). |
aa-scrub | (off) | true or seconds — drive the reveal from scroll position. |
aa-scroll-start / aa-scroll-end | (init) | Falls back to init({ scrollStart, scrollEnd }) (defaults top 92% / bottom 70%). |
The element is given position: relative and overflow: hidden if it wasn’t already. The slice panel is appended as the last child with z-index: 2.
Required GSAP plugins
Section titled “Required GSAP plugins”gsap, ScrollTrigger.