This codelab will teach you how to use the Web Animations API to enhance a popup containing icons, with an effect inspired by Android's homescreen folders. You'll use animations, groups and learn about playback rate.
The final version will run on both desktop and mobile, in all modern browsers. Check out this preview-
Before we start, let's perform some introduction steps.
You'll need to get a copy of the source code - for more information, head to the GitHub repository. In this codelab, we'll just use the iconpopups folder.
Take a look at the popup we're going to enhance, by opening the iconpopups/start/index.html file. This just has a few icons, each of which can be clicked to open a folder of further icons. This happens instantaneously, without any effect &emdash; this is most unexciting!
Our base site also has some boilerplate CSS and JavaScript to get us started. If you're curious about this boilerplate code, it lives in the iconpopups/shared folder. In this codelab, we won't modify it at all.
If you'd like to open the final version of the site to see what you'll be building, you can find the code in the iconpopups/final folder. It contains the entire codelab's work.
Next, let's head on over to Step 1: Include Web Animations »