Options
All
  • Public
  • Public/Protected
  • All
Menu

Uses the change in opacity of empty elements (created by createTweenOptions) to interpolate the attributes of other elements

e.g.

import { AnimateAttributes } from "@okikio/animate";
import { interpolate } from "polymorph-js";

let startPath = "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z";
let endPath = "M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z";

// This is an svg path interpolate function
// If used in tandem with `AnimateAttributes`, you can create morphing animations
let morph = interpolate([startPath, endPath], {
     addPoints: 0,
     origin: { x: 0, y: 0 },
     optimize: "fill",
     precision: 3
});

// `AnimateAttributes` supports all Animation Options with some restrictions and things to note.
// 1. Callbacks - the first argument in Animation Options callbacks are set to the progress of the animation beteen 0 and 1, while the other arguments are moved 1 right

// So, animation options can look like this 
// `(progress: number, i: number, len: number, el: HTMLElement) => {
//   return progress;
// }

// 2. Custom easing by default - `easing`, `decimal`, `numPoints`, etc... from `CustomEasing` are supported, meaning you can use any easing function you want, including `spring`, etc... without calling `CustomEasing` on the property you want to apply custom easing to
// 3. You can use `.updateOptions(...)` to update the animation options of tweens

new AnimateAttributes({
     target: "svg path",
     d: progress => morph(progress)
});

You can use tweenAttr as a fast way to create new instances of AnimateAttributes

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

updateListeners

updateListeners: Manager<number, TypeListenerCallback> = ...

Stores all updateListeners for the corresponding tweens, to avoid leaving unused listeners

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 AnimateAttributes

all

  • all(method: (animation?: Animation, target?: HTMLElement) => void): AnimateAttributes
  • 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 AnimateAttributes

allAnimations

  • allAnimations(method: (animation?: Animation, target?: HTMLElement) => void): AnimateAttributes
  • 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 AnimateAttributes

Protected beginEvent

  • beginEvent(): void

cancel

catch

  • Catches error that occur in the this.promise Promise

    Parameters

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

          • Optional reason: any

          Returns any

    Returns AnimateAttributes

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 AnimateAttributes

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

emit

finally

  • If you don't care if the this.promise Promise has either been rejected or resolved

    Parameters

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

    Returns AnimateAttributes

finish

getAnimation

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

    Parameters

    • target: HTMLElement

    Returns Animation

getCurrentTime

  • getCurrentTime(): number

getPlayState

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

newPromise

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

    Returns Promise<Animate[]>

off

on

  • Adds a listener for a given event

    Parameters

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

    Returns AnimateAttributes

onVisibilityChange

  • onVisibilityChange(): void

pause

persist

play

remove

  • 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 AnimateAttributes

removeTarget

  • 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 AnimateAttributes

reset

reverse

setCurrentTime

setProgress

setSpeed

stop

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

    Returns void

stopLoop

then

  • then(onFulfilled?: (value?: any) => any, onRejected?: (reason?: any) => any): AnimateAttributes
  • 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 AnimateAttributes

toJSON

updateOptions

Static cancelFrame

  • cancelFrame(): 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