Contents
Introduction
Motion One for Solid is a 5.8kb animation library for SolidJS. It takes advantage of Solid's excellent performance and simple declarative syntax. This package supplies springs, independent transforms, and hardware accelerated animations.
By the end of this quick guide, you'll have installed Motion One for Solid and created your first animation.
Install
Motion One for Solid can be installed via npm:
npm install @motionone/solid
Alternatively, all the examples on this page are editable, so you can play around with them in-browser and fork them to CodeSandbox.
Create an animation
Import the Motion
component and use it anywhere in your Solid components:
import { Component } from "solid-js" import { Motion } from "motion/solid" export const MyComponent: Component = () => { return <Motion>Hello world</Motion> }
The Motion
component can be used to create an animatable HTML or SVG element. By default, it will render a div
element:
But any HTML or SVG element can be rendered, by defining it like this: <Motion.button>
Edit the above example by adding an animate
prop:
<Motion animate={{ rotate: 90, backgroundColor: "yellow" }} />
Every time a value in animate
changes, perhaps from component data or props, the component will automatically animate to the latest values.
Transition options
We can change the type of animation used by passing a transition
prop.
<Motion animate={{ rotate: 90, backgroundColor: "yellow" }} transition={{ duration: 1, easing: "ease-in-out" }} />
By default transition options are applied to all values, but we can also override on a per-value basis:
<Motion animate={{ rotate: 90, backgroundColor: "yellow" }} transition={{ duration: 1, rotate: { duration: 2 }, }} />
Taking advantage of Solid's reactivity is just as easy. Simply provide any of the Motion properties as accessors to have them change reactively:
const [bg, setBg] = createSignal("red") return ( <Motion.button onClick={() => setBg("blue")} animate={{ backgroundColor: bg(), }} transition={{ duration: 3, }} > Click Me </Motion.button> )
The result is a button that begins red and upon being pressed transitions to blue. animate
doesn't accept an accessor function. For reactive properties simply place signals in the object similar to using style prop.
Keyframes
Values can also be set as arrays, to define a series of keyframes.
<Motion animate={{ x: [0, 100, 50] }} />
By default, keyframes are spaced evenly throughout duration
, but this can be adjusted by providing progress values to offset
:
<Motion animate={{ x: [0, 100, 50] }} transition={{ x: { offset: [0, 0.25, 1] } }} />
Enter animations
Elements will automatically animate to the values defined in animate
when they're created.
This can be disabled by setting the initial
prop to false
. The styles defined in animate
will be applied immediately when the element is first created.
<Motion initial={false} animate={{ x: 100 }} />
Exit animations
When an element is removed with <Show>
it can be animated out with the Presence
component and the exit
prop:
import { Component, createSignal, Show } from "solid-js"; import { Motion, Presence } from "@motionone/solid"; const App: Component = () => { const [toggle, setToggle] = createSignal(true); return ( <div class="container"> <Presence exitBeforeEnter> <Show when={toggle()}> <Motion.div initial={{ opacity: 0, scale: 0.6 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.6 }} transition={{ duration: 0.3 }} /> </Show> </Presence> <button onClick={() => setToggle(!toggle())}> Toggle </button> </div> ); }; export default App;
exit
can be provided a transition
of its own, that override the component's transition
:
<Presence> <Show when={toggle()}> <Motion animate={{ opacity: 1 }} exit={{ opacity: 0, transition: { duration: 0.8 } }} /> </Show> </Presence>
More to discover
This guide has covered the basics of animation in Motion One for Solid, but the Motion
and Presence
components offer more options to customise your animations.
For inspiration, check out our examples page.
MotionOne for Solid also comes with a directive and primitive. Have a look at the Utilities section for more info.
Have you seen Motion DevTools?
It's an incredible new developer tool for Chrome that let you inspect, edit and export Motion One and CSS animations. Animate like the good-ol' days of Flash!