DEV Community

Cover image for Goodbye @angular/animations: How to Migrate to Angular 20’s Modern Animation API
Amin-Karimi
Amin-Karimi

Posted on

Goodbye @angular/animations: How to Migrate to Angular 20’s Modern Animation API

#angular #migrate #animation #frontend

If you’ve been working with Angular for a while, you’ve probably used the familiar @angular/animations API with trigger, state, style, transition, and animate. For years, this was the go-to way to build smooth animations inside Angular apps.

But with Angular 20, this API has been officially deprecated . The Angular team is pushing for a simpler, more modern, and more maintainable approach that leverages native CSS transitions and the new animate directives (animate.enter, animate.leave).

This article will walk you through what changed, why it matters, and how to migrate your animations to the new Angular 20 style.

The Old Way (Deprecated)

Traditionally, you might have written something like this:

animations: [
  trigger('detailExpand', [
    state('collapsed', style({ height: '0px', minHeight: '0' })),
    state('expanded', style({ height: '*' })),
    transition('expanded <=> collapsed', animate('350ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
  ]),
],
Enter fullscreen mode Exit fullscreen mode

This worked fine, but it came at a cost: complexity, bundle size, and an extra dependency on Angular’s animation engine.

The New Way in Angular 20

Now, Angular encourages using DOM insertion/removal animations via animate.enter and animate.leave. Instead of describing states and transitions in TypeScript, you define them directly in your template and CSS.

Example: Expand/Collapse Animation
Template (component.html)

@if(isExpanded) {
<div >
  <div animate.enter="expand" animate.leave="collapse">
    <p>Expandable content goes here...</p>
  </div>
</div>
}
Enter fullscreen mode Exit fullscreen mode 

.expand {
  transition: height 350ms cubic-bezier(0.4, 0.0, 0.2, 1);
  height: auto;
}

.collapse {
  transition: height 350ms cubic-bezier(0.4, 0.0, 0.2, 1);
  height: 0px;
  min-height: 0;
}

/* Define the starting style for enter animations */
@starting-style .expand {
  height: 0px;
  min-height: 0;
}
Enter fullscreen mode Exit fullscreen mode

Why This Is Better

  • Closer to the platform → Uses native CSS transitions.
  • Less boilerplate → No more TypeScript-heavy state/transition blocks.
  • Future-proof → This is the officially recommended way going forward.
  • Smaller bundles → Dropping the @angular/animations dependency reduces bundle size.

Migration Strategy

  1. Replace old trigger/state/transition definitions with animate.enter and animate.leave.
  2. Move animation logic into CSS classes.
  3. Use @starting-style when needed for enter transitions.
  4. Control rendering with @if or *ngIf so that elements truly enter/leave the DOM.

Conclusion

This change might feel a little uncomfortable at first if you’ve been using Angular animations for years. But once you adopt the new approach, you’ll realize how much cleaner and more maintainable your code becomes.

Angular 20’s modern animation API is a big step toward making Angular apps lighter, faster, and closer to web standards.

So yes — it’s time to say goodbye to @angular/animations and embrace the future. 🚀

Top comments (0)