FAQs
Browser support?
Motion One supports all modern browsers. It doesn't support Internet Explorer 11 or below.
Rather than including a polyfill with a large filesize, Motion One currently uses a progressive enhancement strategy where in older browsers unsupported values will be changed 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 values like fill and stroke-dashoffset.
It supports animating CSS variables in browsers that support the CSS Properties and Values API.
Additionally, you can animate individual transforms like x, y etc:
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.
scale: 0in Safari
There's a bug in older versions of Safari where animating to scale(0) completes instantly.
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.
Should I use Framer Motion or Motion One?
Both animation libraries share an author so there's often confusion about which to use. There's an in-depth article on this. But the bottom line is Framer Motion generally has better performance and can animate more things than Motion One, but the downside is that its animate() function .is around 17kb whereas Motion One is around 3.5kb.