Options
All
  • Public
  • Public/Protected
  • All
Menu

An animation library for the modern web, which. Inspired by animate plus, and animejs, @okikio/animate is a Javascript animation library focused on performance and ease of use.

Hierarchy

Index

Constructors

constructor

Properties

animations

animations: WeakMap<KeyframeEffect, Animation> = ...

A WeakMap of Animations

computedKeyframes

computedKeyframes: WeakMap<HTMLElement, TypeKeyFrameOptionsType> = ...

The keyframes for individual animations

A WeakMap that stores all the fully calculated keyframes for individual Animation instances.

Note: the computedKeyframes are changed to their proper Animation instance options, so, some of the names are different, and options that can't be computed are not present. E.g. translateX, skew, etc..., they've all been turned into the transform property.*

computedOptions

computedOptions: WeakMap<HTMLElement, TypeComputedOptions> = ...

The options for individual animations

A WeakMap that stores all the fully calculated options for individual Animation instances.

Note: the computedOptions are changed to their proper Animation instance options, so, some of the names are different, and options that can't be computed are not present. E.g. fillMode in the animation options is now just fill in the computedOptions.*

Note: keyframes are not included, both the array form and the object form; the options, speed, extend, padEndDelay, and autoplay animation options are not included

emitter

emitter: EventEmitter = ...

An event emitter

initialOptions

initialOptions: IAnimationOptions = {}

Stores the options for the current animation without the DefaultAnimationOptions

keyframeEffects

keyframeEffects: WeakMap<HTMLElement, KeyframeEffect> = ...

A WeakMap of KeyFrameEffects

mainAnimation

mainAnimation: Animation

Stores an animation that runs on the total duration of all the Animation instances, and as such it's the main Animation.

mainElement

mainElement: HTMLElement

The Element the mainAnimation runs on

mainkeyframeEffect

mainkeyframeEffect: KeyframeEffect

The Keyframe Effect for the mainAnimation

maxDuration

maxDuration: number = 0

The largest duration out of all Animation's

maxEndDelay

maxEndDelay: number = 0

The largest end delay out of all Animation's

maxSpeed

maxSpeed: number = ...

The fastest speed out of all Animation's

minDelay

minDelay: number = ...

The smallest delay out of all Animation's

options

options: IAnimationOptions = {}

Stores the options for the current animation with the DefaultAnimationOptions

Read more about the DefaultAnimationOptions

promise

promise: Promise<Animate[]>

Returns a promise that is fulfilled when the mainAnimation is finished

properties

properties: object = {}

The properties to animate

targetIndexes

targetIndexes: WeakMap<Node, number> = ...

The indexs of target Elements in Animate

targets

targets: Manager<number, Node> = ...

The list of Elements to Animate

timelineOffset

timelineOffset: number = 0

The timelineOffset of the current Animate instance

totalDuration

totalDuration: number = 0

The total duration of all Animation's

totalDurationOptions

totalDurationOptions: TypeComputedOptions = {}

The computed options that are used for the total duration

visibilityPlayState

visibilityPlayState: TypePlayStates

Store the last remebered playstate before page was hidden

Static FRAME_RATE

FRAME_RATE: number = 60

Specifies the maximum number of times per second the "update" event fires.

Static Protected FRAME_START_TIME

FRAME_START_TIME: number = 0

Stores frame start time to ensure framerates are met

Static RUNNING

RUNNING: Set<Animate> = ...

Stores all currently running instances of the Animate Class that are actively using requestAnimationFrame to check progress, it's meant to ensure you don't have multiple instances of the Animate Class creating multiple requestAnimationFrames at the same time this can cause performance hiccups

Static animationFrame

animationFrame: number

Stores request frame calls

Static pauseOnPageHidden

pauseOnPageHidden: Boolean = true

Tells all animate instances to pause when the page is hidden

Accessors

[toStringTag]

  • get [toStringTag](): string
  • The Symbol.toStringTag well-known symbol is a string valued property that is used in the creation of the default string description of an object. It is accessed internally by the Object.prototype.toString() method.

    Returns string

