4 ms·

Hi HN! I'm Matt, author of Framer Motion and Popmotion. Today I'm launching my new side-project, Motion One. It's a new animation library built on the Web Ani

Hi HN! I'm Matt, author of Framer Motion and Popmotion. Today I'm launching my new 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 smooths over these inconsistencies and adds an opinionated API that makes it easier to use [2]. In addition, it adds all the features you'd want from a modern animation library, like a timeline, independent transform animations, and soon, springs. Being built on WAAPI means you also get hardware accelerated animations in a bundlesize thats around half that of Anime.js and a fifth of Greensock [3]. Feedback and suggestions are welcome! [1] https://caniuse.com/web-animation https://caniuse.com/web-animation [2] https://motion.dev/guides/waapi-improvements https://motion.dev/guides/waapi-improvements [3] https://motion.dev/guides/feature-comparison https://motion.dev/guides/feature-comparison

lbotos 5y ago
You mention here and on the homepage you are the author of Framer Motion and Popmotion but in neither place are there links to those projects. I'd love to check them out so if they still exist it may be worth making that text on the homepage a link?
- hezag 5y ago
  1 - https://www.framer.com/motion/ https://www.framer.com/motion/ 2 - https://popmotion.io/ https://popmotion.io/
- oefrha 5y ago
  To be fair, Framer Motion and Popmotion are really big names in the web animation space, so it is probably safe to assume most people with even a passing interest in the past few years will have heard of them.
- SirHound 5y ago
  Ah apologises I just wanted to reduce the number of "off ramps" and as the other comment says, I am sort of assuming that people might be familiar with them but indeed they might be more fitting to your project (Popmotion if you want very low-level JS animations that just outputs values and Framer Motion if you want a high level React library that handles gestures and layout animations) But hezags comment below has kindly provided the links.
seph-reed 5y ago
I'm confused about what this does above & beyond css animations/transitions.
- cyral 5y ago
  https://css-tricks.com/css-animations-vs-web-animations-api/ https://css-tricks.com/css-animations-vs-web-animations-api/
- SirHound 5y ago
  Imperative JS libraries are more convenient to schedule and dynamically generate animations, but above and beyond that this offers timeline sequencing for long animation orchestration, independent transform animations, and will soon offer spring animations. Edit: And that CSS Tricks article covers more stuff well.
neolander 5y ago
What's the difference between this and something like Framer Motion?
- SirHound 5y ago
  Framer Motion is very high level, declarative API. It works out when to fire animations based on state and gesture changes. It also has a very advanced layout animations engine. This is more of a classic JS library like Greensock or Popmotion where you say when you want to fire animations. I do want to move into declarative animations too but this is just the first release.
wcarss 5y ago
This looks really nice! 2 bits of feedback: - hitting 'play' on your site's demo animations is adding pageviews to my history, which made getting back here to leave feedback unusually tough :) - for some reason, even the basic demo animations on your site have BIG delays/stutter -- every one of them, every time I play them. For context, I'm running Chrome 93.0.4577.63 (Official Build) (x86_64) on macOS Mojave 10.14.6 on a 2018 MBP, and have ~60 tabs open.
- SirHound 5y ago
  1. Thanks for pointing out the play button bug - I'll look into how I can stop that. 2. That is really odd. I'm on a similar machine with no problems. Are these the same demos with the iframe or do you also have problems with the homepage?
  - wcarss 5y ago
    oh interesting! I didn't realize they are iframes -- the homepage ones (e.g. the hero animation, the scale animation, the hardware-accel one) all seem fine, even right after pageload. It's the iframe demos that have the stutter/jump issues. I also just noticed my mac is a bit slow across the board right now, so it may be my own issue, a bad case of "uptime-itis" that can only be solved by a restart.
    - SirHound 5y ago
      Just pushed a fix to the browser history bug, thanks again for pointing it out.
