Quick start
Motion One is the smallest fully-featured animation library for the web.
It can animate HTML or SVG elements using the Web Animations API, which means some animations can run off the main thread. These animations will remain smooth, even while your website is busy rendering or processing.
Additionally, it can animate anything by passing it a custom function, like innerText
or Three.js.
By the end of this quick guide, you'll have installed Motion One and created your first animation.
Install
Motion One can be installed via npm:
Create an animation
Import the animate
function.
animate
can animate one or more HTML/SVG elements. These elements can be provided either as a CSS selector:
Or provided directly, as an element or array of elements:
Animatable values
animate
is used to animate any CSS style from its current value to those provided:
Additionally, it can also be used to animate individual transforms:
Options
Options are passed as animate
's last argument. They can be used to change most things about the animation, like duration
, delay
and easing
:
Keyframes
Values can also be set as arrays, to define a series of keyframes.
By default, keyframes are spaced evenly throughout `duration
`, but this can be adjusted by providing progress values to `offset`:
Stagger
When animating multiple elements, it can feel more natural or lively to offset the animations of each.
Motion One provides a stagger
function that can be used to dynamically set delay
. First, import it:
Then set delay
to stagger(offset)
:
More to discover
This guide has covered the basics of animation in Motion One, but animate
, stagger
, and spring
offer even more options to customise your animation.
For complex animation sequences across multiple elements, check out the timeline
function.
If you want to know more about how Motion One stacks up against other animation libraries in terms of features and bundlesize, take a look at the feature guide.