This skill helps you generate Angular animations for smooth UI transitions, state changes, and interactive feedback following Angular animation best practices.

Basic Animation Template

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'app-animated-component',
  template: `
    <div [@fadeInOut]="isVisible ? 'visible' : 'hidden'">Content that fades in and out</div>
  `,
  animations: [
    trigger('fadeInOut', [
      state(
        'visible',
        style({
          opacity: 1,
          transform: 'translateY(0)',
        }),
      ),
      state(
        'hidden',
        style({
          opacity: 0,
          transform: 'translateY(-20px)',
        }),
      ),
      transition('visible <=> hidden', [animate('300ms ease-in-out')]),
    ]),
  ],
})
export class AnimatedComponent {
  isVisible = true;
}

Common Animation Patterns

Fade In/Out Animation

import { trigger, state, style, transition, animate } from '@angular/animations';

export const fadeInOutAnimation = trigger('fadeInOut', [
  state(
    'in',
    style({
      opacity: 1,
      transform: 'translateY(0)',
    }),
  ),
  state(
    'out',
    style({
      opacity: 0,
      transform: 'translateY(-10px)',
    }),
  ),
  transition('in <=> out', [animate('200ms ease-in-out')]),
]);

Slide Animation

import { trigger, state, style, transition, animate } from '@angular/animations';

export const slideInOutAnimation = trigger('slideInOut', [
  state(
    'in',
    style({
      transform: 'translateX(0)',
      opacity: 1,
    }),
  ),
  state(
    'out',
    style({
      transform: 'translateX(-100%)',
      opacity: 0,
    }),
  ),
  transition('in <=> out', [animate('300ms ease-in-out')]),
]);

Scale Animation

import { trigger, state, style, transition, animate } from '@angular/animations';

export const scaleInOutAnimation = trigger('scaleInOut', [
  state(
    'in',
    style({
      transform: 'scale(1)',
      opacity: 1,
    }),
  ),
  state(
    'out',
    style({
      transform: 'scale(0.8)',
      opacity: 0,
    }),
  ),
  transition('in <=> out', [animate('200ms ease-in-out')]),
]);

Bounce Animation

import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';

export const bounceInAnimation = trigger('bounceIn', [
  transition(':enter', [
    animate(
      '600ms ease-in',
      keyframes([
        style({ opacity: 0, transform: 'scale(0.3)', offset: 0 }),
        style({ opacity: 1, transform: 'scale(1.05)', offset: 0.5 }),
        style({ opacity: 1, transform: 'scale(0.9)', offset: 0.7 }),
        style({ opacity: 1, transform: 'scale(1)', offset: 1 }),
      ]),
    ),
  ]),
]);

Loading Spinner Animation

import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';

export const spinAnimation = trigger('spin', [
  state('spinning', style({ transform: 'rotate(0deg)' })),
  state('stopped', style({ transform: 'rotate(0deg)' })),
  transition('spinning => stopped', animate('0ms')),
  transition('stopped => spinning', [
    animate(
      '1s linear',
      keyframes([
        style({ transform: 'rotate(0deg)', offset: 0 }),
        style({ transform: 'rotate(360deg)', offset: 1 }),
      ]),
    ),
  ]),
]);

Route Transition Animations

Slide Route Animation

import { trigger, transition, style, query, animate, group } from '@angular/animations';

export const slideInAnimation = trigger('routeAnimations', [
  transition('* <=> *', [
    style({ position: 'relative' }),
    query(
      ':enter, :leave',
      [
        style({
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
        }),
      ],
      { optional: true },
    ),
    query(':enter', [style({ left: '100%' })], { optional: true }),
    group([
      query(':leave', [animate('300ms ease-out', style({ left: '-100%' }))], { optional: true }),
      query(':enter', [animate('300ms ease-out', style({ left: '0%' }))], { optional: true }),
    ]),
  ]),
]);

Fade Route Animation

import { trigger, transition, style, query, animate } from '@angular/animations';

export const fadeInAnimation = trigger('routeAnimations', [
  transition('* <=> *', [
    query(
      ':enter, :leave',
      [
        style({
          position: 'absolute',
          left: 0,
          width: '100%',
          opacity: 0,
          transform: 'translateY(50px)',
        }),
      ],
      { optional: true },
    ),
    query(':enter', [animate('600ms ease', style({ opacity: 1, transform: 'translateY(0)' }))], {
      optional: true,
    }),
  ]),
]);

List Animation

import { trigger, transition, style, animate, query, stagger } from '@angular/animations';

