Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

stagger

Use within an animation query() call to issue a timing gap after each queried item is animated.

      
      stagger(timings: string | number, animation: AnimationMetadata | AnimationMetadata[]): AnimationStaggerMetadata
    
Parameters
timings string | number

A delay value.

animation AnimationMetadata | AnimationMetadata[]

One ore more animation steps.

Returns

AnimationStaggerMetadata: An object that encapsulates the stagger data.

Usage notes

In the following example, a container element wraps a list of items stamped out by an ngFor. The container element contains an animation trigger that will later be set to query for each of the inner items.

Each time items are added, the opacity fade-in animation runs, and each removed item is faded out. When either of these animations occur, the stagger effect is applied after each item's animation is started.

      
      <!-- list.component.html -->
<button (click)="toggle()">Show / Hide Items</button>
<hr />
<div [@listAnimation]="items.length">
  <div *ngFor="let item of items">
    {{ item }}
  </div>
</div>
    

Here is the component code:

      
      import {trigger, transition, style, animate, query, stagger} from '@angular/animations';
@Component({
  templateUrl: 'list.component.html',
  animations: [
    trigger('listAnimation', [
    ...
    ])
  ]
})
class ListComponent {
  items = [];

  showItems() {
    this.items = [0,1,2,3,4];
  }

  hideItems() {
    this.items = [];
  }

  toggle() {
    this.items.length ? this.hideItems() : this.showItems();
   }
 }
    

Here is the animation trigger code:

      
      trigger('listAnimation', [
  transition('* => *', [ // each time the binding value changes
    query(':leave', [
      stagger(100, [
        animate('0.5s', style({ opacity: 0 }))
      ])
    ]),
    query(':enter', [
      style({ opacity: 0 }),
      stagger(100, [
        animate('0.5s', style({ opacity: 1 }))
      ])
    ])
  ])
])