Contents
Introduction
Motion One for Vue is a 5kb animation library for Vue 3. Built on Motion One, it's capable of springs, independent transforms, and hardware accelerated animations.
By the end of this quick guide, you'll have installed Motion One for Vue and created your first animation.
Install
Motion One can be installed via npm:
npm install motion
Alternatively, all the examples on this page are editable, so you can play around with them in-browser and fork them to CodeSandbox.
Create an animation
Import the Motion
component and register it in your Vue component:
import { Motion } from "motion/vue" export default { components: { Motion }, }
The Motion
component can be used to create an animatable HTML or SVG element. By default, it will render a div
element:
Edit the above example by adding an animate
prop:
<Motion :animate="{ rotate: 90, backgroundColor: 'var(--yellow)' }" />
Every time a value in animate
changes, perhaps from component data or props, the component will automatically animate to the latest values.
Transition options
We can change the type of animation used by passing a transition
prop.
<Motion :animate="{ rotate: 90, backgroundColor: 'var(--yellow)' }" :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:
<Motion :animate="{ rotate: 90, backgroundColor: 'var(--yellow)' }" :transition="{ duration: 1, rotate: { duration: 2 }, }" />
Keyframes
Values can also be set as arrays, to define a series of keyframes.
<Motion :animate="{ x: [0, 100, 50] }" />
By default, keyframes are spaced evenly throughout duration
, but this can be adjusted by providing progress values to offset
:
<Motion :animate="{ x: [0, 100, 50] }" :transition="{ x: { offset: [0, 0.25, 1] } }" />
Enter animations
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.
<Motion :initial="false" :animate="{ x: 100 }" />
Exit animations
When an element is removed with v-show
or v-if
it can be animated out with the Presence
component and the exit
prop:
<template> <div class="container"> <Presence> <Motion v-show="show" :initial="{ opacity: 0, scale: 0 }" :animate="{ opacity: 1, scale: 1 }" :exit="{ opacity: 0, scale: 0.6 }" class="box" /> </Presence> <button @click="show = !show"> Toggle </button> </div> </template> <script> import { Motion, Presence } from "motion/vue" export default { components: { Motion, Presence }, data() { return { show: true } } } </script> <style> .container { width: 100px; height: 150px; display: flex; flex-direction: column; justify-content: flex-end; } .container button { cursor: pointer; } .box { width: 100px; height: 100px; border-radius: 10px; background-color: var(--splash); } </style>
exit
can be provided a transition
of its own, that override the component's transition
:
<Motion v-show="isVisible" :animate="{ opacity: 1 }" :exit="{ opacity: 0, transition: { duration: 0.8 } }" :transition="transition" />
More to discover
This guide has covered the basics of animation in Motion One for Vue, but the Motion
and Presence
components offer more options to customise your animations.
For inspiration, check out our examples page.
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!