Solid MotionOne

The Motion component is the primary way to create animatable elements. You can use it as a wrapper for content, or use specific element types like <Motion.div>, <Motion.button>, or the generic <Motion tag="button"> to render specific HTML or SVG elements.

import {Motion} from "solid-motionone"

// As a wrapper
function MyComponent() {
  return <Motion>Hello world</Motion>
}

// As a specific HTML element
function App() {
  return (
    <Motion.div
      animate={{opacity: [0, 1]}}
      transition={{duration: 1, easing: "ease-in-out"}}
    />
  )
}

// Using the tag prop
<Motion tag="button" />

You can install solid-motionone using npm, pnpm, or yarn.

npm install solid-motionone
# or
pnpm add solid-motionone
# or
yarn add solid-motionone

To make animations react to state changes, pass Solid signals directly into the animate object. Note that animate does not accept accessor functions; instead, place the signal call (e.g., bg()) directly in the object to leverage Solid's reactivity.

const [bg, setBg] = createSignal("red")

return (
  <Motion.button
    onClick={() => setBg("blue")}
    animate={{backgroundColor: bg()}}
    transition={{duration: 3}}
  >
    Click Me
  </Motion.button>
)

Instead of using a generic component, solid-motionone provides a Motion proxy that lets you specify the HTML or SVG tag directly on the component name. This makes the code more semantic and easier to read.

Commonly used tags include:

• <Motion.div />
• <Motion.span />
• <Motion.button />
• <Motion.svg />
• <Motion.path />

import { Motion } from 'solid-motionone';

function MyComponent() {
  return (
    <Motion.section initial={{ y: 20 }} animate={{ y: 0 }}>
      <Motion.h1 animate={{ color: 'red' }}>Hello</Motion.h1>
    </Motion.section>
  );
}

Use the transition prop to control the animation behavior. You can apply global transition settings to all properties, or override settings for specific properties by providing an object where keys match the property names in animate.

// Global transition
<Motion
  animate={{rotate: 90, backgroundColor: "yellow"}}
  transition={{duration: 1, easing: "ease-in-out"}}
/>

// Per-value override
<Motion
  animate={{rotate: 90, backgroundColor: "yellow"}}
  transition={{
    duration: 1,
    rotate: {duration: 2},
  }}
/>

You can define a sequence of values for a property by passing an array to the animate object. By default, these keyframes are spaced evenly across the duration. To control the timing of specific keyframes, use the offset property within the transition object for that specific property.

// Evenly spaced keyframes
<Motion animate={{x: [0, 100, 50]}} />

// Keyframes with custom progress offsets
<Motion 
  animate={{x: [0, 100, 50]}} 
  transition={{x: {offset: [0, 0.25, 1]}}} 
/>

By default, elements automatically animate to the values defined in animate when they are created. To prevent this animation and apply the animate styles immediately upon creation, set the initial prop to false.

<Motion initial={false} animate={{x: 100}} />

The motion directive is available for use within SolidJS elements. It accepts motionone.Options as its configuration, allowing you to apply animations directly via the use:motion syntax.

// Using the motion directive on a standard element
<div use:motion={{ animate: { opacity: 1 } }} />