animationlink

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 = null): AnimationReferenceMetadata

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

Parameters

steps	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	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 noteslink

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 }});

      
        content_copy
      
      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 } })

      
        content_copy
      
      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.