Stores all Animate instances that are attached to the Queue
The initial options set in the constructor
The main Animate instance, it controls playback, speed, and generally cause the Timeline to move.
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.
The event emitter of the mainInstance
The maximum duration of the mainInstance
The maximum duration of the mainInstance
The largest end delay out of the mainInstance
The largest end delay out of the mainInstance
The smallest speed out of the mainInstance
The smallest speed out of the mainInstance
The smallest delay out of the mainInstance
The smallest delay out of the mainInstance
The options from the mainInstance
The options from the mainInstance
The promise created by the mainInstance
The timelineOffset of the mainInstance
The timelineOffset of the mainInstance
The total duration of the mainInstance
The total duration of the mainInstance
Allows a user to add a new Animate instance to a Queue
you can add an Animate instance by either using animation options or by adding a pre-existing Animate Instance.
by default the timelineOffset is 0, which means the Animation will play in chronological order of when it was defined; a different value, specifies how many miliseconds off from the chronological order before it starts playing the Animation. You can also use absolute values, for exmple, if you want your animation to start at 0ms, setting timelineOffset to 0, or "0" will use relative offsets, while using "= 0" will use absolute offsets. Read more on relativeTo
Cancels all Animations
Catches error that occur in the this.promise
Promise
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
Returns the current time of the Main Animate Instance
Returns the current playing state
Returns the Animation progress as a fraction of the current time / duration * 100
Returns a boolean determining if the animate
instances playstate is equal to the playstate
parameter.
Removes a listener from an event
Adds a listener for a given event
Pause Animation
Play Animation
Remove an Animate instance from the Queue using it's index in animateInstances
Reset all Animations
Reverse Animation
Set the current time of the Main Animate Instance
Set the Animation progress as a value from 0 to 100
Set the playback speed of an Animation
Cancels & Clears all Animations
Fulfills the this.promise
Promise
Returns the Animate options, as JSON
Update the Queue's duration, endDelay, etc... based on the animateInstances
Generated using TypeDoc
Queues acts as a playback manager for a set of Animate instances. It is responsible for controlling the chronological order of Animate instances, as well as the general playback state of all Animate instances.
It's used like this,
import { Queue, Animate, CustomEasing } from "@okikio/animate"; new Queue({ // These options are passed to each Animate instance that is added to the Queue, // this is the only way to pass animation options to the Animate instance. target: ".div", // You don't set the Queue options at all, you set the animation options for each Animate instance, the Queue then automatically sets the Queues totalDuration, minDelay, etc... based on this, using the `.updateTimings()` method. duration: 1000, }) // You add Animate instances to a Queue using the `.add(AnimationOptions, TimelineOffset)` method (`.add()` is chainable) .add({ // You can set the animation options for each Animate instance, // these options are passed to the Animate instance when it's created. translateX: 500, scale: 2, // ... }) .add( new Animate({ translateX: CustomEasing([0, 500]) }), // The timeline offset states where relative to the other Animate instances to place the new Animate instance on the chronological timeline, // by default you can use string and numbers as relative timeline offsets, to use absolute timeline offsests you need to use this format "= number" e.g. `new Queue(...).add({ ... }, "= 0")`, start at absolute `0` (the beginning) of the Queue // NOTE: if you can use negative "relative" and "absolute" timeline offsets, so, "-50" and "= -50" are viable timeline offsets // Start at relative "50" (add "50") to the position of the last Animate instance in the Queues chronologial order 50) // You can also pass a function that returns an Animate instance .add((() => { let options = { width: 600, rotate: 45 }; return new Animate(options); })(), "= 50"); // Start at absolute "50" of the Queue (add "50" to the start of the Queue)
NOTE:
Queues
do not in any way replace the IAnimationOptions.timeline, it supplements it, with a format similar to animejs's timeline. As of the writing this documentations, devs are not yet able to interact with AnimationTimeline, in a way that create timeline like effects, aside from ScrollTimeline, thus, this theQueue
class should tide us over until such a day, that devs can useAnimationTimeline
to create cool animationsWIP