Methods

add

  • Adds a target to the Animate instance, and update the animation options with the change

    Note: KeyframeEffect support is really low, so, I am suggest that you avoid using the add method, until browser support for KeyframeEffect.updateTiming(...) and KeyframeEffefct.setKeyframes(...) is better

    Parameters

    • target: HTMLElement

    Returns Animate

all

  • all(method: (animation?: Animation, target?: HTMLElement) => void): Animate
  • Calls a method that affects all animations including the mainAnimation

    Parameters

    • method: (animation?: Animation, target?: HTMLElement) => void
        • (animation?: Animation, target?: HTMLElement): void
        • Parameters

          • Optional animation: Animation
          • Optional target: HTMLElement

          Returns void

    Returns Animate

allAnimations

  • allAnimations(method: (animation?: Animation, target?: HTMLElement) => void): Animate
  • Calls a method that affects all animations excluding the mainAnimation

    Parameters

    • method: (animation?: Animation, target?: HTMLElement) => void
        • (animation?: Animation, target?: HTMLElement): void
        • Parameters

          • Optional animation: Animation
          • Optional target: HTMLElement

          Returns void

    Returns Animate

Protected beginEvent

  • beginEvent(): void
  • Register the begin event

    Returns void

cancel

  • Cancels all Animations

    Returns Animate

catch

  • catch(onRejected: (reason?: any) => any): Animate
  • Catches error that occur in the this.promise Promise

    Parameters

    • onRejected: (reason?: any) => any
        • (reason?: any): any
        • Parameters

          • Optional reason: any

          Returns any

    Returns Animate

commitStyles

  • Commits the end styling state of an animation to the element being animated, even after that animation has been removed. It will cause the end styling state to be written to the element being animated, in the form of properties inside a style attribute. Learn more on MDN

    Returns Animate

Protected createAnimations

  • createAnimations(param: { arrOfComputedOptions: any; oldCSSProperties: any; oncancel: any; onfinish: any; padEndDelay: any; persist?: boolean; timeline?: any }, len: number): void
  • Creates animations out of an array of computed options

    Parameters

    • param: { arrOfComputedOptions: any; oldCSSProperties: any; oncancel: any; onfinish: any; padEndDelay: any; persist?: boolean; timeline?: any }
      • arrOfComputedOptions: any
      • oldCSSProperties: any
      • oncancel: any
      • onfinish: any
      • padEndDelay: any
      • Optional persist?: boolean
      • Optional timeline?: any
    • len: number

    Returns void

Protected createArrayOfComputedOptions

  • Returns an array of computed options

    Parameters

    Returns object | Keyframe[] | TypeGeneric[]

emit

  • Call all listeners within an event

    Parameters

    Returns Animate

finally

  • finally(onFinally: () => any): Animate
  • If you don't care if the this.promise Promise has either been rejected or resolved

    Parameters

    • onFinally: () => any
        • (): any
        • Returns any

    Returns Animate

finish

  • Force complete all Animations

    Returns Animate

getAnimation

  • getAnimation(target: HTMLElement): Animation
  • Get a specific Animation from an Animate instance

    Parameters

    • target: HTMLElement

    Returns Animation

getCurrentTime

  • getCurrentTime(): number
  • Returns the current time of the Main Animation

    Returns number

getPlayState

  • Returns the current playing state

    Returns TypePlayStates

getProgress

  • getProgress(): number
  • Returns the Animation progress as a fraction of the current time / duration * 100

    Returns number

getSpeed

  • getSpeed(): number
  • Return the playback speed of the animation

    Returns number

getTiming

  • Returns the timings of an Animation, given a target E.g. { duration, endDelay, delay, iterations, iterationStart, direction, easing, fill, etc... }

    Parameters

    • target: HTMLElement

    Returns TypeComputedAnimationOptions

is

  • Returns a boolean determining if the animate instances playstate is equal to the playstate parameter.

    Parameters

    Returns boolean

loop

  • Represents an Animation Frame Loop

    Returns Animate

