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.

group

Defines a list of animation steps to be run in parallel.

      
      group(steps: AnimationMetadata[], options: AnimationOptions = null): AnimationGroupMetadata
    
Parameters
steps AnimationMetadata[]

An array of animation step objects.

  • When steps are defined by style() or animate() function calls, each call within the group is executed instantly.
  • To specify offset styles to be applied at a later time, define steps with keyframes(), or use animate() calls with a delay value. For example:
      
      group([
  animate("1s", style({ background: "black" })),
  animate("2s", style({ color: "white" }))
])
    
options AnimationOptions

An options object containing a delay and developer-defined parameters that provide styling defaults and can be overridden on invocation.

Optional. Default is null.

Returns

AnimationGroupMetadata: An object that encapsulates the group data.

Usage notes

Grouped animations are useful when a series of styles must be animated at different starting times and closed off at different ending times.

When called within a sequence() or a transition() call, does not continue to the next instruction until all of the inner animation steps have completed.