Browser support?

Motion One supports all modern browsers. It doesn't support Internet Explorer 11 or below.

Additionally, it supports animating CSS variables in browsers that support the CSS Properties and Values API (currently Chrome and Edge). Rather than including a polyfill with a large filesize, Motion One currently uses a progressive enhancement strategy where in older browsers CSS variables will be animated with an instant transition.

What can I animate?

Motion One is built on top of the Web Animations API. As such, it's currently capable of animating CSS styles on HTML or SVG elements.

It can't currently animate SVG attributes like d, but many styling attributes can also be set via CSS, so you can animate things like fill and stroke-dashoffset.

Additionally, you can animate CSS variables and individual transforms like x, y etc:

animate(element, {
  x: 100,
  "--highlight-color": "#f00",

Why is my animation finishing instantly?

There are a couple reasons an animation might appear to finish instantly.

1. Your browser doesn't support CSS.registerProperty

If you're animating CSS variables and your browser doesn't support the CSS Properties and Values API, animations will finish instantly.

An optional polyfill may be offered in the future.

2. scale: 0 in Safari

There's a bug in many versions of Safari where animating to scale(0) completes instantly. This is fixed in the latest Safari betas, but if it's an issue you can animate to scale(0.0001) to fix.

Why do I have to be a Motion One Pro member to access the GitHub repo?

A couple reasons.

This is my side project so the membership helps the work be sustainable. By restricting access to the repo I can also ensure I'm targeting my free time supporting the users who are getting the most value from the project.

Why is motion already on version 10?

The motion package's version 10 is essentially Motion One's version 1. The package name was very kindly donated by Nate which was already on version 5, and I thought 10 would be a clear break from the previous resident.

Have you seen Motion DevTools?

It's an incredible new developer tool for Chrome that let you inspect, edit and export Motion One and CSS animations. Animate like the good-ol' days of Flash!