Focus ring
whileFocus animates a glow ring on keyboard focus.
motion-solidjs·77 examples
Motion for SolidJS, by example.
A live gallery of every gesture, transition, layout trick, drag constraint, scroll effect and motion value pattern — running on motion-solidjs, TanStack Start and SolidJS.
Gestures
hover, tap, focus and pan interactionsHover
whileHover springs the box up and changes its background.
Hover + tap stack
A row of chips that lift on hover and depress on tap, with a per-item spring.
Pan gesture
Track pointer offset across pan events.
Tap
Press-and-hold shrinks the button, release springs it back.
Animations
transitions, keyframes, springsanimate()
The imperative animate() function — drive a DOM element from a click handler.
Animate on mount
initial → animate runs once when the element mounts.
Between value types
Switching between px and % widths — motion handles the unit.
Box-shadow
Soft, breathing drop-shadow on a hovering disc.
createAnimateMini
WAAPI-only sibling of createAnimate — smallest bundle for transform & opacity sequences.
createAnimationFrame
Run a callback every frame — drive a signal and a motion value from one rAF loop.
createReducedMotionConfig
Read the resolved reduced-motion preference — combines the OS setting with MotionConfig.
CSS variables
Animate any custom property — color, length, anything.
delay()
A cancellable, frame-aware setTimeout — returns a cancel function.
Filter — blur & hue
CSS filter strings interpolate between blur and hue-rotate.
Height: auto
A collapsible drawer with smooth height animation.
Keyframes
Pass an array of values to interpolate through keyframes.
Repeat & reverse
repeatType "reverse" yo-yos endlessly between two states.
Spring physics
Stiffness and damping shape a natural overshoot.
spring()
Use the spring generator with animate() — switch stiffness on the fly.
stagger()
Imperative stagger — pass stagger() to animate() to cascade selectors.
Transition along an arc
Set `transition.path = arc()` to follow a curved bezier path between keyframes instead of the default straight line.
Tween easing
A linear tween with custom cubic-bezier easing.
wrap()
Wrap a number into [min, max) — perfect for circular indices.
Variants
orchestration and staggeringcreateCycle
Step through a fixed set of variants — each click advances and wraps around.
Variants — basic
Name your states and toggle between them by string.
Dynamic variants
Variants can be functions that receive a per-item custom value.
Variant propagation
Variants flow down the tree; toggle the parent only.
Stagger children
staggerChildren orchestrates a beautiful entrance.
AnimatePresence
mount and unmount animationsAnimatePresence — basic
Exit animations when an element unmounts.
AnimatePresence — modes
Compare sync, wait and popLayout side by side.
AnimatePresence — slide carousel
Arrow buttons slide a card; exit direction depends on the press.
Crossfade tabs
Switch tab bodies with a quick crossfade.
AnimatePresence — wait
mode="wait" defers the new child until the old one exits.
Image gallery
Directional slide-and-fade as you page through.
Modal
Backdrop fade + sheet slide, with coordinated exit.
Notifications stack
Items spring in, fall out and the stack reflows.
Layout
layout and shared layout animationscreateInstantLayoutTransition
Skip the layout animation for a single update — instant snap vs animated reorder.
Expandable card
A card grows to reveal more content with shared layout.
Layout — basic
Toggle the alignment; layout="true" tweens the position.
Layout — list reflow
Layout siblings reflow with springs when an item is removed.
Layout — shuffle
A list of items reshuffles every second; layout springs them into place.
Shared layout
layoutId animates between two elements as one.
Shared layout — tabs
layoutId slides the active underline; AnimatePresence swaps the body.
Drag
draggable elements, constraints, reorderDrag — basic
A draggable block with momentum and a soft spring back.
Drag — constraints
Numerical constraints limit how far the element travels.
Drag — bounded by parent
Pass a DOM element as constraint — the box stays inside.
Drag — createDragControls
Start a drag from a separate handle with createDragControls.
Reorder list
Drag the rows to reorder them — values stay in sync.
Drag — snap to slots
On drag end, snap to the nearest of three positions.
Scroll
scroll-linked animations and viewportcreateInView
A boolean accessor — flip any UI from the imperative IntersectionObserver primitive.
Parallax layers
Two shapes drift at different speeds as you scroll the box.
scroll()
Imperative scroll() — drive a progress bar with a callback.
Scroll progress
A spring-smoothed scrollYProgress on the inner container.
While in view
Each card animates as it enters the viewport.
Motion Values
hooks for fine-grained reactivitycreateAnimate
Imperative animation — chain steps inside a click handler.
createCombinedMotionValue
Low-level: build a tuple motion value and explicitly subscribe its sources.
createComputed
Derive a motion value from a getter — dependencies are auto-tracked.
createFollowValue
Trail a source value with a tween — no spring physics, no overshoot.
createMotionValue + createTransform
Drag a slider — motion values feed both the dot and a live counter.
createMotionValueEvent
Subscribe to every change of a motion value — drag and watch the readout.
createReducedMotion
Respect the user — fall back to a tame transition.
createSpring
Smooth any motion value with a spring — fingers track lag.
createTime
A motion value that ticks with the document — drive any prop.
createVelocity
Skew the dragged element by its instantaneous velocity.
RowValue counter
Animate a MotionValue and read it inline with <RowValue>.
SVG
paths, morphing and SVG transformsSVG transforms
Independent transforms on an SVG group.
SVG path draw
Animate pathLength to draw the checkmark on mount.
SVG path — morph
flubber + createTransform mixer morph an icon between shapes.
SVG path — draw shapes
A grid of shapes drawn in with staggered pathLength + opacity.
Showcase
polished UI components built with motionAnimated button
A submit button that morphs through pending and success.
Characters remaining
A circle ring shrinks toward the limit, color warms past 80%.
Cursor trail
A chain of springs follows the pointer with growing lag.
Fancy like button
A heart pops, particles burst, and the count slides up.
Multi-state badge
Cycle the badge between statuses with a layout crossfade.
Segmented control
Pill indicator slides between items with a shared layoutId.
Toggle switch
Layout animates the knob, color crossfades the track.