Docs/Guides/Getting started

Getting started

motion-solidjs brings the Motion API to SolidJS: motion.div, AnimatePresence, variants, gestures, and Solid-native primitives such as createMotionValue, createTransform, and createSpring.

Install

pnpm add motion-solidjs

motion-solidjs ships compiled output, so vite-plugin-solid does not need to process the package again. Install it like a normal dependency in Solid 1.x or 2.x projects.

Hello, motion

import { motion } from 'motion-solidjs'

export function App() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      whileHover={{ scale: 1.05 }}
      transition={{ type: 'spring', stiffness: 320, damping: 18 }}
    />
  )
}
whileHover
hover.tsxOpen ↗
import { motion } from 'motion-solidjs'

export const meta = {
  slug: 'hover',
  title: 'Hover',
  category: 'gestures',
  description: 'whileHover springs the box up and changes its background.',
  tag: 'whileHover',
} as const

export default function Hover() {
  return (
    <motion.div
      class="h-20 w-20 rounded-2xl bg-grad-violet shadow-glow"
      whileHover={{ y: -10, scale: 1.08, rotate: -4 }}
      transition={{ type: 'spring', stiffness: 320, damping: 14 }}
    />
  )
}

What to read next