Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
A whole seamlessPlayhead-driven carousel effect as one author node. Every slot element matched by `selector` runs the same channel template, phase-shifted by its document-order index times `slotStride`. Expands at load into a single `carouselFanout` runtime node — N is resolved at bind time from `selector`, so adding or removing cards requires no graph edits. If you need per-slot divergence, detach to individual `slideSlotAnimation` nodes.
Type carouselEffectAnimationCategory animationContext sharedDynamic ports noCompound yes
Inputs
| Port | Type | Description |
|---|---|---|
playhead | float | Playhead |
Outputs
| Port | Type | Description |
|---|---|---|
| - | - | No ports declared. |
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
selector | elementSelector | ".carousel-slide" | CSS selector matching every slot element. Document order = slot order. The runtime fan-out re-resolves the live element list at bind time, so adding or removing matching DOM nodes auto-rescales the carousel. |
slotStride | float | 0.1 | Playhead delta between consecutive slots. Slot i's window starts at `slotOffsetBase + i * slotStride`. step 0.01 |
slotWindow | float | 1 | `slotEnd - slotStart` per slot — width of the window in playhead space within which one slot's channels evaluate from t=0 to t=1. step 0.05 |
slotOffsetBase | float | 0 | Playhead offset of slot 0's window start. step 0.05 |
channels | propertyAnimationChannels | {"opacity":{"cssUnit":"none","keyframes":[{"time":0,"value":0},{"time":1,"value":1}]}} | Shared keyframe template applied to every slot. Optional per-channel `template: "blur({value}px)"` wraps float output into a CSS string — useful for `filter` / `clip-path` writes. Mutually exclusive with `cssUnit`. Composed shape `{ template, channels: { sub: { keyframes } } }` drives multi-input CSS strings. |
Related nodes
Envelope
Use carouselEffectAnimation 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/