4 ms·
Motion One: The Web Animations API for Everyone
- SirHound 5y agoHi HN! I'm Matt, author of Framer Motion and Popmotion. Today I'm launching my side-project, Motion One. It's a new animation library built on the Web Animations API (WAAPI). I actually started this project as a book, but repeatedly found myself explaining some odd concepts (like fill mode) that I felt quite strongly that users shouldn't have to care about. I also discovered the state of WAAPI's implementation is very inconsistent across browsers despite green lights across caniuse [1]. Motion One makes WAAPI easier to use by presenting it with a simple API that also smoothes over browser inconsistencies [2]. It also adds all the features you'd expect from a modern JS animation library, like timelines, independent transform animations, and soon, springs. Being built on WAAPI, it can create hardware accelerated animations. And it does all this in a bundlesize that is half that of Anime.js and less than a fifth of Greensock [3]. Feedback, questions and suggestions are welcome! [1] [https://caniuse.com/web-animation](https://caniuse.com/web-animation) https://caniuse.com/web-animation](https://caniuse.com/web-a... [2] [https://motion.dev/guides/waapi-improvements](https://motion.dev/guides/waapi-improvements) https://motion.dev/guides/waapi-improvements](https://motion... [3] [https://motion.dev/guides/feature-comparison](https://motion.dev/guides/feature-comparison) https://motion.dev/guides/feature-comparison](https://motion... Edit: Just seen I was jumped the gun on my own Show HN by bpierre :)
- malobre 5y agoThe landing page looks amazing!
- XCSme 5y ago> Likewise, browsers are adding clipPath to the compositor. So instead of animating borderRadius, animate clipPath with the inset function. If the fix is so easy, why wouldn't browsers implement borderRadius using clip-path behind the scenes? Does it lead to different results in any case?