animate()
The imperative animate() function — drive a DOM element from a click handler.
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.
Animations
transitions, keyframes, springsAnimate 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.