export const listAnimation = trigger('listAnimation', [
  transition('* <=> *', [
    query(
      ':enter',
      [
        style({ opacity: 0, transform: 'translateY(-20px)' }),
        stagger(50, [animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' }))]),
      ],
      { optional: true },
    ),
    query(
      ':leave',
      [
        stagger(50, [
          animate('300ms ease-in', style({ opacity: 0, transform: 'translateY(-20px)' })),
        ]),
      ],
      { optional: true },
    ),
  ]),
]);

Component Integration

Using Animations in Components

import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { fadeInOutAnimation, slideInOutAnimation } from './animations';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="dashboard">
      <div [@fadeInOut]="showContent ? 'in' : 'out'">
        <h2>Dashboard Content</h2>
        <p>This content fades in and out</p>
      </div>

      <button (click)="toggleContent()">Toggle Content</button>

      <div [@slideInOut]="showPanel ? 'in' : 'out'" class="side-panel">
        <h3>Side Panel</h3>
        <p>This panel slides in from the side</p>
      </div>
    </div>
  `,
  animations: [fadeInOutAnimation, slideInOutAnimation],
  styles: [
    `
      .dashboard {
        position: relative;
        padding: 20px;
      }

      .side-panel {
        position: absolute;
        top: 0;
        right: 0;
        width: 300px;
        height: 100%;
        background: #f8f9fa;
        padding: 20px;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
      }
    `,
  ],
})
export class DashboardComponent {
  showContent = signal(true);
  showPanel = signal(false);

  toggleContent() {
    this.showContent.update((value) => !value);
  }

  togglePanel() {
    this.showPanel.update((value) => !value);
  }
}

Advanced Animation Techniques

Animation Callbacks

import { Component, signal } from '@angular/core';
import { trigger, transition, style, animate, AnimationEvent } from '@angular/animations';

@Component({
  selector: 'app-animated-list',
  template: `
    <div
      [@listItemAnimation]="items.length"
      (@listItemAnimation.start)="onAnimationStart($event)"
      (@listItemAnimation.done)="onAnimationDone($event)"
    >
      <div *ngFor="let item of items; trackBy: trackByFn" [@itemAnimation]="item.state">
        {{ item.name }}
      </div>
    </div>
  `,
  animations: [
    trigger('itemAnimation', [
      transition(':enter', [
        style({ opacity: 0, transform: 'translateX(-100%)' }),
        animate('300ms ease-out'),
      ]),
      transition(':leave', [
        animate('300ms ease-in', style({ opacity: 0, transform: 'translateX(100%)' })),
      ]),
    ]),
  ],
})
export class AnimatedListComponent {
  items = signal<Item[]>([]);

  onAnimationStart(event: AnimationEvent) {
    console.log('Animation started:', event);
  }

  onAnimationDone(event: AnimationEvent) {
    console.log('Animation completed:', event);
  }

  trackByFn(index: number, item: Item) {
    return item.id;
  }
}

Animation Builder (Programmatic Animations)

import { Component, ElementRef, inject } from '@angular/core';
import { AnimationBuilder, style, animate } from '@angular/animations';

@Component({
  selector: 'app-programmatic-animation',
  template: '<div #animatedElement>Animated Element</div>',
})
export class ProgrammaticAnimationComponent {
  private animationBuilder = inject(AnimationBuilder);
  private elementRef = inject(ElementRef);

  animateElement() {
    const element = this.elementRef.nativeElement.querySelector('#animatedElement');
    const animation = this.animationBuilder.build([
      style({ opacity: 0 }),
      animate('500ms ease-in', style({ opacity: 1 })),
    ]);

    const player = animation.create(element);
    player.play();
  }
}

Performance Optimization

Animation Performance Tips

// Use transform and opacity for better performance
export const performantAnimation = trigger('performant', [
  transition(':enter', [
    style({
      opacity: 0,
      transform: 'translateY(-20px) scale(0.95)'
    }),
    animate('300ms ease-out', style({
      opacity: 1,
      transform: 'translateY(0) scale(1)'
    }))
  ])
]);

// Avoid animating layout properties like width, height, top, left
// Prefer transform: translateX/Y, scale, rotate
// Use will-change CSS property for better performance

.my-element {
  will-change: transform, opacity;
}

Testing Animations

import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
import { AnimatedComponent } from './animated.component';

describe('AnimatedComponent', () => {
  let component: AnimatedComponent;
  let fixture: ComponentFixture<AnimatedComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [AnimatedComponent],
    }).compileComponents();

    fixture = TestBed.createComponent(AnimatedComponent);
    component = fixture.componentInstance;
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should trigger animation when state changes', fakeAsync(() => {
    component.isVisible = true;
    fixture.detectChanges();

    // Wait for animation to complete
    tick(300);

    const element = fixture.nativeElement.querySelector('div');
    expect(element).toBeTruthy();
  }));
});

Key Principles

Performance First: Use transform and opacity for smooth animations
Accessibility: Respect user's motion preferences with prefers-reduced-motion
Progressive Enhancement: Animations should not break functionality
Consistent Timing: Use consistent duration and easing functions
Mobile Friendly: Consider performance on mobile devices
Semantic States: Use meaningful state names and transitions
Testing: Test animation triggers and completion callbacks

Browser Support

Modern Browsers: Full support for all animation features
IE11: Limited support, consider fallbacks
Mobile: Good support with hardware acceleration
Progressive Enhancement: Always provide fallbacks for older browsers

Integration with Universal Skills

This animation skill integrates seamlessly with other Universal Skills:

angular-component: Use animations in component templates
angular-directive: Create animation directives
angular-service: Manage animation state centrally
angular-testing: Test animation behaviors

Animations bring your Angular applications to life with smooth, professional transitions that enhance user experience and engagement! 🚀✨