@kitlangton/solid-motion

Motion for SolidJS. The same animation engine, springs and gestures, with a motion.* API that uses Solid's fine-grained reactivity.

npm install @kitlangton/solid-motion solid-js

import { motion } from "@kitlangton/solid-motion"

<motion.button
  animate={{ scale: active() ? 1.1 : 1 }}
  whileHover={{ y: -2 }}
  whileTap={{ scale: 0.95 }}
  transition={{ type: "spring", visualDuration: 0.22, bounce: 0.1 }}
/>

Presence

Keep AnimatePresence mounted and pass a child factory, so the exiting element can be retained until its exit animation finishes:

<AnimatePresence when={open()}>
  {() => <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} />}
</AnimatePresence>

// Switch between keyed children
<AnimatePresence when={true} presenceKey={tab()}>
  {() => <motion.div exit={{ opacity: 0 }}>{tab()}</motion.div>}
</AnimatePresence>

Gestures and drag

whileHover, whileTap, whileFocus, whileDrag, drag, dragConstraints (box or { current: element }), dragElastic, dragMomentum and onDragEnd(event, { offset, velocity }) follow Motion's semantics.

Motion values

useMotionValue, useTransform, useSpring, useVelocity, useMotionValueEvent, animate, and useReducedMotion (returns an accessor). Motion values update the DOM directly without re-running components.

Notes

• As in Motion for React, visualDuration takes effect only alongside bounce (use bounce: 0 for no overshoot; negative values overdamp).
• Layout animations (layout, layoutId) are not implemented yet.
• Built on motion-dom@14. Gesture implementations are adapted from [email protected] (MIT).