Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
Bidirectional CSS clip-path inset reveal. Drives `--clip-top` and `--clip-bottom` CSS variables on `selector` from a 0..1 progress + a forward / backward direction pair, so `clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0)` rolls open from the bottom up on forward arrival and from the top down on backward arrival. Compound — expands at load to two expression nodes + two `domPropertyWrite` nodes.
Type clipPathRevealCategory animationContext sharedDynamic ports noCompound yes
Inputs
| Port | Type | Description |
|---|---|---|
progress | float | 0..1 reveal driver. 0 = fully clipped (hidden), 1 = fully visible. Wire from a tween, pulseTween, scroll progress, or any normalised 0..1 source. |
forward | float | 0/1 latch — when `1`, the top inset animates and the bottom stays at 0%. Wire from `directionLatch.forwardActive`. The directionLatch already enforces forward / backward exclusivity so the unused side never animates. |
backward | float | 0/1 latch — when `1`, the bottom inset animates and the top stays at 0%. Wire from `directionLatch.backwardActive`. |
Outputs
| Port | Type | Description |
|---|---|---|
| - | - | No ports declared. |
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
selector | elementSelector | "" | CSS selector for the element receiving the clip-path CSS variables. Inside a forEach template, set this to `{ "fromScope": "selector" }` to fan-out per matched section. |
topPropertyName | string | "--clip-top" | CSS custom property name receiving the top inset percentage. Defaults to `--clip-top` matching the demo CSS contract. |
bottomPropertyName | string | "--clip-bottom" | CSS custom property name receiving the bottom inset percentage. Defaults to `--clip-bottom`. |
cssUnit | string | "%" | CSS unit appended to the written value. Defaults to `%`. |
Use cases
- Section-snap fullscreen scroll demo — each section's background image reveals from below on forward scroll, from above on backward scroll, with a single 0..1 progress driving both directions.
- Page-transition reveals — background image stays put while the inset rolls back, no jank from animating the image position itself.
- Hero-wipe intros — pair with a `pulseTween` to ramp progress 0→1 on load, gives a clean theatrical reveal without bespoke math nodes per side.
Envelope
Use clipPathReveal as the node type inside a graph node envelope. Add id, optional params, optional connections, and optional activeWhen based on the guide context.
Generated source
Registry faster-motion-docs/node-registry.jsonCategory page /help/faster-motion/faster-motion-node-category-animation/