Skip to content
Codelabs for the Web Animations API
Branch: master
Clone or download
alancutter Merge pull request #3 from alancutter/master
Update web-animations-js versions to include TypeError fix
Latest commit f7a7a6b Oct 19, 2016
Type Name Latest commit message Commit time
Failed to load latest commit information.
animateme update to prefer NPM over Bower, update to 2.2.2 Aug 5, 2016
iconpopups Update index.html Oct 18, 2016
io2015 Update index.html Oct 18, 2016
.gitignore gitignore May 19, 2015 Google license/contrib files May 17, 2015
LICENSE Google license/contrib files May 17, 2015 restructure codelabs for new link Oct 31, 2015


This repository contains codelabs for the Web Animations API. If you're reading this on GitHub and would like to work through these codelabs, be sure to clone or download this repository using the links to the right.

If you're not sure where to start, note that these codelabs are roughly ordered from least difficult to most difficult - so be sure start at the top and work your way down!

  • Animate Me

    Learn about the basics of Web Animations, including the Element.animate method, to animate a few dots around the screen.

  • Icon Popups

    Use the Web Animations API to enhance a menu containing icons, with an effect inspired by Android's homescreen folders. You'll use animations, groups and learn about playback rate.

  • Transitions and Playback Control

    Learn how to use the Web Animations API to enhance a single-page HTML website, adding transitions between content and an effect based on the scroll position of the page.

Learn More

If you'd like to learn more about the Web Animations API, try these resources-


Web Animations is a JavaScript API for driving animated content on the web. By unifying the animation features of SVG and CSS, Web Animations unlocks features previously only usable declaratively, and exposes powerful, high-performance animation capabilities to developers.

For more details see the W3C specification, the JavaScript implementation, and native browser support levels.

You can’t perform that action at this time.