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.

animation

Produces a reusable animation that can be invoked in another animation or sequence, by calling the useAnimation() function.

      
      animation(steps: AnimationMetadata | AnimationMetadata[], options: AnimationOptions = null): AnimationReferenceMetadata
    
Parameters
steps AnimationMetadata | AnimationMetadata[]

One or more animation objects, as returned by the animate() or sequence() function, that form a transformation from one state to another. A sequence is used by default when you pass an array.

options AnimationOptions

An options object that can contain a delay value for the start of the animation, and additional developer-defined parameters. Provided values for additional parameters are used as defaults, and override values can be passed to the caller on invocation.

Optional. Default is null.

Returns

AnimationReferenceMetadata: An object that encapsulates the animation data.

Usage notes

The following example defines a reusable animation, providing some default parameter values.

      
      var fadeAnimation = animation([
  style({ opacity: '{{ start }}' }),
  animate('{{ time }}',
  style({ opacity: '{{ end }}'}))
  ],
  { params: { time: '1000ms', start: 0, end: 1 }});
    

The following invokes the defined animation with a call to useAnimation(), passing in override parameter values.

      
      useAnimation(fadeAnimation, {
  params: {
    time: '2s',
    start: 1,
    end: 0
  }
})
    

If any of the passed-in parameter values are missing from this call, the default values are used. If one or more parameter values are missing before a step is animated, useAnimation() throws an error.