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.
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
Additionally, you can animate CSS variables and individual transforms like
There are a couple reasons an animation might appear to finish instantly.
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.
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.
A couple reasons.
This is my side project so the sponsorship 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.
In the future I might open access to the repo and find a different perk for sponsors. But in this early stage I want to be able to provide access to the library to everyone while also ensuring sponsors get something in addition.
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.
Stay updated with the Motion One newsletter. We don't spam, and unsubscription is instant.