Options
All
  • Public
  • Public/Protected
  • All
Menu

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 the Queue class should tide us over until such a day, that devs can use AnimationTimeline to create cool animations

beta

WIP

Hierarchy

  • Queue

Index

Constructors

constructor

Properties

animateInstances

animateInstances: Manager<number, Animate> = ...

Stores all Animate instances that are attached to the Queue

initialOptions

initialOptions: IAnimationOptions = {}

The initial options set in the constructor

mainInstance

mainInstance: Animate

The main Animate instance, it controls playback, speed, and generally cause the Timeline to move.

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

emitter

  • get emitter(): EventEmitter
  • The event emitter of the mainInstance

    Returns EventEmitter

maxDuration

  • get maxDuration(): number
  • set maxDuration(num: number): void
  • The maximum duration of the mainInstance

    Returns number

  • The maximum duration of the mainInstance

    Parameters

    • num: number

    Returns void

maxEndDelay

  • get maxEndDelay(): number
  • set maxEndDelay(num: number): void
  • The largest end delay out of the mainInstance

    Returns number

  • The largest end delay out of the mainInstance

    Parameters

    • num: number

    Returns void

maxSpeed

  • get maxSpeed(): number
  • set maxSpeed(num: number): void
  • The smallest speed out of the mainInstance

    Returns number

  • The smallest speed out of the mainInstance

    Parameters

    • num: number

    Returns void

minDelay

  • get minDelay(): number
  • set minDelay(num: number): void
  • The smallest delay out of the mainInstance

    Returns number

  • The smallest delay out of the mainInstance

    Parameters

    • num: number

    Returns void

options

  • The options from the mainInstance

    Returns IAnimationOptions

  • The options from the mainInstance

    Parameters

    Returns void

promise

  • The promise created by the mainInstance

    Returns Promise<Animate[]>

timelineOffset

  • get timelineOffset(): number
  • set timelineOffset(num: number): void
  • The timelineOffset of the mainInstance

    Returns number

  • The timelineOffset of the mainInstance

    Parameters

    • num: number

    Returns void

totalDuration

  • get totalDuration(): number
  • set totalDuration(num: number): void
  • The total duration of the mainInstance

    Returns number

  • The total duration of the mainInstance

    Parameters

    • num: number

    Returns void

Methods

add

  • Allows a user to add a new Animate instance to a Queue

    Parameters

    • options: IAnimationOptions | Animate = {}

      you can add an Animate instance by either using animation options or by adding a pre-existing Animate Instance.

    • timelineOffset: string | number = 0

      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

    Returns Queue

all

  • all(method: (animate?: Animate, index?: number) => void): Queue
  • Calls a method that affects all animations including the mainAnimation

    Parameters

    • method: (animate?: Animate, index?: number) => void
        • (animate?: Animate, index?: number): void
        • Parameters

          • Optional animate: Animate
          • Optional index: number

          Returns void

    Returns Queue

allInstances

  • allInstances(method: (animate?: Animate, index?: number) => void): Queue
  • Calls a method that affects all Animate instances excluding the mainInstance

    Parameters

    • method: (animate?: Animate, index?: number) => void
        • (animate?: Animate, index?: number): void
        • Parameters

          • Optional animate: Animate
          • Optional index: number

          Returns void

    Returns Queue

cancel

  • Cancels all Animations

    Returns Queue

catch

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

    Parameters

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

          • Optional reason: any

          Returns any

    Returns Queue

emit

  • Call all listeners within an event

    Parameters

    Returns Queue

finally

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

    Parameters

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

    Returns Queue

finish

  • Force complete all Animations

    Returns Queue

getCurrentTime

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

    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

is

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

    Parameters

    Returns boolean

off

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

    Parameters

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

    Returns Queue

on

  • on(events: string | object | string[] | TypeAnimationEvents[], callback?: object | TypeListenerCallback, scope?: object): Queue
  • Adds a listener for a given event

    Parameters

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

    Returns Queue

pause

  • Pause Animation

    Returns Queue

play

  • Play Animation

    Returns Queue

remove

  • Remove an Animate instance from the Queue using it's index in animateInstances

    Parameters

    • index: number

    Returns Animate

reset

  • Reset all Animations

    Returns Queue

reverse

  • Reverse Animation

    Returns Queue

setCurrentTime

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

    Parameters

    • time: number

    Returns Queue

setProgress

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

    Parameters

    • percent: number

    Returns Queue

setSpeed

  • setSpeed(speed?: number): Queue
  • Set the playback speed of an Animation

    Parameters

    • speed: number = 1

    Returns Queue

stop

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

    Returns void

then

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

toJSON

  • Returns the Animate options, as JSON

    Returns IAnimationOptions

updateTiming

  • Update the Queue's duration, endDelay, etc... based on the animateInstances

    Returns Queue

Generated using TypeDoc