The Web Animations API

FINALLY

An quick intro by James Y Rauhut.
Much content taken from Brian Birtles and Dan Wilson.

History

During my final creative project for a certificate in college, I got really into SMIL animations for SVGs. I thought they were the bomb.com because it allowed me to program animations without third party tools.

However, I would always get mad at Microsoft for never properly supporting them:

Turns out there was good reasoning for the IE/Edge team to never develop for SVG animations: They knew that making a specific way for SVG animations was too small of a scope and that there needed to be a single model for all web animation.

So Adobe, Google, and Mozilla gave us a working spec called the Web Animations API! While Microsoft did not participate in the development of WAAPI, I did appreciate that they helped influence it's creation.

Now some of the stuff I am about to show may not blow your mind. You may say "I could always pull this off with CSS animations or a third-party tool."

But that is not the point. The point is that this is finally becoming something native for browsers in the web developers' most commonly used scripting language!

Now lets check out some things that the Web Animations API has to offer!

1   Looks Similar to CSS


/* Spinning with CSS */
.shaq {animation: spin 5s linear infinite;}

@keyframes spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}
					

// Spinning with Web Animations API
var animateShaq = document.getElementById('shaq').animate([
    { transform: 'rotate(0)' },
    { transform: 'rotate(360deg)' }
  ], {
    duration: 5000,
    iterations: Infinity
  }
);

2   Play States and Other Goodies

batmobile


var animateBatmobile = document.getElementById('batmobile').animate([
    { transform: 'translateX(150%)' },
    { transform: 'translateX(-150%)' }
  ], {
    duration: 4000,
    iterations: 1
  }
);

document.getElementById('play').onclick = function () {
  animateBatmobile.play();
};

document.getElementById('pause').onclick = function () {
  animateBatmobile.pause();
};

document.getElementById('cancel').onclick = function () {
  animateBatmobile.cancel();
};

document.getElementById('finish').onclick = function () {
  animateBatmobile.finish();
};

document.getElementById('reverse').onclick = function () {
  animateBatmobile.reverse();
};

document.getElementById('playbackRate').onclick = function () {
  if (animateBatmobile.playbackRate === 1) {
    animateBatmobile.playbackRate = 2;
    document.getElementById('playbackRate').innerHTML = '.playbackRate = 1';
  } else {
    animateBatmobile.playbackRate = 1;
    document.getElementById('playbackRate').innerHTML = '.playbackRate = 2';
  }
};

3   The Power of onFinish



var leapingLeo = document.getElementById('leonardo');

var animateLeonardo = leapingLeo.animate([
    { transform: 'translateY(0)' },
    { transform: 'translateY(-5em)' },
    { transform: 'translateY(0)' }
  ], {
    duration: 750,
    iterations: 1,
    timing: 'ease-in'
  }
);

var animateLeonardo2 = leapingLeo.animate([
    { transform: 'translate(0) scaleX(-1)' },
    { transform: 'translateY(-5em) scaleX(-1)' },
    { transform: 'translateY(0) scaleX(-1)' }
  ], {
    duration: 750,
    iterations: 1,
    timing: 'ease-in'
  }
);

animateLeonardo2.pause();

animateLeonardo.onfinish = function() {
  animateLeonardo2.play();
}

animateLeonardo2.onfinish = function() {
  animateLeonardo.play();
}

4   You Have a Timeline




var leftSharkLeftFin = document.querySelector('#shark1-LeftFin').animate([
    {transform: 'scale(1) rotate(0deg)'},
    {transform: 'scale(0.95) rotate(70deg) translate(-40%,-37%)'}
], {
    duration: 1000,
    direction: 'alternate',
    iterations: Infinity
});

leftSharkLeftFin.currentTime = 500;

var rightSharkLeftFin = document.querySelector('#shark2-LeftFin').animate([
    {transform: 'scale(1) rotate(0deg)'},
    {transform: 'scale(0.95) rotate(70deg) translate(-40%,-37%)'}
], {
    duration: 1000,
    direction: 'alternate',
    iterations: Infinity
});

var syncButton = document.getElementById('sync');

syncButton.onclick = function () {
  if (syncButton.innerHTML === 'leftSharkLeftFin.currentTime = rightSharkLeftFin.currentTime') {
    leftSharkLeftFin.currentTime = rightSharkLeftFin.currentTime;
    syncButton.innerHTML = 'Unsync';
  } else {
    leftSharkLeftFin.currentTime = 500;
    syncButton.innerHTML = 'leftSharkLeftFin.currentTime = rightSharkLeftFin.currentTime';
  }
};

5   Multiple Animation Players, One Element

slimer

animateBackground.playbackRate = 1 : 

var slimer = document.getElementById('slimer');

var animateOpacity = slimer.animate([
    { opacity: '.9' },
    { opacity: '.1' }
  ], {
    direction: 'alternate',
    duration: 4000,
    iterations: Infinity
  }
);

var animateFloat = slimer.animate([
    { transform: 'translateY(0)' },
    { transform: 'translateY(-1em)' },
    { transform: 'translateY(0)' }
  ], {
    duration: 2000,
    iterations: Infinity
  }
);

var animateBackground = slimer.animate([
    { background: 'repeating-radial-gradient(#b8e7bf, #b8e7bf 5px, white 5px, white 10px)' },
    { background: 'repeating-radial-gradient(white, white 5px, #b8e7bf 5px, #b8e7bf 10px)' }
  ], {
    duration: 300,
    iterations: Infinity
  }
);

var elmOpacity = document.getElementById('opacity');
var elmFloat = document.getElementById('float');

elmOpacity.onclick = function () {
  if (elmOpacity.innerHTML === 'animateOpacity.pause()') {
    animateOpacity.pause();
    elmOpacity.innerHTML = 'animateOpacity.play()';
  } else {
    animateOpacity.play();
    elmOpacity.innerHTML = 'animateOpacity.pause()';
  }
};

elmFloat.onclick = function () {
  if (elmFloat.innerHTML === 'animateFloat.pause()') {
    animateFloat.pause();
    elmFloat.innerHTML = 'animateFloat.play()';
  } else {
    animateFloat.play();
    elmFloat.innerHTML = 'animateFloat.pause()';
  }
};

var backgroundSlider = document.getElementById('background');
var backgroundValueDisplay = document.getElementById('backgroundValue');

backgroundSlider.addEventListener('change', function() {
  animateBackground.playbackRate = backgroundSlider.value;
  backgroundValueDisplay.innerHTML = animateBackground.playbackRate;
});

6 Support All the Browsers

All major browsers are currently supported by polyfill. Chrome and Firefox already natively support while it is a planned medium priority for the Edge team.

Chrome Firefox Edge Safari

Conclusion

Thanks for checking this out! The Web Animations API has had a great start, but has a lot more to offer in the future. I hope you enjoy using it as much as I have lately and that it continues to develop into a beast of a native feature!

My hope is that WAAPI starts being used more and more. SMIL garnered a great community of artists and many people love third-party animation libraries. WAAPI would be a great feature for those communities and tools to adopt.

Let me know if you have any questions or would like to help improve this page. All source code is on Github!