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.

npm install motion

Then imported:

import { animate, scroll } from "motion"

CDN

Its also possible to import straight from a CDN, without installation.

import { animate, scroll } from "https://cdn.jsdelivr.net/npm/motion@11.11.13/+esm"

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.

<script src="https://cdn.jsdelivr.net/npm/motion@11.11.13/dist/motion.js"></script>
<script>
  const { animate, scroll } = Motion
</script>

Create an animation

Import the animate function.

import { animate } from "motion"

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

animate(".box", { opacity: 1 })

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

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

animate(boxes, { opacity: 1 })

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:

animate(
  cube.rotation,
  { y: rad(360), z: rad(360) },
  { duration: 10, repeat: Infinity, ease: "linear" }
)

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.

animate(
  element,
  { scale: [0.4, 1] },
  { ease: "circInOut", duration: 1.2 }
);

Alternatively, we can use spring animations for a natural, kinetic feeling.

animate(
  element,
  { rotate: 90 },
  { type: "spring", stiffness: 300 }
);

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:

import { animate, stagger } from "motion"

animate(
  "li",
  { y: 0, opacity: 1 },
  { delay: stagger(0.1) }
)

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.