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);
};
60600cookie-checkGSAP TweenLite / TweenMax Animation example