GSAP TweenLite / TweenMax Animation example

Date: 2017-02-01
var w = window;

// Global tween variables
var TweenLite = w.TweenLite,
	TweenMax = w.TweenMax,
	TimelineMax = w.TimelineMax,
	Sine = w.Sine;

// To turn off RequestAnimationFrame:
TweenLite.ticker.useRAF(true);

// throttle back the frames-per-second to 30
TweenLite.ticker.fps(30);

// reduce lagSmoothing
TweenLite.lagSmoothing(500, 20);

var addtimeLineAnimation = function (tl, s) {
	if (s.set) {
		TweenMax.set(s.$e, s.set);
	}
	if (s.from) {
		tl.insert(TweenMax.fromTo(s.$e, s.duration / 1000, s.from, s.to), 0.2);
	} else {
		tl.insert(TweenMax.to(s.$e, s.duration / 1000, s.to), 0.2);
	}
};

var timeLineAnimate = function (anims, callback) {
	var tl = new TimelineMax({
		immediateRender: false,
		onComplete: function () {
			tl.kill();
			tl = null;
			setTimeout(function () {
				callback();
			}, 0);
		}
	});
	var i;
	for (i = 0; i < anims.length; i++) {
		addtimeLineAnimation(tl, anims[i]);
	}
	tl.pause();
	setTimeout(function () {
		if (tl) {
			tl.play();
		}
	}, 100);
};

var rotate3D = function ($e_new, $e_old, duration, property, reverse, callback) {
        var vertical = (property == 'rotationX');
        var radius = tools3d.getRadius($e_new, 4, vertical);
        var origin = '50% 50% ' + (-round100(radius)) + 'px';

        var degFrom = 90;
        var degTo = -90;

        if (reverse) {
            degFrom = degFrom * -1;
            degTo = degTo * -1;
        }

        var anims = [];
        var anim = null;
        if ($e_new) {
            $e_new.parent().css('transformStyle', 'preserve-3d');
            anim = {
                $e: $e_new,
                duration: duration,
                set: {
                    transformPerspective: 1000,
                    transformOrigin: origin,
                    backfaceVisibility: 'hidden',
                    opacity: limitOpacity(1),
                    transition: 'none',
                    zIndex: 10
                },
                to: {
                    zIndex: 30,
                    ease: Sine.easeOut
                }
            };
            anim.set[property] = degFrom; //.from[property]
            anim.to[property] = 0;
            anims.push(anim);
        }
        if ($e_old) {
            anim = {
                $e: $e_old,
                duration: duration,
                set: {
                    transformPerspective: 1000,
                    transformOrigin: origin,
                    backfaceVisibility: 'hidden',
                    transition: 'none',
                    opacity: limitOpacity(1),
                    zIndex: 20
                },
                to: {
                    ease: Sine.easeOut
                }
            };
            anim.set[property] = 0; //.from[property]
            anim.to[property] = degTo;
            anims.push(anim);
        }

        timeLineAnimate(anims, callback);
    };

6060cookie-checkGSAP TweenLite / TweenMax Animation example