Beta Status

This library is still in early beta and the API is subject to change and may get daily breaking changes. If the docs and the package disagree, prefer the package and open an issue on GitHub or send a pull request with a fix.

Getting Started

motion-solid gives Solid apps Motion's animation, layout, presence, gesture, and drag APIs with Solid-native props.

Install

npm install motion-solid

yarn add motion-solid
pnpm add motion-solid
bun add motion-solid

First Component

import { motion } from "motion-solid";

function App() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 16 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.25 }}
    />
  );
}
Basic Motion

Core Props

  • initial: target object | variant label | string[] | false. Starting state.
  • animate: target object | variant label | string[]. Target state.
  • exit: target object | variant label | string[]. Exit state. Use inside AnimatePresence.
  • transition: Transition. Timing, easing, spring, and keyframe config.
  • style: MotionStyle. Regular styles plus animated values.

Notes

  • motion.div, motion.button, motion.svg, and the rest of the HTML/SVG tags are available from the motion proxy.
  • motion.create(Component, options) wraps custom components. Layout-capable custom components must forward ref to one DOM or SVG host node.
  • Public transform and style keys are kebab-case first: scale-x, rotate-y, transform-perspective, origin-x.
  • AnimatePresence defaults to mode="popLayout" in motion-solid.
  • Server and client render the same intrinsic host shape for built-in motion.* elements.

Pages