Motion Component

The motion proxy gives every HTML and SVG element Motion props on top of native Solid props.

Create

import { motion } from "motion-solid";

<motion.div />
<motion.button />
<motion.svg />
<motion.path />

const Card = (props) => <div ref={props.ref} {...props} />;

const MotionCard = motion.create(Card, {
  forwardMotionProps: false,
  type: "html",
});

Props

• initial: target object | variant label | string[] | false. Initial state.
• animate: target object | variant label | string[] | animation controls. Active state.
• exit: target object | variant label | string[]. Exit state.
• transition: Transition. Timing and per-value transition config.
• variants: Record<string, variant>. Named states.
• custom: unknown. Payload for variant functions.
• inherit: boolean. Set false to stop parent variant inheritance.
• style: MotionStyle. Regular styles plus animated values.
• transformTemplate: (transform, generatedTransform) => string. Custom transform output.
• whileHover, whileTap, whileFocus, whileInView, whileDrag: target object | variant label | string[]. Temporary gesture states.
• drag: boolean | "x" | "y". Enables drag.
• layout: boolean | "position" | "size" | "preserve-aspect". Enables layout projection.
• layoutId: string. Shared-layout identity.
• layoutDependency: unknown. Forces a fresh layout measurement when related state changes elsewhere.
• layoutScroll: boolean. Marks a scroll container for projection.
• layoutRoot: boolean. Marks a projection root.
• layoutCrossfade: boolean. Controls shared-layout crossfade behavior.

Callbacks

• onUpdate: (latest) => void
• onAnimationStart: (definition) => void
• onAnimationComplete: (definition) => void
• onBeforeLayoutMeasure: (box) => void
• onLayoutMeasure: (box, prevBox) => void
• onLayoutAnimationStart: () => void
• onLayoutAnimationComplete: () => void

Example

<motion.div
  initial={{ opacity: 0, y: 16 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.25 }}
/>

Notes

• Use kebab-case transform and style keys: scale-x, rotate-y, background-color.
• CSS variables (--*) pass through unchanged.
• motion.create(Component) requires forwarding ref to one DOM or SVG host node.
• Under AnimatePresence, retained exit animations still fire onAnimationStart and onAnimationComplete on the exiting component.
• See Layout Animations, Variants, Gestures, and Drag for the feature-specific props.