Renders an animatable HTML or SVG element.
<Motion animate={{ opacity: 1 }} />
Usage
Import Motion
from "@motionone/solid"
and register it with your component.
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
:
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.
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!