Animating Your Angular App

#angular #animations #webdev

Angular has built-in support for adding animations. In this talk, you'll learn how to add some sparkle to your Angular app by harnessing the power of Angular’s animation library. We’ll start from the basics of state and triggers, use built-in fancy effects, add routing animations, and cover how to make your animations reusable and scalable in this hands-on walk-through.

This video is ideal for those who have some basic CSS and Angular knowledge. The animations we'll add are straightforward so that we can focus on the capabilities of the Angular animation library.

Animation code

You can check out the starting code for the app.

alisaduncan / angular-hero-animations

Sample app and code for animating the Heroes contact list app for a talk on Angular Animations

You can see the finished app with animations in the animations branch of the repo.

This presentation was prepared for Front Stage. Unfortunately, the conference was canceled due to the ongoing conflicts in Ukraine, where the conference organization is based. 🇺🇦 This talk was also presented at International Women's Day San Jose and AngularKC Meetup in March 2022.