(function(){
"use strict"
// Vector Trophy Animation
var vectorTrophy = {
// Trophy Timeline Animation
trophyTimeline:function() {
// vector elements
var vectorTipLeft = document.getElementById('Layer24_0_FILL'),
vectorTipright = document.getElementById('Layer23_0_FILL'),
vectorTipBottomRight = document.getElementById('Layer22_0_FILL'),
vectorTipBottomLeft = document.getElementById('Layer21_0_FILL'),
vectorshine = document.getElementById('Layer18_0_1_STROKES'),
inkTopGroup = document.getElementById('vectorInkTop'),
inkTopBall = document.getElementById('inkBall'),
middleShade = document.getElementById('Layer13_0_FILL'),
vHolder = document.getElementById('vHolder'),
vHolderBack = document.getElementById('vHolderBack'),
vectorShade = document.getElementById('vectorShadow'),
middleShade = document.getElementById('Layer13_0_FILL'),
vectorDuration = 1.4;
// top-left Diagonal timeline
var VectorTimeLineOne = new TimelineMax({yoyo: true, repeat: -1});
VectorTimeLineOne.fromTo(vectorTipLeft, vectorDuration, {transformOrigin: "80% 0%", scaleX: 0.7, skewX: -9, x: 4, y: 2, ease:Power0.easeOut}, {transformOrigin: "80% 10%", scaleX: 1.3, skewX: 9, x: 0, y: 2, ease:Power0.easeOut })
// top-right Diagonal timeline
var VectorTimeLineTwo = new TimelineMax({yoyo: true, repeat: -1});
VectorTimeLineTwo.fromTo(vectorTipright, vectorDuration, {transformOrigin: "0% 0%", scaleX: 1.3, skewX: -9, x: 2, y: 2, ease:Power0.easeOut }, {transformOrigin: "0% 0%", scaleX: 0.7, skewX: 9, x: -2, y: 2, ease:Power0.easeOut })
// bottom-left Diagonal timeline
var VectorTimeLineThree = new TimelineMax({yoyo: true, repeat: -1});
VectorTimeLineThree.fromTo(vectorTipBottomRight, vectorDuration, {transformOrigin: "0% 0%", scaleX: 0.7, skewX: 9, x: -2, y: 0, ease:Power0.easeOut }, {transformOrigin: "0% 0%", scaleX: 1.3, skewX: -9, x: 2, y: 0, ease:Power0.easeOut })
// bottom-right Diagonal timeline
var VectorTimeLineFour = new TimelineMax({yoyo: true, repeat: -1});
VectorTimeLineFour.fromTo(vectorTipBottomLeft, vectorDuration, {transformOrigin: "80% 10%", scaleX: 1.4, skewX: 9, x: -3, y: 0, ease:Power0.easeOut }, {transformOrigin: "80% 0%", scaleX: 0.7, skewX: -9, x: 1, y: 0, ease:Power0.easeOut })
// Vector Shine timeline
var VectorShineLine = new TimelineMax({yoyo: true, repeat: -1});
VectorShineLine.fromTo(vectorshine, vectorDuration, { x: -2, y: 0, skewX: -3, ease:Power0.easeOut }, { x: 2, y: 0, skewX: 3, ease:Power0.easeOut })
// Vector ink line timeline
var VectorTimeLineInkTop = new TimelineMax({yoyo: true, repeat: -1});
VectorTimeLineInkTop.fromTo(inkTopGroup, vectorDuration, {transformOrigin: "80% 0%", skewX: -6, x: -2, y: 6, ease:Power0.easeOut }, {transformOrigin: "80% 0%", skewX: 6, x: 2, y: 6, ease:Power0.easeOut });
// Vector ink ball timeline
var VectorTimeLineInkTopBall = new TimelineMax({yoyo: true, repeat: -1});
VectorTimeLineInkTopBall.fromTo(inkTopBall, vectorDuration, {transformOrigin: "80% 0%", x: -14, ease:Power0.easeOut }, {transformOrigin: "80% 0%", x: 14, ease:Power0.easeOut });
var middleShadeTimeLine = new TimelineMax({yoyo: true, repeat: -1});
middleShadeTimeLine.fromTo(middleShade, vectorDuration, {transformOrigin: "80% 0%", scaleX: 2.5, skewX: 0, x: -3, y: 0, ease:Power0.easeOut }, {transformOrigin: "80% 0%", scaleX: 1, skewX: 0, x: -2, y: 0, ease:Power0.easeOut });
var vHolderTimeLineOne = new TimelineMax({yoyo: true, repeat: -1});
vHolderTimeLineOne.fromTo(vHolder, vectorDuration, {transformOrigin: "80% 0%", x: -5, ease:Power0.easeOut}, {transformOrigin: "80% 10%", x: 5, ease:Power0.easeOut })
var vHolderBackTimeLine = new TimelineMax({yoyo: true, repeat: -1});
vHolderBackTimeLine.fromTo(vHolderBack, vectorDuration, {transformOrigin: "-40% 0%", scaleY:1.05, x: 7, y: -1, ease:Power0.easeOut}, {transformOrigin: "-40% 0%", scaleY:1.05, x: -7, y: -1, ease:Power0.easeOut })
var vectorBaseTimeLine = new TimelineMax({yoyo: true, repeat: -1});
vectorBaseTimeLine.fromTo(vectorGroup, 0.7, {y: 12, ease:Power0.easeOut}, {y: -6, ease:Power0.easeOut});
var vectorShadow = new TimelineMax({yoyo: true, repeat: -1});
vectorShadow.fromTo(vectorShade, 0.7, {transformOrigin: "10% 0%", scale:1.1, opacity: 0.2, ease:Power0.easeOut}, {transformOrigin: "40% 0%", scale: 1, opacity: 0.2, ease:Power0.easeOut});
},
// Wizzy Timeline Animation
wizzyTimeline:function() {
// wizzy elements
var wizzy = document.getElementById('wizzy'),
backWhizzy = document.getElementById('back-whizzy'),
frontWhizzy = document.getElementById('front-whizzy');
var WhizzLight = new TimelineMax({repeat:-1});
function WizzyGroupToBack() {
backWhizzy.style.transform = "rotateX(45deg)";
frontWhizzy.style.display = "none";
backWhizzy.style.display = "block";
}
function WizzyGroupToFront() {
frontWhizzy.style.transform = "rotateX(45deg)";
frontWhizzy.style.display = "block";
backWhizzy.style.display = "none";
}
TweenMax.set(wizzy, {drawSVG:"0% 0%", opacity: 1, transformOrigin: "70%, 10%", scale: 1.3 });
WhizzLight.to(wizzy, 0.01, {drawSVG:"0% 0%", onStart: WizzyGroupToBack, ease:Power0.easeOut});
WhizzLight.to(wizzy, 0.21, {drawSVG:"15% 10%", onComplete: WizzyGroupToBack , ease:Power0.easeOut});
WhizzLight.to(wizzy, 0.21, {drawSVG:"30% 20%", onStart: WizzyGroupToFront, ease:Power0.easeOut });
WhizzLight.to(wizzy, 0.21, {drawSVG:"40% 30%", onComplete: WizzyGroupToBack, ease:Power0.easeOut });
WhizzLight.to(wizzy, 0.21, {drawSVG:"50% 60%", onComplete: WizzyGroupToBack, ease:Power0.easeOut });
WhizzLight.to(wizzy, 0.21, {drawSVG:"60% 70%", onComplete: WizzyGroupToBack, ease:Power0.easeOut});
WhizzLight.to(wizzy, 0.21, {drawSVG:"70% 80%", onStart: WizzyGroupToFront, ease:Power0.easeOut});
WhizzLight.to(wizzy, 0.21, {drawSVG:"80% 90%", onStart: WizzyGroupToFront, ease:Power0.easeOut });
WhizzLight.to(wizzy, 0.21, {drawSVG:"90% 95%", onComplete: WizzyGroupToBack, ease:Power0.easeOut});
WhizzLight.to(wizzy, 0.11, {drawSVG:"100% 110%", onComplete: WizzyGroupToBack, ease:Power0.easeOut});
},
// Red Orb Timeline Animation
redOrbTimeline:function() {
var redBall = document.getElementById('red-ball');
var frontRed = document.getElementById('front-red-ball');
var backRed = document.getElementById('back-red-ball');
function toFrontRed() {
frontRed.style.display = "block";
backRed.style.display = "none";
}
function toBackRed() {
frontRed.style.display = "none";
backRed.style.display = "block";
}
TweenMax.set(redBall,{scale: 1.1});
var redBallTimeline = new TimelineMax({repeat:-1});
redBallTimeline.to(redBall, 1, {scale: 1.1, x: 180, onStart: toFrontRed, ease:Power0.easeOut });
redBallTimeline.to(redBall, 0.7, {scale: 0.9, x: 80, onStart: toBackRed, ease:Power0.easeOut });
redBallTimeline.to(redBall, 1, {scale: 0.9, x: -60, onStart: toBackRed, ease:Power0.easeOut });
redBallTimeline.to(redBall, 0.5, {scale: 1.1, x: 0, onStart: toFrontRed, ease:Power0.easeOut});
},
// Yellow Orb Timeline Animation
yellowOrbTimeline:function() {
var frontYellow = document.getElementById('front-yellow-ball');
var backYellow = document.getElementById('back-yellow-ball');
var yellowBall = document.getElementById('yellow-ball');
function toFrontYellow() {
frontYellow.style.display = "block";
backYellow.style.display = "none";
}
function toBackYellow() {
frontYellow.style.display = "none";
backYellow.style.display = "block";
}
TweenMax.set(yellowBall, {scale: 1.1, opacity: 0});
var yellowBallTimeline = new TimelineMax({delay: 1, repeat: -1, onStart: function(){
TweenMax.set(yellowBall, {scale: 1.1, opacity: 1});
}});
yellowBallTimeline.to(yellowBall, 1, {opacity:1, scale: 1, x: 230, onStart: toFrontYellow, ease:Power0.easeOut });
yellowBallTimeline.to(yellowBall, 0.7, {opacity:1 ,scale: 0.7, x: 80, onStart: toBackYellow, ease:Power0.easeOut });
yellowBallTimeline.to(yellowBall, 1, {opacity:1, scale: 0.7, x: -20, onStart: toBackYellow, ease:Power0.easeOut });
yellowBallTimeline.to(yellowBall, 0.5, {opacity:1, scale: 1, x: 0, onStart: toFrontYellow, ease:Power0.easeOut});
},
// Blue Orb Timeline Animation
blueOrbTimeline:function() {
var frontBlue = document.getElementById('front-blue-ball'),
backBlue = document.getElementById('back-blue-ball'),
blueBall = document.getElementById('blue-ball');
function toFrontBlue() {
frontBlue.style.display = "block";
backBlue.style.display = "none";
}
function toBackBlue() {
frontBlue.style.display = "none";
backBlue.style.display = "block";
}
TweenMax.set(blueBall, {scale: 1.1, opacity: 0});
var blueBallTimeline = new TimelineMax({delay: 2, repeat: -1, onStart: function(){
TweenMax.set(blueBall, {scale: 1.1, opacity: 1});
}});
blueBallTimeline.to(blueBall, 1, {opacity:1, scale: 1, x: 140, onStart: toFrontBlue, ease:Power0.easeOut });
blueBallTimeline.to(blueBall, 0.7, {opacity:1 ,scale: 0.7, x: 80, onStart: toFrontBlue, ease:Power0.easeOut });
blueBallTimeline.to(blueBall, 1, {opacity:1, scale: 0.7, x: -100, onStart: toBackBlue, ease:Power0.easeOut });
blueBallTimeline.to(blueBall, 0.5, {opacity:1, scale: 1, x: 0, onStart: toFrontBlue, ease:Power0.easeOut});
}
};
vectorTrophy.trophyTimeline();
vectorTrophy.wizzyTimeline();
vectorTrophy.redOrbTimeline();
vectorTrophy.yellowOrbTimeline();
vectorTrophy.blueOrbTimeline();
})();
!
