Motion
The Motion component is a foundational DOM primitive that provides declarative animation capabilities.
The Motion
component is the primary building block for animations in Motion for Vue. It can be rendered as any HTML or SVG element by using the as prop, such as <Motion as="div"/>
or <Motion as="circle"/>
. Alternatively, you can pass asChild
to render a child component directly.
Import
Basic Usage
Keyframes
Set a value as an array and Motion will animate through each of these values in turn.
By default, each keyframe will be spaced evenly throughout the animation, but the exact timing and easing can be configured via the transition property.
Variants
Variants are pre-defined visual states that a component can be in. By giving a component and its children variants
with matching names, whole Vue trees can be animated by changing a single prop.
Gestures Animation
Motion provides hover
, press
helper props, that will temporarily animate a component to a visual state while a gesture is active.
Like animate
, these can either be set as an object of properties (each with their own transition prop), or the name of a variant.
InView
The inView
prop to set a component to animate when it enters the viewport.
Props
initial
The initial visual state of the Motion
component.
This can be set as an animation target:
or set a string to target a variant:
or set
false
to disable the initial animation:
animate
the animate
prop is used to set the animation target. When the component is mounted or the animate prop is updated, it will animate to the animate target.
or set a string to target a variant:
custom
The custom
prop is used to pass through to dynamic variants.
transition
The transition
prop is used to set the transition of the animation.
inViewOptions
The inViewOptions
prop is used to set the options for the inView
prop.
margin
Default: 0
The margin
option allows you to set the margin
around the component that should be in view for the animation to trigger.
once
Default: false
The once
option allows you to set the animation to trigger only once when the component enters the viewport.
root
The root
option allows you to set the root element that the inView animation should be relative to.
amount
Default: some
The amount
option allows you to set the amount
of the component that should be in view for the animation to trigger.
You can set the amount
to all, which means the animation will trigger when the entire component is in view.
or you can set a number, which means the animation will trigger when the component is in view by the amount
of the component that is in view.
as
The as
prop allows you to set the HTML or SVG element that the Motion
component should be rendered as.
asChild
The asChild
prop allows you to render a child component directly.
if you use asChild
,and the ChildComponent
's root dom is SVGElement
, you should set the as
prop to determine the dom element type.