Animating Your Angular App

Alisa - Apr 5 '22 - - Dev Community

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鈥檚 animation library. We鈥檒l 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.

GitHub logo 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.

. . . . . . . . . . . . . . . . . . . . . . . . . . .