AnimationManager TypeScript

Animation manager powered by TweenMax. A test fiddle for the replacement of the generic Javascript setTimeout/setInterval functions

by Noncho Savov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<div id="app"><br/></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  text-align: center;
}

TypeScript

class AnimationsManager {
    
		private tweens: Array<TweenLite | TweenMax>;
    private timeouts: Array<TweenLite | TweenMax>;
    private intervals: Array<TweenLite | TweenMax>;

    private paused: boolean;
    /**
     * _Readonly_. Marking if the AnimationManager engine is paused or not.
     */
    get isPaused(): boolean {
        return this.paused;
    }

    /**
     * The object that dispatches a "tick" event each time the engine updates.
     * 
     * ticker.addEventListener("tick", myFunction);
     */
    public ticker: Object;

    /**
     * Class **Animation Manager**. Initializes a new instance of the class.
     * @constructor
     */
    constructor() {
        this.tweens = [];
        this.timeouts = [];
        this.intervals = [];
        this.ticker = TweenMax.ticker;
        // TweenLite.lagSmoothing is already activated by default, using a threshold of 500ms and an adjustedLag of 33ms,
        // which will compensate when 500ms or more elapsed between 2 ticks, and then make it act like only 33ms elapsed.
        // TweenLite.lagSmoothing(0, 0); // this line disables lagSmoothing.
    }

    private invokeCallback(...args: any[]): void {
        let callback = args[0];
        let params = args[1];
        let clear = args[2];
        let obj = args[3];
        if(params) {
            callback(params);
        } else {
            callback();
        }
        clear(obj);
        // shorter alternative:
        //args[1] ? args[0](args[1]) : args[0]();
        //args[2](args[3]);
    }

    /**
    * The **setTimeout()** method calls a function after a specified number of milliseconds.
    * @param {number} duration _Required_. The timeout period in milliseconds.
    * @param {function} callback _Required_. The function that will be executed.
    * @param {any|null} args _Optional_. Additional parameters to pass to the function.
    * @returns TweenMax object
    */
    setTimeout(duration: number, callback: (...args: any[]) => void,...