A WeakMap of Animations
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.*
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
An event emitter
Stores the options for the current animation without the DefaultAnimationOptions
A WeakMap of KeyFrameEffects
Stores an animation that runs on the total duration of all the Animation instances, and as such it's the main Animation.
The Element the mainAnimation runs on
The Keyframe Effect for the mainAnimation
The largest duration out of all Animation's
The largest end delay out of all Animation's
The fastest speed out of all Animation's
The smallest delay out of all Animation's
Stores the options for the current animation with the DefaultAnimationOptions
Read more about the DefaultAnimationOptions
Returns a promise that is fulfilled when the mainAnimation is finished
The properties to animate
The indexs of target Elements in Animate
The list of Elements to Animate
The timelineOffset of the current Animate instance
The total duration of all Animation's
The computed options that are used for the total duration
Stores all updateListeners for the corresponding tweens, to avoid leaving unused listeners
Store the last remebered playstate before page was hidden
Specifies the maximum number of times per second the "update" event fires.
Stores frame start time to ensure framerates are met
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
Stores request frame calls
Tells all animate instances to pause when the page is hidden
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.
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
Calls a method that affects all animations including the mainAnimation
Calls a method that affects all animations excluding the mainAnimation
Register the begin event
Cancels all Animations
Catches error that occur in the this.promise Promise
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
Creates animations out of an array of computed options
Returns an array of computed options
Call all listeners within an event
If you don't care if the this.promise Promise has either been rejected or resolved
Force complete all Animations
Get a specific Animation from an Animate instance
Returns the current time of the Main Animation
Returns the current playing state
Returns the Animation progress as a fraction of the current time / duration * 100
Return the playback speed of the animation
Returns the timings of an Animation, given a target E.g. { duration, endDelay, delay, iterations, iterationStart, direction, easing, fill, etc... }
Returns a boolean determining if the animate instances playstate is equal to the playstate parameter.
Represents an Animation Frame Loop
Returns a new Promise that is resolved when the animation finishes
Removes a listener from an event
Adds a listener for a given event
document visibilitychange event handler
Pause Animation
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.
Play Animation
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
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
Reset all Animations
Reverse Animation
Set the current time of the Main Animation
Set the Animation progress as a value from 0 to 100
Set the playback speed of an Animation
Cancels & Clears all Animations
Cancels animation frame
Fulfills the this.promise Promise
Returns the Animate options, as JSON
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
Cancels animationFrame
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
Generated using TypeDoc
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