Utilities

Solid's framework philosophy is based on composability and the power of primitives. The following primitive and directive extend Motion One to make it more flexible within Solid.

Import createMotion from "@motionone/solid" and define it in your component. It accepts all the options that Motion One provides.

import { Component, onMount } from "solid-js";
import { createMotion } from "@motionone/solid";

const App: Component = () => {
  let ref!: HTMLDivElement;
  onMount(() => {
    createMotion(ref, {
      animate: { opacity: [0, 1] },
      transition: { duration: 1, easing: "ease-in-out" }
    });
  });
  return <div ref={ref} />;
};
  
export default App;

The primitive is typically used where your focus is performance and bundle size.

A directive is a handy feature that lets you bind motion to a DOM element with the use attribute. They are very lightweight, terse and easy to use. ie:

<div use:motion={{ animate: { opacity: [0, 1] } }} />

The properties provided to a directive reflect standard Motion One options to specify the animation control.

import { Component } from "solid-js";
import { spring } from "motion";
import { motion } from "@motionone/solid";

const App: Component = () => (
  <div
    use:motion={{
      animate: {
        rotate: 90,
        scale: 1.5,
        "background-color": 'purple'
      },
      transition: {
        delay: 1,
        easing: spring()
      }
    }}
  />
);
  
export default App;

motion;

Both directive and primitive uses also work with the <Presence> component:

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()}>
          <div
            use:motion={{
              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;
motion;

Note: Directives are not completely compatible with SSR given how they operate. To ensure that initial properties are set you should use style to help assert the initial properties as the SSR process runs. Components are likely better options for SSR use.

Contents

Primitive

Directive