A tiny, performant animation library for SolidJS
npm install solid-motionone



A tiny, performant animation library for SolidJS. Powered by Motion One.
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.
Motion One for Solid can be installed via npm:
``bash`
npm install solid-motiononeor
pnpm add solid-motiononeor
yarn add solid-motionone
Import the Motion component and use it anywhere in your Solid components:
`tsx
import {Motion} from "solid-motionone"
function MyComponent() {
return
}
`
The Motion component can be used to create an animatable HTML or SVG element. By default, it will render a div element:
`tsx
import {Motion} from "solid-motionone"
function App() {
return (
transition={{duration: 1, easing: "ease-in-out"}}
/>
)
}
`
But any HTML or SVG element can be rendered, by defining it like this:
Or like this:
We can change the type of animation used by passing a transition prop.
`tsx`
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:
`tsx`
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:
`tsx
const [bg, setBg] = createSignal("red")
return (
animate={{backgroundColor: bg()}}
transition={{duration: 3}}
>
Click Me
)
`
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.
Values can also be set as arrays, to define a series of keyframes.
`tsx`
By default, keyframes are spaced evenly throughout duration, but this can be adjusted by providing progress values to offset:
`tsx`
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.
`tsx`
When an element is removed with it can be animated out with the Presence component and the exit prop:
`tsx
import {createSignal, Show} from "solid-js"
import {Motion, Presence} from "solid-motionone"
function App() {
const [isShown, setShow] = createSignal(true)
return (
exit can be provided a transition of its own, that override the component's transition:`tsx
animate={{opacity: 1}}
exit={{opacity: 0, transition: {duration: 0.8}}}
/>
``