Documentation
Motion Solid
A Solid-native port of Motion that keeps the Motion React API while adding fine-grained primitives — createMotionValue, createTransform, createSpring, and friends. Every public API has its own page below with a live example.
Guides
6 APIsGetting startedInstall motion-solidjs and animate your first element.VariantsName your animation states, switch by string, and orchestrate the whole subtree.Layout animationsAnimate any layout change automatically with layout and layoutId.DragMake any motion element draggable, then constrain, snap, control or reorder.GestureswhileHover, whileTap, whileFocus, and whileInView gesture variants.SSR & hydrationHow motion-solidjs handles server rendering and what to watch for.
Components
8 APIsmotionThe animated DOM component. Pass animation props directly on any HTML or SVG element.mTree-shakeable sibling of motion.* for LazyMotion feature loading.AnimatePresenceAnimate elements as they are removed from the tree.LayoutGroupCoordinate layout and layoutId animations across sibling components.LazyMotionLoad animation features on demand so route bundles stay small.MotionConfigProvide a default transition and reduced-motion behavior to a subtree.ReorderDrag-to-reorder list with built-in layout animations.RowValueRender a MotionValue's current value as text without a manual subscription.
Primitives
24 APIsuseMotionApply motion props to any element without using a motion.* wrapper.createAnimateImperative animation scoped to a ref, usually called from a handler or effect.createAnimateMiniMinimal sibling of createAnimate. It keeps only the WAAPI subset for smaller bundles.createAnimationFrameSubscribe a callback to motion's shared animation-frame loop.createCombinedMotionValueLow-level: derive a MotionValue from a computation and explicitly subscribe its sources.createComputedRead multiple motion values inside a getter and expose the result as a new motion value.createCycleA small state primitive that cycles through a fixed list of values.createDragControlsStart a drag programmatically when the handle is separate from the draggable element.createFollowValueA motion value that follows another with configurable latency.createInViewTrack whether an element is inside the viewport or a custom root.createInstantLayoutTransitionWrap a synchronous update so layout snapshots are measured without playing a visible transition.createLayoutGroupPrimitives behind <LayoutGroup>: read the surrounding group or provide one manually.createMotionTemplateA tagged template that interpolates motion values into a single derived string value.createMotionValueA reactive value type that can update outside Solid's signal graph.createMotionValueEventSubscribe to lifecycle events on a motion value: change, animationStart, animationComplete, or animationCancel.createMotionValueSignalMirror a MotionValue into a Solid signal for use in tracked scopes.createReducedMotionA boolean accessor that reflects the user's prefers-reduced-motion setting.createReducedMotionConfigRead the effective reduced-motion preference, factoring in MotionConfig's override.createScrollTrack the scroll progress of the page, a container, or a target element.createSpringSmooth a motion value or static value with a spring.createTimeA motion value that ticks with the document timeline.createTransformDerive a new motion value by mapping another through a function or an input/output range.createVelocityA motion value tracking the instantaneous velocity of another.usePresenceRead and coordinate presence state inside an AnimatePresence child.
Functions
9 APIsanimateImperatively animate elements, values, or generators. This is the standalone counterpart to motion.*.MotionGlobalConfigSet app-wide knobs (reduced motion, instant animations, frame rate) without wrapping anything in a provider.arcA transition.path generator that curves between keyframes instead of moving in a straight line.delayA cancellable timeout scheduled on motion's shared frame loop.inViewImperative IntersectionObserver wrapper for enter and leave callbacks.scrollImperative scroll-linked animation driven by a callback or animation controls.springA pure spring generator for animate() and transition.path-style use cases.staggerGenerate a per-index delay function for transition.delay or createAnimate selectors.wrapWrap a number around a min/max range for repeating animations.
47 APIs documented · Looking for a runnable demo? Browse examples →