Angular's Animation Revolution: Say Hello to animate.in and animate.out 🎬

After eight years of @angular/animations, it's time for a fresh approach that embraces modern CSS capabilities while keeping the developer experience we love.

The Problem with Current Animations

Let's be honest - @angular/animations has been showing its age. Here's what's been bothering developers:

• Heavy bundle impact: 60kb of JavaScript just for animations

• No hardware acceleration: Animations run in JavaScript instead of leveraging the GPU

• Angular-only skills: The API doesn't translate to other frameworks or vanilla web development

• Third-party integration pain: Want to use GSAP or Anime.js? Good luck with that.

Enter the New Champions: animate.in and animate.out

The Angular team is introducing two new native framework features that will revolutionize how we animate elements entering and leaving the DOM.

The Sweet Syntax

<!-- CSS Classes (Simple and Clean) -->
<my-component animate.out="fade-out" />
<my-component [animate.in]="dynamicAnimationClasses" />

<!-- JavaScript Functions (For the Power Users) -->
<my-component (animate.out)="customExitAnimation($event)" />
<my-component (animate.in)="handleEntryAnimation($event)" />

Why This Matters

animate.out solves the biggest pain point in CSS animations - you can't easily animate an element out of the DOM because... well, once it's removed, it's gone! This feature delays element removal until your animation completes.

animate.in provides symmetry and consistency, automatically removing CSS classes when animations finish. While CSS now has @starting-styles for this, having both features creates a cohesive API.

Real-World Examples

CSS-Based Animations

<div class="card" 
     animate.in="slide-in-from-left"
     animate.out="fade-out-scale">
  <h3>I animate beautifully!</h3>
</div>

.slide-in-from-left {
  animation: slideIn 0.3s ease-out;
}

.fade-out-scale {
  animation: fadeOutScale 0.25s ease-in;
}

Third-Party Library Integration

// GSAP Animation
animateWithGSAP = (event: AnimationEvent) => {
  gsap.to(event.element, {
    rotation: 360,
    scale: 0,
    duration: 0.5,
    ease: "back.in",
    onComplete() {
      event.animationComplete();
    }
  });
}

<div (animate.out)="animateWithGSAP($event)">
  Powered by GSAP!
</div>

What's Different About This Approach?

🚀 Performance First

• Native CSS animations with hardware acceleration

• Tree-shakeable and optimized

• No 60kb animation library dependency

🎯 Platform-Aligned

• Works with modern CSS features like @starting-styles

• Skills transfer to other frameworks and vanilla web dev

• Embraces web standards

🔧 Developer Experience

• Simple syntax that follows Angular conventions

• Works with CSS classes or JavaScript functions

• Host binding support for reusable animation directives

🧪 Testing-Friendly

• Animations can be disabled in test environments

• Maintains element lifecycle for reliable testing

The Great Naming Debate

The community is split on naming conventions:

• Team animate.in/out: Short, clear, and follows the dot notation pattern

• Team animate.enter/leave: More descriptive and aligns with existing animation terminology

The Angular team seems to be leaning toward animate.in and animate.out to maintain consistency with other dot-notation bindings like class. and style..

What This Means for Your Apps

Migration Path

The Angular team is creating comprehensive migration guides from @angular/animations to pure CSS. The old system will coexist during the transition period, so no rush!

Bundle Size Impact

Removing the animations package dependency could save you 60kb of JavaScript - that's significant for performance, especially on mobile devices.

Future-Proofing

As web standards evolve (hello, scoped view transitions!), this approach positions Angular to adopt new capabilities without major API changes.

Key Takeaways

1. @angular/animations is being deprecated - but not immediately removed

2. animate.in and animate.out are coming - built into the framework core

3. CSS-first approach - embrace modern web platform capabilities

4. Third-party library friendly - use GSAP, Anime.js, or whatever you prefer

5. Performance wins - hardware acceleration and smaller bundles

Try It Out

The Angular team has provided a StackBlitz prototype where you can experiment with the new features (CSS classes only for now).

Check the complete RFC here.

The Bottom Line

This RFC represents Angular's commitment to evolving with web standards while maintaining the developer experience that makes the framework special. By embracing CSS-native animations and providing escape hatches for complex scenarios, Angular is positioning itself for the next generation of web applications.

If you are interested in a guide on old Angular animations, I have a complete tutorial about it on YouTube.

Thanks for reading so far 🙏

I’d like to have your feedback, so please leave a comment, clap or follow. 👏

Spread the Angular love! 💜

If you liked it, share it among your community, tech bros and whoever you want! 🚀👥

Don't forget to follow me and stay updated: 📱

• 🔗 LinkedIn

• 📝 Medium

• 🎥 YouTube

• 🐦 Twitter

Thanks for being part of this Angular journey! 👋😁