Example: Controllable Animations

Scenario

In this lesson, we’ll create a simple animation where a box will shrink and move horizontally using WAAPI. The purpose of building this animation is to learn how to utilize the various controls that WAAPI offers, including playing, pausing, and reversing an animation on demand.

Although a majority of WAAPI operations are framework agnostic, the purpose of using an Angular application for this lesson is to show you a complete example of how to use WAAPI in the context of Angular, so you can apply what you learn directly to your Angular project.

Note: We’ll be creating the animation in this lesson within a single component in the Angular application. We will be using app.component.html, app.component.scs, and app.component.ts for the template, stylesheet, and any typescript related logic respectively.