Help guide

Carousel Fanout node

Updated June 21, 2026

Carousel Fanout node

Product media placeholder

Replace this area with a screenshot or short walkthrough video during the media sweep.

Runtime fan-out of a shared keyframe template across N DOM elements with phase-shifted local time. Resolves matching elements at bind time via `selector` and runs all N slot evaluations inside one node — replaces the legacy expansion-time fan-out (`carouselEffectAnimation` → N × `slideSlotAnimation` × 4 primitives) with a single runtime node. Preferred runtime shape; `carouselEffectAnimation` is the author-facing compound that emits one of these. Channels accept the simple `{cssUnit?, template?, keyframes}` shape and the composed `{template, channels: { sub: { keyframes } }}` shape that drives multi-input CSS strings (`filter: blur({blur}px) brightness({bright})`) without going through CSS variables.

Type carouselFanoutCategory animationContext sharedDynamic ports noCompound no

Inputs

PortTypeDescription
playheadfloatPlayhead

Outputs

PortTypeDescription
--No ports declared.

Parameters

ParameterTypeDefaultDescription
selectorelementSelector""CSS selector matching every slot element. Document order = slot order.
slotStridefloat0.1Slot Stride (playhead) step 0.01
slotWindowfloat1Slot Window step 0.05
slotOffsetBasefloat0Slot 0 Offset step 0.05
channelspropertyAnimationChannels{"opacity":{"cssUnit":"none","keyframes":[{"time":0,"value":0},{"time":1,"value":1}]}}Shared keyframe template. Optional per-channel `template: "blur({value}px)"` for single-input string writes; composed `{template, channels: { sub: { keyframes } }}` for multi-input CSS string writes (`filter`, `clip-path`).

Related nodes

Envelope

Use carouselFanout 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/

Was this guide helpful?

Sunny Arora

Written by

Sunny Arora

Get technical deep dives delivered to your inbox

Join creators and developers who get exclusive insights, tutorials, and behind-the-scenes content every week.

No spam. Unsubscribe anytime.

Continue Exploring

You might also enjoy