Awesome

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

  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-

• Read articles on Web Fundamentals-

  • Web Animations Resources
  • Design & UI > Animations and any other #animations updates on Google Developers

• Check out the Web Animations Demos for inspiration, hosted on GitHub

• Use the W3C specification for reference

• Watch these videos-

  • Modern Animation Fundamentals
  • Silky smooth Web Animations
  • HTTP 203: Christmas Special

• Dive into Santa Tracker, 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, the JavaScript implementation, and native browser support levels.