Docs/Components/motion

motion

Every HTML and SVG tag has a motion.* counterpart. These components accept normal element props plus animation props such as initial, animate, transition, whileHover, whileTap, whileInView, drag, layout, and variants.

import { motion } from 'motion-solidjs'

function Demo() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 10 }}
      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 }}
    />
  )
}

Props

motion accepts every HTML/SVG attribute plus motion-specific props:

initial - starting style; pass false to skip the mount animation
animate - target style or variant label
exit - style applied when leaving an <AnimatePresence> tree
transition - tween, spring, or inertia options
whileHover / whileTap / whileFocus / whileInView - gesture variants
drag - true, 'x', or 'y' to make the element draggable
layout / layoutId - opt into layout animations
variants - named variant map for parent-child orchestration

motion

Props

See also