Angular: Animations

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

Introduction

• 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

Conclusion

• Goodbye