slices

slices overlays the element with a stack of N rows (default 6) that match its currentColor. As you scroll past, each row scales to zero in sequence, sweeping the reveal toward the named direction. Pure transform animation — same trick as Osmo's shutter transition, GPU-rasterized, no clip-path.

Set the wrapper's color (CSS) to control the slice colour — it should match the surrounding background so the reveal looks seamless. Pair it with aa-scrub and place it at the boundary between two sections to use it as a section-transition layer (see the Webflow + Barba recipe for a worked example).

Usage

You don't author the slice DOM — the library injects it. Add aa-animate="slices…" to any element and the lib appends a .aa-slices-panel child (absolutely positioned, inset: 0, z-index: 2) containing N .aa-slice divs. If the element's position is static, it's promoted to relative; if its overflow is visible, it's set to hidden. The slice colour comes from the host element's color.

Two common patterns:

In-place — cover the element's own content

Slap it on the element you want revealed. The slices sit on top of the existing content (whatever's inside the element), match currentColor, then peel away to expose it.

<!-- The hero's text is hidden until the slices peel away.
     `color: #f4ecd8` controls the slice colour. -->
<section class="hero" style="color: #f4ecd8; background: #1c1917"
         aa-animate="slices"
         aa-scrub="true">
  <h1>The headline you'll see after the reveal.</h1>
</section>

Overlay — section-transition layer

For boundary transitions between two sections (light → dark, etc.) put an empty wrapper inside the incoming section, positioned absolutely at its top. The slices peel away to expose the section behind. This is the pattern used in the Webflow + Barba example.

<section class="next-section" style="position: relative; background: #1c1917">
  <!-- Empty veil at the top: slices are the cream of the previous section,
       peeling away to reveal the dark backdrop of this one. -->
  <div class="section-veil"
       aa-animate="slices"
       aa-scrub="true"
       aa-scroll-start="top bottom"
       aa-scroll-end="bottom top"
       style="position: absolute; top: 0; left: 0; right: 0; height: 40vh;
              color: #f4ecd8; pointer-events: none;"></div>

  <div class="next-section__inner">…</div>
</section>

Use the cover flag (slices grow inward to fill instead of peeling away) on the outgoing section's tail to chain a continuous swap between sections.

Variants

The direction lives on the aa-animate value itself (suffix). Mode and row count are space-separated flags on the same attribute, order-independent.

Variant	Direction	Mode	Rows	Notes
slices	up	reveal	6	Default — slices sweep upward to expose.
slices-up	up	reveal	6	Explicit form of the default.
slices-down	down	reveal	6	Slices sweep downward (top exposed first).
slices-left	left	reveal	6	Slices stacked horizontally; sweep leftward.
slices-right	right	reveal	6	Slices stacked horizontally; sweep rightward.
slices 12	up	reveal	12	Numeric flag overrides the row count.
slices cover	up	cover	6	cover flag inverts: slices grow to fill.
slices-right cover 12	right	cover	12	Flags compose, order-independent.

reveal (default) starts with the slices fully covering the element and scales them away (origin pinned to the opposite edge from the direction) so they collapse toward that direction. cover is the inverse — slices start hidden and scale in to fill the element, growing from the opposite edge.

Attributes

Attribute	Default	Notes
aa-animate	(required)	slices[-up|-down|-left|-right] plus optional cover and/or N flags.
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 }).

Required GSAP plugins

gsap, ScrollTrigger.

Live demo — default (slices, up direction)

The veil's color is the cream you'd see in the section above; underneath sits a darker panel. As the slices peel away upward (bottom row first), the dark panel is exposed — exactly the pattern used as a section-transition layer.

aa-animate="slices"

After reveal

Section behind.

6 rows · sweeps upward

Live demo — direction (slices-down)

Suffix the direction. slices-down flips the stagger and origin so the reveal sweeps downward — top row clears first, bottom row last.

aa-animate="slices-down" ·aa-scrub="true"

After reveal

Top exposed first.

scrub · sweeps downward

Live demo — horizontal (slices-left)

Horizontal direction swaps the slice stacking axis to row and tweens scaleX. slices-left clears right-first; slices-right clears left-first.

aa-animate="slices-left" ·aa-scrub="true"

After reveal

Right cleared first.

scrub · sweeps leftward

Live demo — row count via flag

Add an integer flag to override the default 6 rows. slices-right 16 is sixteen narrow vertical columns sweeping rightward; combine with a tighter aa-stagger for a curtain-pull feel.

aa-animate="slices-right 16" ·aa-stagger="0.04" ·aa-scrub="true"

After reveal

Curtain pull.

16 columns · stagger 0.04 · sweeps rightward

Live demo — slower stagger

aa-stagger="0.25" widens the gap between rows for a deliberate cascade. Same six rows, but each waits longer for its turn.

aa-animate="slices" ·aa-stagger="0.25"

After reveal

Cascading peel.

6 rows · stagger 0.25

Live demo — cover flag

cover inverts the animation: slices start hidden and grow in to fill the element. Useful when you want the next section to "rise into" the current one — sandwich a slices cover after the outgoing section's last block and a matching slices at the top of the incoming section for a continuous swap.

aa-animate="slices cover" ·aa-scrub="true"

Before cover

Rising curtain.

6 rows · scrub · grows upward