Beta Status

This library is still in early beta and the API is subject to change and may get daily breaking changes. The documentaton may not be up to date with the latest features and include missing or outdated information. You can always create an issue on GitHub or even better a pull request to fix the documentation or add new features.

Getting Started

motion-solid is a SolidJS animation library built on Motion. It provides declarative animations, gestures, drag, and layout animations with a Solid-native API.

Features

  • Declarative animations - Define animations with initial, animate, and exit props
  • Variants - Name and orchestrate complex animation sequences
  • Gestures - Hover, tap, focus, and viewport-triggered animations
  • Drag - Built-in draggable elements with constraints and momentum
  • Layout animations - Smoothly animate elements when they move or resize
  • Exit animations - Animate elements out when they leave the tree
  • SSR-ready - Server-side rendering with correct initial styles

Installation

# npm
npm install motion-solid

# yarn
yarn add motion-solid

# pnpm
pnpm add motion-solid

# bun
bun add motion-solid

Quick Start

Import the motion proxy and use motion.div, motion.button, etc:

import { motion } from "motion-solid";

function App() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.9 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.3 }}
    >
      Hello, motion!
    </motion.div>
  );
}

Key Concepts

Animation Props

  • initial - Starting state (or false to skip)
  • animate - Target state to animate to
  • exit - State to animate to when leaving (requires AnimatePresence)
  • transition - How to animate (spring, tween, keyframes)

Style Keys

Use kebab-case for transform properties to match Solid conventions:

<motion.div animate={{ "scale-x": 1.2, "rotate-y": 45 }} />

Supported transform keys include: x, y, z, scale, scale-x, scale-y, rotate, rotate-x, rotate-y, rotate-z, skew-x, skew-y, transform-perspective, origin-x, origin-y, origin-z.

Reactivity

Animation values can be reactive:

const [isOpen, setIsOpen] = createSignal(false);

<motion.div
  animate={{ height: isOpen() ? 200 : 0 }}
  transition={{ type: "spring" }}
/>;

Exit Animations

Wrap with AnimatePresence to enable exit animations:

import { AnimatePresence, motion } from "motion-solid";
import { Show } from "solid-js";

function Modal() {
  const [open, setOpen] = createSignal(true);

  return (
    <AnimatePresence>
      <Show when={open()}>
        <motion.div
          initial={{ opacity: 0, scale: 0.95 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={{ opacity: 0, scale: 0.95 }}
        >
          Modal content
        </motion.div>
      </Show>
    </AnimatePresence>
  );
}

Server-Side Rendering

Motion components render deterministically on the server. They use initial styles when provided, or animate styles if initial is false or undefined.

// Server renders with translateX(100px)
<motion.div initial={false} animate={{ x: 100 }} />

// Server renders with opacity: 0; transform: scale(0);
<motion.div
  initial={{ opacity: 0, scale: 0 }}
  animate={{ opacity: 1, scale: 1 }}
/>

Next Steps