Codelabs for the Web Animations API
HTML JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
alancutter Merge pull request #3 from alancutter/master
Update web-animations-js versions to include TypeError fix
Latest commit f7a7a6b Oct 18, 2016

README.md

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-

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.