Motion One is the smallest fully-featured animation library for the web.
By the end of this quick guide, you'll have installed Motion One and created your first animation.
Motion One can be installed via npm:
Alternatively, the examples on this page are editable, so you can play around with them live in-browser.
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:
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 are passed as
animate's last argument. They can be used to change most things about the animation, like
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
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:
For even more complex animation sequences across multiple elements, check out the
Stay updated with the Motion One newsletter. We don't spam, and unsubscription is instant.