Angular: Animations

Course details

Motion is the key to modern web applications. Angular is ready. Explore the native animation capabilities of this popular JavaScript library and build expressive applications. This project-based course uses the Angular CLI and its animations module to create and animate an interactive demo. Find out how to set parameters such as duration, delay, easing, and callbacks, which allow you to adjust the timing and sequence of your animation. Instructor Joseph Labrecque also shows how to animate isolated elements of your application using the query and stagger functions. Once you understand how to animate a new project, Joseph takes you through the process of animating interactions within an existing Angular application—a custom video player. Finally, discover how to compile and package the project for distribution on the web.

Learning objectives
Installing the Angular CLI
Creating a new project
Verifying the animations package
Configuring project routes
Animating components
Triggering animation between states
Stepped and parallel animation
Writing reusable animations
Animating individual items with query and stagger
Animating an existing Angular project

Concepts

0. Introduction

01 - Welcome
02 - What you should know before taking this course
03 - Using the exercise files
04 - What's new in this update

1. Getting Ready to Animate

05 - How Angular animations work
06 - Angular CLI Installation
07 - Creating a new project
08 - Project structure
09 - Preview the project
10 - Challenge - Update your Angular version
11 - Solution - Update your Angular version

2. Enabling Angular Animations

12 - Verifying the animations package
13 - Project module configuration
14 - Application layout
15 - Creating route view components
16 - Configuring project routes
17 - Challenge - Create a 404 route view
18 - Solution - Create a 404 route view

3. Angular Animation Basics

19 - Preparing component interaction
20 - Establishing stateful data
21 - Triggering animation between states
22 - Delay and easing functions
23 - Stepped animation with keyframes
24 - Parallel animation with groups
25 - Animation callback functions
26 - Challenge - Clear the message text
27 - Solution - Clear the message text

4. Advanced Angular Animation

28 - Self-contained component animation
29 - Writing reusable animations
30 - Animation input parameters
31 - Configuring router animation
32 - Selecting items with a query
33 - Using Stagger within an animation
34 - Challenge - Per-page router animations
35 - Solution - Per-page router animations

5. Animating an Existing Interface

36 - Video playback overview
37 - Adding animation packages
38 - Old animation cleanup
39 - Creating Angular components
40 - Component instantiation and data value translation
41 - Animating the video title
42 - Animating the playback overlay
43 - Providing playlist motion
44 - Challenge - Transition the toolbar with a fade
45 - Solution - Transition the toolbar with a fade

6. Package for Distribution

46 - Building the project

Conclusion

47 - Goodbye