Introduction
motion-solid (@motion-s/solid) is a port of Motion for React to Solid 2. It
uses the same animation engine, motion-dom, so animations, springs, gestures, exit and layout
animations behave the way they do in Motion for React. The API follows Solid's conventions:
class instead of className, ref callbacks, signals and accessors.
It's an unofficial port. It tracks motion/react v14 and targets Solid 2.0, which is currently a
release candidate.
Install
pnpm add @motion-s/solid solid-js@next @solidjs/web@nextSee Installation for other package managers and the entry points.
Animate on mount
Every HTML and SVG element has a motion counterpart, like motion.div or motion.circle. It
starts from initial and animates to animate when it mounts. When the values in animate
change, it animates to the new values.
Gestures
whileHover, whileTap, whileFocus, whileInView and whileDrag animate to their values while
the gesture is active, and back when it ends:
Exit animations
In Solid, Show and For add and remove elements. motion-solid exports its own Show and For
with the same props. Inside AnimatePresence, they keep a removed element in the document until
its exit animation has finished:
Where to go next
- Coming from React: what's different if you know Motion for React.
- motion: the props of motion components.
- Animation and Transitions: targets, keyframes, variants and how values move.
- Gestures and Drag.
- AnimatePresence: exit animations.
- Layout animations: animate changes of size and position.
- Motion values: values that update the DOM without going through Solid.
- animate(): imperative animations and timelines.
- Server-side rendering.