AnimationManager

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 calls: Array<TweenLite | TweenMax>;
    private delays: Array<TweenLite | TweenMax>;
    private intervals: Array<TweenLite | TweenMax>;

    constructor() {
        this.calls = [];
        this.delays = [];
        this.intervals = [];
        TweenLite.lagSmoothing(0, 0);
    }

    setTimeout(duration: number, callback: (...args: any[]) => void, ...args: any): TweenMax {
        let object = {progress: 0};
        let delay = TweenMax.to(object, duration/1000, {
            progress: 1,
            onComplete: callback,
            onCompleteParams: args
        });
        this.delays.push(delay);
        return delay;
    }

    clearTimeout(timeout: TweenMax): boolean {
        let id = this.delays.indexOf(timeout);
        if(~id) {
            this.delays.splice(id, 1)[0].kill();
            return true;
        }
        return false;
    }

    setInterval(duration: number, callback: (...args: any[]) => void, ...args: any[]): TweenMax {
        let object = {progress: 0};
        let interval = TweenMax.to(object, duration/1000, {
            progress: 1,
            repeat: -1,
            onRepeat: callback,
            onRepeatParams: args
        });
        this.intervals.push(interval);
        return interval;
    }

    clearInterval(interval: TweenMax): boolean {
        let id = this.intervals.indexOf(interval);
        if(~id) {
            this.intervals.splice(id, 1)[0].kill();
            return true;
        }
        return false;
    }

    liteAnimationTo(target: Object, duration: number, vars: TweenConfig): void {
        if (!target) {
            return;
        }
        this.calls.push(TweenLite.to(target, duration, vars));
    }

    maxAnimationTo(target: Object, duration: number, vars: TweenConfig): void {
        if (!target) {
            return;
        }
        this.calls.push(TweenMax.to(target, duration, vars));
    }

    maxAnimationFromTo(target: Object, duration: number,...