Home / animate / api / methods-and-properties

Methods & properties

mainAnimation: Animation

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

targetIndexes: WeakMap<Node, number>

The indexs of target Elements in Animate

keyframeEffects: WeakMap<HTMLElement, KeyframeEffect>

A WeakMap of KeyFrameEffects

computedOptions: WeakMap<HTMLElement, TypeComputedOptions>

The computed 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 tions 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

animations: WeakMap<KeyframeEffect, Animation>

A WeakMap of Animations

computedKeyframes: WeakMap<HTMLElement, TypeKeyFrameOptionsType> = new WeakMap()

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.

minDelay: number

The smallest delay out of all Animation’s, it is zero by default.

maxSpeed: number

The smallest speed out of all Animation’s, it is zero by default.

on(…), off(…), and emit(…)

These methods are inherited from @okikio/emitter. They control events and their listeners. The only difference is that by default their scopes are set to the instance of Animate.

import ASTRO_ESCAPED_LEFT_CURLY_BRACKET animate } from "@okikio/animate";

let anim = animate(ASTRO_ESCAPED_LEFT_CURLY_BRACKET
    target: ".div",
    easing: "linear",
    duration: (index) => 8000 + index * 200,
    loop: true,
    transform: ["rotate(0deg)", "rotate(360deg)"],
});

// For more info. on what you can do with the Event Emitter go to [https://www.npmjs.com/package/@okikio/emitter],
// I implemented the `on`, `off`, and `emit` methods from the Event Emitter on `Animate`.
anim.on("complete", () => ASTRO_ESCAPED_LEFT_CURLY_BRACKET
    console.log("completed");
})
    // This is a built in event
    .on("update", (progress) => ASTRO_ESCAPED_LEFT_CURLY_BRACKET
        console.log(
            "It runs every animation frame while the animation is running and not paused."
        );
        console.log(`Progress ${progress}%`); // Eg: Progress 10%
    })
    .on(ASTRO_ESCAPED_LEFT_CURLY_BRACKET
        play() ASTRO_ESCAPED_LEFT_CURLY_BRACKET
            console.log("When the animation is played");
        },
        pause() ASTRO_ESCAPED_LEFT_CURLY_BRACKET
            anim.emit("Cool");
            console.log("When the animation is paused");
        },
        cool() ASTRO_ESCAPED_LEFT_CURLY_BRACKET
            console.log("The cool event isn't a built in event, but it will fire when the Animation is paused.");
        }
    });

is(playstate: TypePlayStates)

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

play(), pause(), reverse(), and reset()

They are self explanatory, the play/pause methods play/pause animation, the reverse method causes all animation to reverse directions, while the reset method resets the progress of an animation.

The long list of Get Methods

getAnimation(target: HTMLElement): Animation

Allows you to select a specific animation from an element

getTiming(value: HTMLElement | Animation): EffectTiming | AnimationOptions

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

getCurrentTime(): number

Returns the current time of the animation of all elements

getProgress(): number

Returns the progress of the animation of all elements as a percentage between 0 to 100.

getPlayState(): string

Returns the current playing state, it can be "idle" | "running" | "paused" | "finished"

getSpeed(): number

Return the playback speed of the animation

The almost as long list of Set Methods; these methods are chainable

setCurrentTime(time: number)

Sets the current time of the animation

setProgress(percent: number)

Similar to setCurrentTime except it use a number between 0 and 100 to set the current progress of the animation

setSpeed(speed: number = 1)

Sets the playback speed of an animation

then(…), catch(…), and finally(…)

They represent the then, catch, and finally methods of a Promise that is resolved when an animation has finished. It’s also what allows the use of the await/async keywords for resolving animations. The then method resolves to the Animations Options, which can then be passed to other Animate instances to create animations with similar properties. Then, catch, and finally are chainable, they return the Animate class.

toJSON()

An alias for options

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

Calls a method that affects all animations including the mainAnimation; the method only allows the animation parameter

For example,

// This is a small snippet from the setCurrentTime() method
this.all((animation: Animation) => ASTRO_ESCAPED_LEFT_CURLY_BRACKET
    animation.currentTime = 5;
});

finish()

Forces all Animations to finish, and triggers the finish event.

cancel()

Cancels all Animations, it just runs the cancel method from each individual animation including the mainAnimation; it triggers the cancel event.

stop()

Cancels all Animations and de-references them, allowing them to be garbage collected in a rush. It also emits a stop event to alert you to the animation stopping.

The stop method is not chainable.

Warning: if you try to reference properties from the Animate class after stop has been called many things will break. The Animate class cannot and will not recover from stop, it is meant as a final trash run of animations, don’t use it if you think you may restart the animation.