Motion

Renders an animatable HTML or SVG element.

<Motion animate={{ opacity: 1 }} />

Usage

Import Motion from "@motionone/solid" and register it with your component.

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

const App: Component = () => (
  <Motion.div
    animate={{ opacity: [0, 1] }}
    transition={{ duration: 1, easing: "ease-in-out" }}
  />
);
  
export default App;

Motion accepts an animate prop. You may specify the type of element to animate with a dot ie <Motion.button>. All HTML and SVG element types are supported.

Add the following to the editable example above:

<Motion animate={{ rotate: 45, "background-color": "var(--red)" }} />

The animate prop accepts all the same values and keyframes as Motion One's animate function.

Transition settings

We can change the type of animation used by passing a transition prop.

<Motion
  animate={{ rotate: 90, "background-color": "var(--yellow)" }}
  transition={{ duration: 1, easing: "ease-out" }}
/>

By default transition options are applied to all values, but we can also override on a per-value basis:

<Motion
  animate={{ rotate: 90, "background-color": "var(--yellow)" }}
  transition={{
    duration: 1,
    x: { duration: 2 },
  }}
/>

All the same transition options from Motion One's animate function are accepted. You can even import custom easing from Motion One, like spring:

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

const App: Component = () => (
  <Motion.div
    animate={{
      rotate: 90,
      "background-color": 'yellow'
    }}
    transition={{
      delay: 1,
      easing: spring()
    }}
  />
);
  
export default App;

Props

animate

A target of values to animate to.

<Motion animate={{ "background-color": "white" }} />

Whenever a value in animate changes, the element will automatically animate to the latest value.

The animate prop accepts all the same values and keyframes as Motion One's animate function.

initial

A target of values to animate from when the element is first rendered.

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

If set to false, the target defined in animate will be immediately set when the element is first rendered. Only subsequent changes to animate will animate.

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

exit

A target of values to animate to when the element is hidden via <Show> Solid built-in component.

The element must be a direct child of 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()}>
          <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;

The exit prop accepts all the same values and keyframes as Motion One's animate function.

hover

A target of values to animate from when the element receives a hover event.

<Motion hover={{ scale: 1.2 }} />

press

A target of values to animate from when the element is pressed.

<Motion press={{ scale: 0.9 }} />

transition

Provides a default transition for all animations to use.

<Motion animate={{ x: 100 }} transition={{ duration: 0.5 }} />

Supports all animate options.

The transition defined in this prop can be overridden for specific animation props by passing those a transition option:

<Motion
  animate={{ x: 100, transition: { duration: 0.2 } }}
  exit={{ x: 0, transition: { duration: 1 } }}
  transition={{ duration: 0.5 }}
/>

Events

The Motion components emit custom DOM events to the rendered element. The detail prop is provided data on the related animation.

import { Compoennt } from "solid-js";
import { Motion } from "@motionone/solid";

const App: Component = () => (
  <Motion.div
    animate={{ opacity: [0, 1] }}
    onMotionStart={({ detail }) => console.log("Start: ", detail)}
    onMotionComplete={({ detail }) => console.log("Start: ", detail)}
  />
);
  
export default App;

onMotionStart

Fires when any animation is started.

onMotionComplete

Fires when any animation is completed.

onHoverStart

Fires when the element is being hovered over.

onHoverEnd

Fires when the element hover has ended.

onPressStart

Fires when the element is pressed down.

onPressEnd

Fire when the element is released when pressed.

onViewEnter

Triggers when the item is in the viewport.

onViewLeave

Triggers when the item is out of the viewport.

Did you know?

There's an incredible new set of developer tools for Chrome that let you inspect, edit and export Motion One and CSS animations.