Web Animations API

[Martin-Pitt]

Hi @Rich-Harris,

Would it be possible to create a ramjet that can rely entirely on the web animations api? It would be great to be able to make ramjets of different elements and composite them into one big animation, e.g:

var anim = new AnimationSequence([
  ramjet.transform(document.querySelector('button.nav.active'), document.querySelector('header.page')),
  new Animation(document.querySelector('img.avatar'), [ { transform: 'translateX(300px) rotate(30deg) translateX(-400px) } ])
], { duration: 500, fill: 'forwards' });

var player = document.timeline.play(anim);
player.play();

The Web Animations API polyfill is used by Polymer for example and works really well, providing cross-browser support.
https://github.com/web-animations/web-animations-js

[Rich-Harris]

I did wonder about using web animations under the hood. As an internal implementation detail, it didn't really make sense as there are no performance benefits over CSS animations (as far as I can see), while the polyfill introduces a severe penalty because the animations are timer-based IIRC and have to run on the main thread.

But you make an interesting case about composition. I was planning to (eventually) make ramjet.transform return an object with things like pause and reverse methods - perhaps it would make more sense if that object was compatible with the web animations API. Definitely worth looking into for a future release