DEV Community

Cover image for Animating Your Angular App
Alisa
Alisa

Posted on

3 2

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.

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (2)

Collapse
 
svgatorapp profile image
SVGator

Great walk-through!

Collapse
 
alisaduncan profile image
Alisa

Thank you for your kind words! 🥰

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more