motion-slider

Gesture-driven horizontal carousel with spring snap, velocity-based flicking, and rubber-band edges. Works with any child content.

Preview

motion-split Spring motion.

Each character springs in independently — controllable interval and duration.

motion-stagger
Spring physics
Velocity flick
Gesture driven
Accessible

Children reveal with cascading spring delay.

motion-counter fluid · spring · native

Numbers animate to their target with eased timing.

Import

Usage

How it works

Each direct child becomes a slide, sized to fill the slider width. Pointer events are tracked across the window so drag doesn't break when the cursor leaves the element. On release, velocity is sampled over the last 6 pointer events — a fast flick snaps to the adjacent slide; a slow drag snaps to the nearest.

The spring uses the captured velocity as its initial condition, so the snap animation feels like a physical continuation of the gesture rather than a teleport.

Properties

Attribute Property Type Default Description
gap gap number 24 Gap between slides in px
arrows arrows boolean true Show prev/next arrow buttons. Set arrows="false" to hide.

Methods

MethodDescription
goTo(index, velocity?)Animate to a specific slide index. Optional initial velocity in px/s.

Keyboard

Focus the slider and use ArrowLeft / ArrowRight to navigate.

Accessibility

When prefers-reduced-motion is set, transitions are instant with no animation.