Quick start
Motion is an animation library that's easy to start and fun to master.
Its unique hybrid engine combines the hardware accelerated performance of browser APIs with the limitless potential of a JavaScript engine. This means you can animate anything, from HTML/SVG elements to WebGL.
It's also tiny, with a mini version of the animate()
function that's just 2.5kb!
By the end of this quick guide, you'll have installed Motion and made your first animation.
Install
npm
Motion can be installed via the "motion"
package.
Then imported:
CDN
Its also possible to import straight from a CDN, without installation.
Or add Motion
as a global variable via a script
tag. This is useful when adding Motion to a plain HTML file or to a Webflow project.
Create an animation
animate
can animate one or more elements. These can be provided either as a CSS selector:
Or provided directly, as an element or array of elements:
What can be animated?
animate
can animate any HTML/SVG style. When a value can be hardware accelerated, like opacity
, filter
or transform
, it will be.
Additionally, it can animate:
Independent transforms (
x
,rotateY
etc)CSS variables in all browsers
SVG paths
Complex strings like gradients
And much more besides.
animate
isn't limited to HTML. It can animate single values or any kind of object. For example, the rotation of a Three.js object:
Customising animations
Motion has sensible defaults for animations to look and feel great, but offers options for customising them. Values like duration
, delay
, ease
and repeat
can drastically change each animation.
Alternatively, we can use spring animations for a natural, kinetic feeling.
Stagger
When animating multiple elements, it can feel more natural or lively to offset the animations of each.
Motion provides a stagger
function that can be used to dynamically set delay
:
More to discover
In this quick guide we installed Motion and took the briefest of looks at the animate
function. animate
has plenty more surprises, like keyframes, controls, timeline sequencing and more.
You should also check out scroll-linked animations with the scroll
function, and scroll-triggered animations with the inView
function.
If you want to know more about how Motion stacks up against other animation libraries in terms of features and bundlesize, take a look at the feature guide.