Help guide

Slide Slot Animation node

Updated June 21, 2026

Slide Slot Animation node

Product media placeholder

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

A single slot in a seamlessPlayhead-driven carousel. Maps a per-slot window of the carousel playhead (e.g. [0.1, 1.1]) to a [0,1] slot-local progress (remap + fract), then animates CSS properties on the slot element via channels. One compound per slot collapses the canonical `remap + mathUtil(fract) + multiKeyframe + domPoseWrite` chain that every carousel effect repeats per slide. Compound: expanded into those four primitives at load time — no runtime class.

Type slideSlotAnimationCategory animationContext sharedDynamic ports noCompound yes

Inputs

PortTypeDescription
playheadfloatPlayhead

Outputs

PortTypeDescription
--No ports declared.

Parameters

ParameterTypeDefaultDescription
selectorelementSelector""Target Selector
slotStartfloat0Slot Start (playhead) step 0.05
slotEndfloat1Slot End (playhead) step 0.05
channelspropertyAnimationChannels{"opacity":{"cssUnit":"none","keyframes":[{"time":0,"value":0},{"time":1,"value":1}]}}Per-CSS-property keyframe channels for this slot. Optional per-channel `template: "blur({value}px)"` wraps float output into a CSS string. Mutually exclusive with `cssUnit`.

Envelope

Use slideSlotAnimation 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