Composite Web Animations

Question

Im trying to composite some animations using the Web Animations API (https://developer.mozilla.org/en-US/docs/Web/API/Element/animate). I want to play an intro animation which scales my item, then have it react to hoover and click events to play some additional animations. I thought it would be possible to combine animations using the "composite" property recently introduced in Firefox and Chrome (using this as a reference: https://css-tricks.com/additive-animation-web-animations-api/), but it still seems to replaces my previous declared animations.

I put a fiddle up with the code: http://jsfiddle.net/v0mk9eg4/51/

var item = document.getElementById("item");

var introFrames = [
    {"transform": "translate(-50%, -50%) scale(0,0) translate(0, 0)"},
    {"transform": "translate(-50%, -50%) scale(1,1) translate(0, 0)"}
]
var introOpts = {
    "duration": 5000,
    "iterations": 1,
    "easing": "cubic-bezier(0.175, 0.885, 0.32, 1.275)"
}

var introAnim = item.animate(introFrames, introOpts);
introAnim.pause();

var hooverFrames = [
    {"transform": "translate3d(0, 0, 0)"},
    {"transform": "translate3d(-50%, -50%, 0)"}
]
var hooverOpts = {
    "duration": 1000,
    "iterations": 1,
    "easing": "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
    "fill": "both",
    "composite": 'add'
}

var hooverAnim = item.animate(hooverFrames, hooverOpts);
hooverAnim.pause();

var clickFrames = [
    {"transform": "translate(0, 0)"},
    {"transform": "translate(-50%, 0)"},
    {"transform": "translate(0, 0)"}
]
var clickOpts = {
    "duration": 500,
    "iterations": 1,
    "easing": "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
    "fill": "both",
    "composite": 'add'
}

var clickAnim = item.animate(clickFrames, clickOpts);
clickAnim.pause();


introAnim.play();

function playHooverAnim(direction) {
    console.log('HOOVER', direction);
    hooverAnim.playbackRate = direction;
    hooverAnim.play();
}

function playClickAnim() {
    console.log('CLICK');
    clickAnim.play();
}

When you comment out the clickAnim, the hooverAnim will play, and when the hooverAnim is commented out, the introAnim will play. How should multiple animations be combined to play together?

score 4 · Accepted Answer · answered Aug 13 '18 at 11:10

Composite modes, although implemented, are not shipping in either Firefox or Chrome yet.

If you try your fiddle in Firefox Nightly, you will see that it works. In Chrome if you go to chrome://flags and enabled "Experimental Web platform features", you will also see it works there.

Unfortunately there are still some parts of this feature that need to be more fully specified before we can ship it in a general release. I will be working on specifying this next month but it will probably not be until early 2019 before this is generally available.

score 3 · Answer 2 · answered Jun 17 '21 at 03:42

Composite Animations have now shipped in all major browsers (except Safari) https://caniuse.com/mdn-api_keyframeeffect_composite.

Also, I'd suggest using @okikio/animate when working with the Web Animation API (WAAPI), as it's easier to create complex animations with. I actually wrote an article on CSS-Tricks about it https://css-tricks.com/how-i-used-the-waapi-to-build-an-animation-library/.

Composite Web Animations

2 Answers2