My first try of the new Web Animation API

Recently, I (finally) found out the new Web Animation API, which can use JavaScript to create smooth animation just like CSS one, but with more features, like changing speed or play/pause/cancel animations. Developer can have more flexibilities to create different animations.

Note: The web animation API is still an experimental technology, not all browsers supported it. Don't forget to add polyfill before use!

First Try

This time, I am trying to create animations of gears, since it is normal to see gears in different speeds or users can choose to start/stop animation when in need.

Normally, you can use CSS to create rotating gears like:

.gear1 {
    animation: gears 1500ms infinite;
}

@keyframes gears {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

But now, you can use few lines of Javascript to create the same effects:

  const rotate = [
    { transform: "rotate(0deg)" },
    { transform: "rotate(360deg)" }
  ];

  const timing = {
    duration: 1500,
    iterations: Infinity
  };

  const firstGear = document.getElementById("gear1").animate(rotate, timing);

You can see that the settings on @keyframes is moved to the first part of animate(), and one different thing from CSS is infinite changes to iterations: Infinity in the new Web Animation API (WAAPI).

First animation using WAAPI:

See the Pen Gears with Web Animation API (part1) by Yuki (@snowleo208) on CodePen.

You can also control percentage in animation just like CSS:

const blink = [
  { transform: "rotate(0deg)", opacity: 1, offset: 0 },
  { opacity: 0, offset: 0.3 },
  { opacity: 1, offset: 0.5 },
  { opacity: 0, offset: 0.7 },
  { opacity: 1, offset: 0.9 },
  { transform: "rotate(360deg)", opacity: 1, offset: 1 }
];

  const timing = {
    duration: 1500,
    iterations: Infinity
  };

const firstGear = document.getElementById("gear1").animate(blink, timing);

As you can see, the offset: 0 is just like 0% in CSS's keyframes, you can change different properties like color, transform, opacity etc. as you like.

For the timing, you can also add other settings like delay, easing, fill etc. You can view the full list here.

Control Animation

After creating gears, you can also control the animation using Javascript. Like what we do at the first part, we declared the gear element as firstGear, now we can use it to switch on or off the animation.

For example, you can create a button, when user clicks that, it will stop the animation.

<button id="stop">Stop</button>

Then, just add one line of javascript, you are done:

document.getElementById("stop").addEventListener("click", function() {
    firstGear.pause();
});

You can also use these to start or cancel the animation:

firstGear.start();
firstGear.pause();
firstGear.cancel();
firstGear.reverse();

For reverse, only normal animation can use reverse. If you are creating infinite animation like this gear, you cannot simply use <YOUR-ELEMENT>.reverse().

In this case, we can use direction in the timing variable:

const timing = {
    duration: 1500,
    direction: "reverse",
    iterations: Infinity
  };

See the Pen Gears with Web Animation API (part2) by Yuki (@snowleo208) on CodePen.

Speed is king!

How can we change the animation speed after some events (e.g. after clicking button)?

document.getElementById('<YOUR-ELEMENT>').addEventListener("click", function() {
    firstGear.playbackRate = 2; //speed x 2
    firstGear.playbackRate = 1; //normal speed
    firstGear.playbackRate = -1; //reverse your animation!
});

If you like, you can even set some conditions inside! For example, the loading animation, the gears can move slow at first, but when the page is nearly loaded, the gear speed can be faster!

View my complete gears here:

See the Pen Gears with Web Animation API by Yuki (@snowleo208) on CodePen.

And more?

Unfortunately, the support of WAAPI is not very good right now, some features are not supported in current browsers.

For example, if you need to change animation, like switch from rotating effects to fading effects. You will need to use composite and iterationComposite property, with the setKeyframes() function. Sadly, all are not fully supported in modern browsers.

Nevertheless, we are still able to create smooth animations with more controls using basic functions. Hope browsers can support more and more features in the future!