Guidii 5y ago
Hi there Matt - this looks like an amazing library - thanks for posting. I’m part of the Blink Animations team that work on WAAPI (along with a bunch of folks from other browsers), and wanted to touch base on a few of the issues you raised. First, I agree that fill behavior[1] is messy, and should probably be considered to be a spec bug. Moving web specifications forward often involves “compromises” to ensure that new functionality works alongside existing work, and this is a good example of that. There’s a discussion on this at github.com/w3c/csswg-drafts/issues/5394. You raise a few issues with the current implementation/compliance/interop. Getting compliant and consistent implementations of the spec is critically important, so appreciate your feedback on this. I’m seeing two items that (might) relate to chromium here: individual transforms[2] - agree that this is important - currently working on it - see crbug.com/696374. Note: You can already get some of this working using composite:add. .finished Promise[3] - mostly working in chromium AFAIK, with one minor glitch - crbug.com/1141935 If there are other chromium issues we’d love for you to file them (use Blink>Animation component so they land on our triage). Other browsers look for feedback as well - there’s a good guide/walkthrough at https://web.dev/how-to-file-a-good-bug/ https://web.dev/how-to-file-a-good-bug/ On the topic of browser compliance, you cited caniuse.com, which is a good starting point. More detailed tracking can be found at https://wpt.fyi/results/web-animations https://wpt.fyi/results/web-animations - might be more detailed than you’re looking for, but this is what our team measures against. Some of your suggestions relate to the spec. Durations as seconds[4], and Simplifying cubic bezier definitions seem fairly straightforward, while others like cancelling and interrupting might be a little more complicated. In any case you can file issues against the spec if you want to move those forward - https://github.com/w3c/csswg-drafts/issues https://github.com/w3c/csswg-drafts/issues, tag with [web-animations-2]. To reduce the challenges of adopting the new API, there’s a published polyfill that you seem to be using already. You noted that there’s some inconsistency with keyframing across browsers - perhaps you could file an issue against the polyfill? Cheers! [1] https://www.w3.org/TR/web-animations-1/#fill-behavior https://www.w3.org/TR/web-animations-1/#fill-behavior [2] https://motion.dev/guides/waapi-improvements#individual-transforms https://motion.dev/guides/waapi-improvements#individual-tran... [3] https://motion.dev/guides/waapi-improvements#finished-promise https://motion.dev/guides/waapi-improvements#finished-promis... [4] https://motion.dev/guides/waapi-improvements#durations-as-seconds https://motion.dev/guides/waapi-improvements#durations-as-se... - this might already be addressed through CSSOM? [5] https://github.com/web-animations/web-animations-js https://github.com/web-animations/web-animations-js [6] https://github.com/web-animations/web-animations-js/issues https://github.com/web-animations/web-animations-js/issues
RobLach 5y ago
Nice website.
andrewstuart 5y ago
My primary measure of interest in animation libraries is demonstrations/showcases of the library in action. I could see nothing like this on the front page so I closed it. I'd love to see what this library can do so I'll come back to it when there's demonstrations.

lbotos 5y ago

You mention here and on the homepage you are the author of Framer Motion and Popmotion but in neither place are there links to those projects. I'd love to check them out so if they still exist it may be worth making that text on the homepage a link?

hezag 5y ago
1 - https://www.framer.com/motion/ https://www.framer.com/motion/ 2 - https://popmotion.io/ https://popmotion.io/
oefrha 5y ago
To be fair, Framer Motion and Popmotion are really big names in the web animation space, so it is probably safe to assume most people with even a passing interest in the past few years will have heard of them.
SirHound 5y ago
Ah apologises I just wanted to reduce the number of "off ramps" and as the other comment says, I am sort of assuming that people might be familiar with them but indeed they might be more fitting to your project (Popmotion if you want very low-level JS animations that just outputs values and Framer Motion if you want a high level React library that handles gestures and layout animations) But hezags comment below has kindly provided the links.

seph-reed 5y ago

I'm confused about what this does above & beyond css animations/transitions.

cyral 5y ago
https://css-tricks.com/css-animations-vs-web-animations-api/ https://css-tricks.com/css-animations-vs-web-animations-api/
SirHound 5y ago
Imperative JS libraries are more convenient to schedule and dynamically generate animations, but above and beyond that this offers timeline sequencing for long animation orchestration, independent transform animations, and will soon offer spring animations. Edit: And that CSS Tricks article covers more stuff well.

neolander 5y ago

What's the difference between this and something like Framer Motion?

SirHound 5y ago
Framer Motion is very high level, declarative API. It works out when to fire animations based on state and gesture changes. It also has a very advanced layout animations engine. This is more of a classic JS library like Greensock or Popmotion where you say when you want to fire animations. I do want to move into declarative animations too but this is just the first release.

