The new native web: Bye bye animation libraries?

Talk by Ben Deitmer, as recorded at the latest Front-end Forward Meetup:

Traditionally most web animations are driven purely by javascript. The now widely supported Web Animations Api has potential to drastically decrease the javascript footprint and improve performance out of the box. Ben learns you how to implement this new api but also have a critical look at its limitations.

New in Chrome 84

Chrome 84 has been released, which contains some nice additions. Pete LePage walks us through:

Chrome 84 is rolling out now! Users can start common tasks within your app with App Icon Shortcuts. The Web Animations API adds support for a slew of previously unsupported features. Wake Lock, and the Content Indexing API graduate from origin trial. There are new origin trials for Idle detection and SIMD. And there’s a whole bunch more. Let’s dive in and see what’s new for developers in Chrome 84!

I’ve written about the Wake Lock API before, which has been part of Chrome’s Origin Trials since Chrome 79.

New in Chrome 84 →

Playing With Particles Using the Web Animations API

Louis Hoebregts writing for CSS-Tricks

When it comes to motion and animations, there is probably nothing I love more than particles. This is why every time I explore new technologies I always end up creating demos with as many particles as I can.

In this post, we’ll make even more particle magic using the Web Animations API to create a firework effect when clicking on a button.

At its core site this createParticle function

function createParticle (x, y) {
  // [...]
  // Generate a random x & y destination within a distance of 75px from the mouse
  const destinationX = x + (Math.random() - 0.5) * 2 * 75;
  const destinationY = y + (Math.random() - 0.5) * 2 * 75;

  // Store the animation in a variable because we will need it later
  const animation = particle.animate([
      // Set the origin position of the particle
      // We offset the particle with half its size to center it around the mouse
      transform: `translate(${x - (size / 2)}px, ${y - (size / 2)}px)`,
      opacity: 1
      // We define the final coordinates as the second keyframe
      transform: `translate(${destinationX}px, ${destinationY}px)`,
      opacity: 0
  ], {
    // Set a random duration from 500 to 1500ms
    duration: 500 + Math.random() * 1000,
    easing: 'cubic-bezier(0, .9, .57, 1)',
    // Delay every particle with a random value from 0ms to 200ms
    delay: Math.random() * 200

Playing With Particles Using the Web Animations API →

Getting Started with the Web Animations API

The Web Animations Api (short WAAPI) tries to combine the power of CSS with the flexibility of Javascript in order to allow complex animation sequences. There are big differences between the WAAPI and for example libraries like GSAP, the biggest one being that the WAAPI is going to provide native browser support without needing to load an external library.

Getting Started with the Web Animations API →

Web Animations now in Chrome

  {transform: 'translate(' + snowLeft + 'px, -100%)'},
  {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'}
], {
  duration: 1500,
  iterations: 10,
  delay: 300

Glad to see this one land 🙂

Web Animations – element.animate() is now in Chrome 36 →

Web Animations Polyfill

<div class="pulse" style="width:150px;">Hello world!</div>
  var elem = document.querySelector('.pulse');
  var player = Animation(elem, [
      {opacity: "0.5", transform: "scale(0.5)"}, 
      {opacity: "1.0", transform: "scale(1)"}
      direction: "alternate", duration: 0.5, iterations: Infinity

An emulator of the Web Animations specification. Please note that this is still experimental, and that the specification is likely to change in the future.

web-animations-js →