[HN Gopher] Show HN: Motion One - New animation library, built o...
___________________________________________________________________
Show HN: Motion One - New animation library, built on the Web
Animations API
Author : SirHound
Score : 231 points
Date : 2021-09-22 13:27 UTC (9 hours ago)
(HTM) web link (motion.dev)
(TXT) w3m dump (motion.dev)
| yunusabd wrote:
| Very nice! I recently updated my website traveldays.com with an
| SVG path animation. The effect is bound to the scroll progress.
| It looks like you don't support scroll animations (yet)?
|
| I looked into anime.js and GSAP, but in the end I went with the
| naive approach of just updating the animation in js. It works
| well on mobile, but when scrolling with a mouse the animation
| could be smoother.
| SwiftyBug wrote:
| Here's a HN thread on traveldays.com:
| https://news.ycombinator.com/item?id=28617541
| SirHound wrote:
| Yet indeed! As someone who has always built animation libraries
| based on rAF, this project has been a nice change of pace to
| limit myself to WAAPI. And I want to continue that with making
| other browser APIs easier to use, which will include the
| upcoming ScrollTimeline. Doing this should solve the smoothness
| you describe, it's not great with sync JS in some browsers.
| beebeepka wrote:
| Last time I had to deal with lots of animations, I used tweenjs.
| Granted, that was a long time ago. Didn't even know about the Web
| Animations API. Thanks.
|
| Bookmarked
| [deleted]
| jansan wrote:
| The "pay to source" is an interesting approach. I am not sure
| what my opinion is, but I will follow closely if this model will
| get used more often in future. Also, I would actually consider
| paying for this if I was in need of an animation framework at the
| moment (so maybe I do have an opinion?).
| andrewnc wrote:
| The website hijacked the "back" functionality of my browser. Not
| a fan of that.
| SirHound wrote:
| That's not intended at all - which page were you on when you
| tried to go back? What did you use to go back (back button/key
| shortcut)? I can't imagine what is doing it but will fix.
|
| Another poster has pointed out the play button in examples
| (which reloads the sandbox iframes) is pushing pages to the
| browser history. I'll take a look.
| gugagore wrote:
| Could it be used with Theatre.js
| (https://github.com/ariaminaei/theatre) posted a few days ago?
| ex3ndr wrote:
| Very cool! But can you add more examples with blocking JS or
| layout threads? I am asking because I have been testing to
| achieve this and performance really depends on the browser and
| not all browsers are performant when using WAAPI.
| cdubzzz wrote:
| Looks very interesting -- it would be nice to have more
| playground/demos. Both of the front page and in the documentation
| (like what is on the Quick Start page, essentially).
| benatkin wrote:
| Here's the contents of the npm module:
| https://unpkg.com/browse/motion@10.0.1/dist/
|
| Given that the repo is private, I wondered if only the compiled
| version would be available. Looks like the published source is
| split up into multiple files, so this is a bit different from
| Mattermost, where the MIT license only applies to the compiled
| version: https://github.com/mattermost/mattermost-
| server/blob/master/...
| SirHound wrote:
| That's an interesting approach but no the MIT license applies
| to everything and I don't want to stop anyone from knowing what
| they're installing and distributing. Github access is more of a
| convenience perk for sponsors at this early stage.
| SirHound wrote:
| 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 [2]
| https://motion.dev/guides/waapi-improvements [3]
| https://motion.dev/guides/feature-comparison
| neolander wrote:
| What's the difference between this and something like Framer
| Motion?
| SirHound wrote:
| 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.
| lbotos wrote:
| 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?
| oefrha wrote:
| 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.
| hezag wrote:
| 1 - https://www.framer.com/motion/
|
| 2 - https://popmotion.io/
| SirHound wrote:
| 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 wrote:
| I'm confused about what this does above & beyond css
| animations/transitions.
| cyral wrote:
| https://css-tricks.com/css-animations-vs-web-animations-api/
| SirHound wrote:
| 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.
| wcarss wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| Just pushed a fix to the browser history bug, thanks
| again for pointing it out.
| Guidii wrote:
| 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/
|
| 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 - 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, 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 [2]
| https://motion.dev/guides/waapi-improvements#individual-tran...
| [3] https://motion.dev/guides/waapi-improvements#finished-
| promis... [4] 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 [6] https://github.com/web-
| animations/web-animations-js/issues
| SirHound wrote:
| Hi Guidii!
|
| I think it's fair enough that there's "spec bugs" and
| understand the constraints you/they were working in trying to
| cover both CSS transitions/animations. I prefer browser APIs
| low level enough to build opinionated libraries around!
|
| Individual transforms for me doesn't go far enough, I haven't
| been involved in spec discussions but I'm surprised they
| stopped at transforms and not axes. Think throwing an element
| - x/y would want different animations based on the gesture
| velocity. I'm not sure composite works well with transform as
| its order-dependent, the behaviour is itself not well
| supported cross browser, though maybe composite+individual
| transform offers promise in the future.
|
| On the state of implementation in general, I am using this
| project to file bugs to help get some eyes on WAAPI and so
| far I've opened 4 in Webkit and none in Blink so there's no
| worries there :)
|
| Thanks for wpt.fyi - I have bumped into it but I should use
| it to pre-empt some of these bugs.
|
| The polyfill is just for running tests in Jest. It's actually
| a little beaten up in terms of implementation and this has
| worked quite nicely as Chrome even in modern phones seems to
| not support finished so its helped my polyfill(er)s target
| those bits too.
|
| Thanks for reaching out, I appreciate it.
| RobLach wrote:
| Nice website.
| tartoran wrote:
| What Im getting is:
|
| Application error: a client-side exception has occurred
| (developer guidance).
| SirHound wrote:
| That's weird, what browser/device are you on?
| tartoran wrote:
| Safari on IOs
| [deleted]
| flixic wrote:
| In many cases, "animations on the web" has become Lottie
| animations. Or, at least, Lottie raises the bar for animation
| expectations.
|
| I'd love to see two things:
|
| - A decent free or one-time payment editor for Lottie (don't make
| me use AfterEffects)
|
| - Perhaps a Lottie implementation using Web Animations API, if
| that is even possible.
| swlkr wrote:
| I think sponsorship to access the github repo is smart.
|
| This is similar to what the alpinejs creator did with his
| "sponsorware" approach.
|
| The animations api looks very simple as well, will definitely try
| it out!
| jaredchung wrote:
| How exactly does that work with the MIT license? If someone
| sponsors and gains access to the repo, they're permitted to
| fork and redistribute the code, right?
| jamestanderson wrote:
| Nothing in the MIT license prevents you from doing that. But
| the author could disable your access to the repo any time,
| and once that happens, your fork would be forever out of date
| I'd expect.
|
| Of course, doing so would make me question why the author
| released this under a permissive license to begin with.
| SirHound wrote:
| I'm not looking to block anyone. I want this to be open.
| And I don't want a confusing license. The code is pretty
| unobscured on npm so its less convenient but the source is
| free for anyone who can be bothered to go that route.
|
| My reasoning is more that this is my side project, and I
| have limited time, and this seems like a good experiment to
| see if I can make OSS sustainable for once and also allow
| me to target help (my free time) towards users who are most
| invested in the project.
|
| In the future I would like to open the repo but it might be
| tied to hitting a sponsorship amount or perhaps an extra
| service/product on top for those that want it.
| SirHound wrote:
| Yeah that's fine. But repo access is more a convenience
| upsell, you can always get the source code (or pretty close
| transpiled code) from the npm distribution.
| mritchie712 wrote:
| Also, once I npm install, what prevents me from using that
| code?
| SirHound wrote:
| Nothing, its MIT, go wild :)
___________________________________________________________________
(page generated 2021-09-22 23:01 UTC)