newPromise

  • Returns a new Promise that is resolved when the animation finishes

    Returns Promise<Animate[]>

off

  • off(events: string | object | string[] | TypeAnimationEvents[], callback?: object | TypeListenerCallback, scope?: object): Animate
  • Removes a listener from an event

    Parameters

    • events: string | object | string[] | TypeAnimationEvents[]
    • Optional callback: object | TypeListenerCallback
    • Optional scope: object

    Returns Animate

on

  • Adds a listener for a given event

    Parameters

    • events: string | object | string[] | TypeAnimationEvents[]
    • Optional callback: object | TypeListenerCallback
    • Optional scope: object

    Returns Animate

onVisibilityChange

  • onVisibilityChange(): void
  • document visibilitychange event handler

    Returns void

pause

  • Pause Animation

    Returns Animate

persist

  • Explicitly persists an animations final state it's similar to commitStyles except it doesn't care if the animation is filling or not. It does the exact same thing IAnimationOptions.persist does, except it's in function form.

    Warning: This is different MDN Animation.persist, this keeps the final state of CSS during the animation, while MDN Animation.persist, tells the browser to not automatically remove Animations.

    Returns Animate

play

  • Play Animation

    Returns Animate

remove

  • remove(target: HTMLElement): Animate
  • Removes a target from an Animate instance, and update the animation options with the change

    Note: KeyframeEffect support is really low, so, I am suggest that you avoid using the remove method, until browser support for KeyframeEffect.updateTiming(...) and KeyframeEffefct.setKeyframes(...) is better

    Parameters

    • target: HTMLElement

    Returns Animate

removeTarget

  • removeTarget(target: HTMLElement): Animate
  • Removes a target from an Animate instance

    Note: it doesn't update the current running options, you need to use the Animate.prototype.remove(...) method if you want to also update the running options

    Parameters

    • target: HTMLElement

    Returns Animate

reset

  • Reset all Animations

    Returns Animate

reverse

  • Reverse Animation

    Returns Animate

setCurrentTime

  • setCurrentTime(time: number): Animate
  • Set the current time of the Main Animation

    Parameters

    • time: number

    Returns Animate

setProgress

  • setProgress(percent: number): Animate
  • Set the Animation progress as a value from 0 to 100

    Parameters

    • percent: number

    Returns Animate

setSpeed

  • Set the playback speed of an Animation

    Parameters

    • speed: number = 1

    Returns Animate

stop

  • stop(): void
  • Cancels & Clears all Animations

    Returns void

stopLoop

  • Cancels animation frame

    Returns Animate

then

  • then(onFulfilled?: (value?: any) => any, onRejected?: (reason?: any) => any): Animate
  • Fulfills the this.promise Promise

    Parameters

    • Optional onFulfilled: (value?: any) => any
        • (value?: any): any
        • Parameters

          • Optional value: any

          Returns any

    • Optional onRejected: (reason?: any) => any
        • (reason?: any): any
        • Parameters

          • Optional reason: any

          Returns any

    Returns Animate

toJSON

  • Returns the Animate options, as JSON

    Returns IAnimationOptions

updateOptions

  • Update the options for all targets

    Note: KeyframeEffect support is really low, so, I am suggest that you avoid using the updateOptions method, until browser support for KeyframeEffect.updateTiming(...) and KeyframeEffefct.setKeyframes(...) is better

    Parameters

    Returns void

Static cancelFrame

  • cancelFrame(): void
  • Cancels animationFrame

    Returns void

Static requestFrame

  • requestFrame(time?: number): void
  • Calls requestAnimationFrame for each running instance of Animate. Often the "update" event is used for heavy animations that the browser can't handle natively via WAAPI, or for keeping track of the progress of Animations, for those use cases, using a full 60fps or 120fps is not nessecary, you can force a maximum constant framerate by setting Animate.FRAME_RATE to the framerate you wish, by default it's 60 frames per second

    Parameters

    • time: number = 0

    Returns void

Generated using TypeDoc