Options
All
  • Public
  • Public/Protected
  • All
Menu

Class Complex

Construct a complex 2D animation using a chained composition of any number of the following transforms:

  • scale
  • rotate
  • translate
  • skew

See ComponentOptions for a list of options that can be applied per transformation component.

Basic Usage

new Complex()
  .scale({ from: 0.5, to: 1, duration: 250 })
  .rotate({ from: -90, to: 0, delay: 250, duration: 500 })
  .get();

Hierarchy

Index

Constructors

constructor

Methods

abort

  • abort(): void

applyTo

  • applyTo(el: HTMLElement | HTMLElement[], options?: ApplyToOptions): Promise<void>
  • Apply this animation to an HTML element or array of HTML elements. Embeds a style element in the HTML document with the animations and keyframes, and then sets the CSS of the given HTML elements to use those animations.

    Parameters

    • el: HTMLElement | HTMLElement[]
    • Default value options: ApplyToOptions = {}

    Returns Promise<void>

    Promise that resolves once the animation is completed and the animation style removed. Infinite animations never resolve.

clear

  • clear(): this
  • Clears all components from the transformation chain.

    Returns this

deserialize

get

  • get<ReturnType>(type?: ReturnType, options?: KeyframeOptions): KeyframeReturnTypeMap[ReturnType]
  • Retrieve keyframes to embed as CSS or as an array of Animation Keyframe objects to use with Web Animation API.

    Type parameters

    Parameters

    Returns KeyframeReturnTypeMap[ReturnType]

    CSS or array of objects depending on the type given

remove

  • remove(index?: number): this
  • Removes a component from the transformation chain.

    Parameters

    • Optional index: number

      Remove transformation component at index; if omitted, all components are removed

    Returns this

rotate

scale

serialize

  • serialize(): any[]
  • Outputs the Complex composition to an array of component options that can be reloaded via deserialize. Useful for saving preset animations.

    Returns any[]

skew

translate

Static isSupported

  • isSupported(): boolean