Quick start

Contents

  1. Introduction
  2. Install
  3. Create an animation
  4. More to discover

Introduction

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:

npm install motion

Alternatively, all examples on the site are editable, so you can play with them live in-browser. You can also click on the fork button to make a fork on CodeSandbox.

Create an animation

Import the animate function:

import { animate } from "motion"

animate can animate one or more HTML/SVG elements. These elements can be provided either as a CSS selector:

animate(".box", { backgroundColor: "red" })

Or provided directly, as an element or array of elements:

const boxes = document.querySelectorAll(".box")

animate(boxes, { backgroundColor: "red" })

Animatable values

animate is used to animate any CSS style from its current value to those provided:

import { animate } from "motion"
  
animate(
  "#box",
  { transform: "rotate(45deg)" },
  { duration: 0.5 }
)

Additionally, it can also be used to animate individual transforms:

import { animate } from "motion"
  
animate(
  "#box",
  { x: 100, rotate: 45 },
  { duration: 0.5 }
)

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:

import { animate } from "motion"
  
animate(
  "#box",
  { rotate: 90 },
  {
    duration: 0.5,
    easing: "ease-in-out",
    repeat: 3,
    direction: "alternate"
  }
)

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:

import { animate } from "motion"
  
animate(
  "#box",
  { x: [0, -100, 100, 0] },
  {
    duration: 2,
    offset: [0, 0.25, 0.75]
  }
)

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:

import { animate, stagger } from "motion"

Then set delay to stagger(offset):

import { animate, stagger } from "motion"
  
animate(
  ".box",
  { x: 200 },
  {
    delay: stagger(0.1),
    duration: 0.5,
    easing: [.22, .03, .26, 1]
  }
)

More to discover

This guide has covered the basics of animation in Motion One, but animate, stagger and spring offer more options to customize your animations.

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.