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!
-
Learn about the basics of Web Animations, including the
Element.animatemethod, to animate a few dots around the screen. -
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.
If you'd like to learn more about the Web Animations API, try these resources-
-
Read articles on Web Fundamentals-
-
Check out the Web Animations Demos for inspiration, hosted on GitHub
-
Use the W3C specification for reference
-
Watch these videos-
-
Dive into Santa Tracker, which uses the Web Animations API in about ⅓ of its scenes
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.