var samuraiHeadTL = new TimelineMax();
samuraiHeadTL
.to("body", 1, {
visibility: "visible"
})
.from(".samuraiHead", 1, {
y: "1000%",
display: "none"
})
.from(
".helmet",
1,
{
y: "-1000%",
autoAlpha: 0,
ease: Power4.easeOut
},
"armorForming"
)
.from(
".leftArmor",
1,
{
x: "-1000%",
autoAlpha: 0,
ease: Power4.easeOut
},
"armorForming"
)
.from(
".rightArmor",
1,
{
x: "1000%",
autoAlpha: 0,
ease: Power4.easeOut
},
"armorForming"
)
.set(".samuraiV", { css: { zIndex: "-250" } })
.fromTo(
".samuraiV",
1,
{
scale: "0",
rotationZ: "-10800deg",
x: "-1000%",
y: "-50%",
ease: Power4.easeOut
},
{
scale: "1.2",
rotationZ: "-1080deg",
x: "200%"
},
"-=.5"
)
.set(".samuraiV", { css: { zIndex: "35" } })
.to(".samuraiV", 0.5, {
scale: 1,
rotationZ: "0deg",
x: "0%",
y: "0%",
ease: Power4.easeOut
})
.from(".mouth", 1, {
autoAlpha: 0,
scale: 1.5,
y: "20%"
})
.set(".neckArmor", { css: { zIndex: "-5" } })
.from(".neckArmor", 1, {
y: "-40%",
autoAlpha: 0,
scale: 0
})
.to(
".rightEye",
0,
{
rotationZ: "-18deg",
skew: "-18deg"
},
"-=.75"
)
.to(
".leftEye",
0,
{
rotationZ: "18deg",
skew: "18deg"
},
"-=.75"
)
.from(
".eye",
1,
{
autoAlpha: 0,
rotationX: "-89deg",
ease: Bounce.easeOut
},
"-=.75"
)
.to(".eye", 1, {
rotationX: "45deg",
backgroundColor: "#f1c40f",
ease: Elastic.easeOut
})
.timeScale(1.5);
var samuraiBodyTL = new TimelineMax();
samuraiBodyTL
.from(".samuraiBody", 1, {
scale: 1.05,
display: "none"
})
.from(".samuraiLowerBody", 1, {
rotationX: "-90deg",
display: "none"
})
.to(
".coreCoverLeft",
0.5,
{
width: "0%",
right: "50%"
},
"coverMove"
)
.to(
".coreCoverRight",
0.5,
{
width: "0%",
onStart: function() {
document.getElementsByClassName("core")[0].className += " animated";
}
},
"coverMove"
)
.from(".backPlate.plate1", 1, {
y: "10",
scale: 0.8,
display: "none",
onStart: function() {
document.querySelector(".legAnimWrap").style.zIndex = 301;
document.querySelector(".armContainerLeft").style.zIndex = 301;
document.querySelector(".armContainerRight").style.zIndex = 301;
},
delay: 0.25,
ease: Power4.easeInOut
})
.from(
".backPlate.plate2",
1,
{
y: "-60%",
display: "none",
ease: Power4.easeInOut,
onStart: function() {}
},
"-=.25"
)
.from(".frontPlate.plate1", 1, {
y: "-0.25%",
onStart: function() {
document.querySelector(".legAnimWrap").style.zIndex = 298;
document.querySelector(".armContainerLeft").style.zIndex = 298;
document.querySelector(".armContainerRight").style.zIndex = 298;
},
display: "none",
scale: 1.11,
delay: 0.25,
ease: Power4.easeInOut
})
.from(
".frontPlate.plate2",
1,
{
y: "-60%",
display: "none",
ease: Power4.easeInOut
},
"-=.25"
)
.from(
".padLeft",
1,
{
x: "40%",
ease: Power4.easeInOut
},
"padMove"
)
.from(
".padRight",
1,
{
x: "-40%",
ease: Power4.easeInOut
},
"padMove"
)
.from(".penta", 1, {
rotationX: "90deg",
ease: Back.easeOut
})
.from(
".neck",
0.5,
{
scale: "0"
},
"-=.15"
)
.timeScale(2.2);
////ARM ANIMATION
var samuraiArmTL = new TimelineMax({
onComplete: function() {}
});
samuraiArmTL
.from(
".armContainerLeft",
1,
{
x: "-100%"
},
"initArms"
)
.from(
".armContainerRight",
1,
{
x: "100%"
},
"initArms"
)
.from(
".shoulderJoint",
1,
{
x: "-140%",
ease: Power4.easeInOut
},
"-=.75"
)
.from(
".upperArmGuard",
1,
{
y: "45%",
ease: Power4.easeInOut
},
"-=.75"
)
.from(
".armContainerLeft .elbowJoint",
1,
{
y: "180%",
ease: Bounce.easeInOut
},
"-=.75"
)
.from(
".armContainerRight .elbowJoint",
1,
{
y: "180%",
ease: Elastic.easeInOut
},
"-=.75"
)
.from(
".lowerArmGuard",
1,
{
y: "25%",
ease: Back.easeInOut
},
"-=.75"
)
.fromTo(
".shoulderJoint",
0.5,
{
rotationZ: "90deg",
ease: Power4.easeOut
},
{
rotationZ: "3deg"
}
)
.to(".shoulderJoint", 0.5, {
rotationZ: "30deg",
ease: Power4.easeInOut
})
.to(
".elbowJointFront",
1,
{
rotationZ: "35deg",
ease: Power4.easeInOut
},
"-=.75"
)
.from(
".fist",
0.5,
{
y: "1000%",
ease: Power4.easeOut,
display: "none"
},
"-=.15"
)
.from(".blade", 0.15, {
scale: 0
})
.timeScale(1);
samuraiLegTL = new TimelineMax({});
samuraiLegTL
.from(".samuraiLegs", 1, {
y: "600%",
display: "none"
})
.from(
".leftUpThigh",
1,
{
x: "-600%",
display: "none"
},
"upThigh"
)
.from(
".rightUpThigh",
1,
{
x: "600%",
display: "none"
},
"upThigh"
)
.from(".lowerThigh", 1, {
rotationX: "-90deg"
})
.from(
".shin",
1,
{
rotationX: "-90deg"
},
"-=0.5"
)
.fromTo(
".footWrapper",
1,
{
y: "-600%"
},
{
y: "300%"
},
"footdown"
)
.from(
".foot, .footConnector",
1,
{
display: "none"
},
"footdown"
)
.from(
".footLeft",
1,
{
rotationZ: "-90deg"
},
"footRotate"
)
.from(
".footRight",
1,
{
rotationZ: "90deg"
},
"footRotate"
)
.to(".footWrapper", 1, {
y: "0%"
})
.timeScale(1.5);
var toggle = false;
$(document).on("click", function() {
(toggle
? () => {
toggle = false;
samuraiArmTL.reverse();
samuraiBodyTL.reverse();
samuraiHeadTL.reverse();
samuraiLegTL.reverse();
}
: () => {
toggle = true;
samuraiArmTL.play();
samuraiBodyTL.play();
samuraiHeadTL.play();
samuraiLegTL.play();
})();
});
!