wcarss 5y ago

This looks really nice! 2 bits of feedback: - hitting 'play' on your site's demo animations is adding pageviews to my history, which made getting back here to leave feedback unusually tough :) - for some reason, even the basic demo animations on your site have BIG delays/stutter -- every one of them, every time I play them. For context, I'm running Chrome 93.0.4577.63 (Official Build) (x86_64) on macOS Mojave 10.14.6 on a 2018 MBP, and have ~60 tabs open.

SirHound 5y ago
1. Thanks for pointing out the play button bug - I'll look into how I can stop that. 2. That is really odd. I'm on a similar machine with no problems. Are these the same demos with the iframe or do you also have problems with the homepage?
- wcarss 5y ago
  oh interesting! I didn't realize they are iframes -- the homepage ones (e.g. the hero animation, the scale animation, the hardware-accel one) all seem fine, even right after pageload. It's the iframe demos that have the stutter/jump issues. I also just noticed my mac is a bit slow across the board right now, so it may be my own issue, a bad case of "uptime-itis" that can only be solved by a restart.
  - SirHound 5y ago
    Just pushed a fix to the browser history bug, thanks again for pointing it out.

Guidii 5y ago

Hi there Matt - this looks like an amazing library - thanks for posting. I’m part of the Blink Animations team that work on WAAPI (along with a bunch of folks from other browsers), and wanted to touch base on a few of the issues you raised. First, I agree that fill behavior[1] is messy, and should probably be considered to be a spec bug. Moving web specifications forward often involves “compromises” to ensure that new functionality works alongside existing work, and this is a good example of that. There’s a discussion on this at github.com/w3c/csswg-drafts/issues/5394. You raise a few issues with the current implementation/compliance/interop. Getting compliant and consistent implementations of the spec is critically important, so appreciate your feedback on this. I’m seeing two items that (might) relate to chromium here: individual transforms[2] - agree that this is important - currently working on it - see crbug.com/696374. Note: You can already get some of this working using composite:add. .finished Promise[3] - mostly working in chromium AFAIK, with one minor glitch - crbug.com/1141935 If there are other chromium issues we’d love for you to file them (use Blink>Animation component so they land on our triage). Other browsers look for feedback as well - there’s a good guide/walkthrough at https://web.dev/how-to-file-a-good-bug/ https://web.dev/how-to-file-a-good-bug/ On the topic of browser compliance, you cited caniuse.com, which is a good starting point. More detailed tracking can be found at https://wpt.fyi/results/web-animations https://wpt.fyi/results/web-animations - might be more detailed than you’re looking for, but this is what our team measures against. Some of your suggestions relate to the spec. Durations as seconds[4], and Simplifying cubic bezier definitions seem fairly straightforward, while others like cancelling and interrupting might be a little more complicated. In any case you can file issues against the spec if you want to move those forward - https://github.com/w3c/csswg-drafts/issues https://github.com/w3c/csswg-drafts/issues, tag with [web-animations-2]. To reduce the challenges of adopting the new API, there’s a published polyfill that you seem to be using already. You noted that there’s some inconsistency with keyframing across browsers - perhaps you could file an issue against the polyfill? Cheers! [1] https://www.w3.org/TR/web-animations-1/#fill-behavior https://www.w3.org/TR/web-animations-1/#fill-behavior [2] https://motion.dev/guides/waapi-improvements#individual-transforms https://motion.dev/guides/waapi-improvements#individual-tran... [3] https://motion.dev/guides/waapi-improvements#finished-promise https://motion.dev/guides/waapi-improvements#finished-promis... [4] https://motion.dev/guides/waapi-improvements#durations-as-seconds https://motion.dev/guides/waapi-improvements#durations-as-se... - this might already be addressed through CSSOM? [5] https://github.com/web-animations/web-animations-js https://github.com/web-animations/web-animations-js [6] https://github.com/web-animations/web-animations-js/issues https://github.com/web-animations/web-animations-js/issues

RobLach 5y ago

Nice website.

andrewstuart 5y ago

My primary measure of interest in animation libraries is demonstrations/showcases of the library in action. I could see nothing like this on the front page so I closed it. I'd love to see what this library can do so I'll come back to it when there's demonstrations.