DEV Community

Cover image for Animating Your Angular App
Alisa
Alisa

Posted on

Animating Your Angular App

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.

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.

Top comments (2)

Collapse
 
svgatorapp profile image
SVGator

Great walk-through!

Collapse
 
alisaduncan profile image
Alisa

Thank you for your kind words! 🥰