Quick start

Introduction

Motion One is the smallest fully-featured animation library for the web.

It's built on the Web Animations API, so it can run some animations off the main JavaScript thread. These animations will remain smooth even while your website is busy rendering or processing.

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:

Alternatively, the examples on this page are editable, so you can play around with them live in-browser.

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 and stagger offer more options to customize your animations.

For even more complex animation sequences across multiple elements, check out the timeline function.

Stay updated with the Motion One newsletter. We don't spam, and unsubscription is instant.