Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
Per-section alpha + z-index gate for layered scroll-snap or carousel slide patterns. Writes `--alpha` (0/1) and `--z` (activeZ / inactiveZ) on `selector` based on whether `myIdx` matches the current `activeIdx`. When `exitPlaying` is wired (typical), the section stays at alpha=1 throughout its own exit fade so the outgoing section doesn't snap to invisible the instant `activeIdx` flips. Compound — expands at load to two expression nodes + two `domPropertyWrite` nodes.
Type sectionAlphaGateCategory animationContext sharedDynamic ports noCompound yes
Inputs
| Port | Type | Description |
|---|---|---|
activeIdx | float | Currently-active integer index. Wire from `bidirectionalCounter.value`, `bidirectionalSnap.activeIdx`, or any int producer. |
exitPlaying | float | 0/1 — when `1`, this section stays alpha=1 even though it's no longer the active index. Wire from THIS section's exit `pulseTween.playing` so the outgoing section keeps rendering until its tween finishes. Optional: omit for a hard alpha snap. |
Outputs
| Port | Type | Description |
|---|---|---|
| - | - | No ports declared. |
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
selector | elementSelector | "" | CSS selector for the section element receiving the alpha + z CSS variables. Inside a forEach template, set this to `{ "fromScope": "selector" }` for per-section fan-out. |
myIdx | int | 0 | This section's index in the snap sequence. Inside a forEach template, set this to `{ "fromScope": "index" }` to assign automatically. Compared against `activeIdx` to decide visibility. min 0 |
activeZ | int | 100 | Z-index applied when this section is the active one. Defaults to 100 — high enough to sit above any natural document z-stacking. |
inactiveZ | int | 0 | Z-index applied when this section is NOT active. Defaults to 0 — natural document order. |
alphaPropertyName | string | "--alpha" | CSS custom property name receiving the 0/1 alpha. Defaults to `--alpha`. |
zPropertyName | string | "--z" | CSS custom property name receiving the z-index. Defaults to `--z`. |
Use cases
- Section-snap fullscreen scroll demo — each section gets its own gate; only the entering section sits on top (high z) and the previous section stays alpha=1 until its exit pulseTween finishes.
- Carousel slide visibility — fan across N slides, each with `myIdx: { "fromScope": "index" }`, keeps only the active slide on top while neighbours fade in pre-prepared.
- Tab-strip / accordion content panels — alpha gates the inactive panels out, z-index keeps the active one on top.
Envelope
Use sectionAlphaGate 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/