Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

LinkedIn Learning

Angular: Animations

via LinkedIn Learning


Explore the animation capabilities of Angular. Learn how to animate elements in your web applications, and build more engaging user experiences.

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.


  • Welcome
  • What you should know before taking this course
  • Using the exercise files
  • What's new in this update
1. Getting Ready to Animate
  • How Angular animations work
  • Angular CLI Installation
  • Creating a new project
  • Project structure
  • Preview the project
  • Challenge: Update your Angular version
  • Solution: Update your Angular version
2. Enabling Angular Animations
  • Verifying the animations package
  • Project module configuration
  • Application layout
  • Creating route view components
  • Configuring project routes
  • Challenge: Create a 404 route view
  • Solution: Create a 404 route view
3. Angular Animation Basics
  • Preparing component interaction
  • Establishing stateful data
  • Triggering animation between states
  • Delay and easing functions
  • Stepped animation with keyframes
  • Parallel animation with groups
  • Animation callback functions
  • Challenge: Clear the message text
  • Solution: Clear the message text
4. Advanced Angular Animation
  • Self-contained component animation
  • Writing reusable animations
  • Animation input parameters
  • Configuring router animation
  • Selecting items with a query
  • Using Stagger within an animation
  • Challenge: Per-page router animations
  • Solution: Per-page router animations
5. Animating an Existing Interface
  • Video playback overview
  • Adding animation packages
  • Old animation cleanup
  • Creating Angular components
  • Component instantiation and data value translation
  • Animating the video title
  • Animating the playback overlay
  • Providing playlist motion
  • Challenge: Transition the toolbar with a fade
  • Solution: Transition the toolbar with a fade
6. Package for Distribution
  • Building the project
  • Goodbye

Taught by

Joseph Labrecque

Related Courses


Start your review of Angular: Animations

Never Stop Learning!

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free