# Codelabs

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](animateme)

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

* [Icon Popups](iconpopups)

  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](io2015)

  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-

* Read articles on Web Fundamentals-
  * [Web Animations Resources](https://developers.google.com/web/updates/2015/10/web-animations-resources)
  * [Design & UI > Animations](https://developers.google.com/web/fundamentals/look-and-feel/animations) and any other [#animations updates on Google Developers](https://developers.google.com/web/updates/tags/animations)

* Check out the [Web Animations Demos](http://web-animations.github.io/web-animations-demos/) for inspiration, hosted [on GitHub](https://github.com/web-animations/web-animations-demos)

* Use the [W3C specification](https://w3c.github.io/web-animations/) for reference

* Watch these videos-
  * [Modern Animation Fundamentals](https://www.youtube.com/watch?v=WaNoqBAp8NI)
  * [Silky smooth Web Animations](https://www.youtube.com/watch?v=ep0_0W0qWsc)
  * [HTTP 203: Christmas Special](https://www.youtube.com/watch?v=tNgBQC9qMP4)

* Dive into [Santa Tracker](https://github.com/google/santa-tracker-web), which uses the Web Animations API in about ⅓ of its scenes

## Background

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](http://w3c.github.io/web-animations/), the [JavaScript implementation](https://github.com/web-animations/web-animations-js), and [native browser support levels](http://caniuse.com/#feat=web-animation).