var master = new TimelineMax(),
scene = document.getElementById("scene"),
mermen = ('#mermen'),
body = ("#iddle-body");
// infinite iddle movement
var infinite = TweenMax.to("#mermen-wrap", 1.5, {
y:20, repeat:-1, yoyo: true });
document.getElementById("startButton").addEventListener('click', clickedStart);
document.getElementById('option1').addEventListener('click', function(){clickOption(1)});
document.getElementById('option2').addEventListener('click', function(){clickOption(2)});
function clickedStart() {
TweenMax.set("#startButton", {display:"none"});
master.add(zeroScene(),'sceneZero');
master.add(firstScene(),'sceneOne');
}
function clickOption(option) {
TweenMax.set(".text-1", {display:"none"});
TweenMax.set(".options-wrap", {display:"none"});
TweenMax.set(".option"+option+"-text", {display:"block"});
master.add(secondScene(option),'sceneTwo');
}
function zeroScene() {
var tl0 = new TimelineMax(),
$welcome = document.querySelector(".welcome"),
splitWelcome = new SplitText($welcome, {type:"words,chars"}),
welcomeChars = splitWelcome.chars;
TweenMax.set(".copy", {visibility:"visible"});
TweenMax.set(".svg-wrapper", {display:"block"});
TweenMax.set(".welcome", {display:"block"});
tl0.add("start");
tl0.from(".circ-in", 1, {scale:0, transformOrigin:"50% 50%", ease:Circ.easeIn}, "start+=1");
tl0.staggerFrom(welcomeChars, 1.2, {opacity:0, scale:0.5, y:30, transformOrigin:"50% 50%", ease:Bounce.easeOut}, 0.08, "start+=.5");
tl0.to(".circ-in", 1, {scale:100, transformOrigin:"50% 50%", ease:Circ.easeIn}, "-=.25");
tl0.to(".welcome", 1, {opacity: 0, ease:Circ.easeIn}, "-=1");
tl0.set(".welcome", {display:"none"});
tl0.set(".text-1, .options-wrap", {display:"block"});
tl0.eventCallback("onComplete", endSceneZero);
return tl0;
}
function endSceneZero() {
TweenMax.to("#bank1", 6, {
bezier: {
type: "soft",
values: [
{x: 0, y: 0},
{x: -50,y: 25},
{x: -100,y: 40},
{x: -150,y: 10},
{x: -200,y: 35},
{x: -250,y: 5},
{x: -300,y: -15},
{x: -350,y: 30},
{x: -450,y: -10}],
},ease: Linear.easeNone}, "+2");
}
function clicked() {
master.add(firstScene(),'sceneOne');
master.add(secondScene(),'sceneTwo');
}
function endSceneTwo() {
TweenMax.set(".option1-text, .option2-text", {display:"none"});
TweenMax.set(".text-2", {display:"block"});
master.add(thirdScene(),'sceneThree');
}
function firstScene() {
var tl1 = new TimelineMax(),
$text1 = document.querySelectorAll(".text-1"),
splitText1 = new SplitText($text1, {type:"words,chars"}),
text1Chars = splitText1.chars;
tl1.to(body, .5, {morphSVG:{shape: "#swimming-body", shapeIndex:21},ease:Circ.easeOut});
tl1.to(mermen, 3, {
bezier: {
type: "soft",
values: [
{x: 0, y: 0},
{x: 100,y: 100},
{x: 300,y: 50},
{x: 500,y: 200},
{x: 700,y: 100},
{x: 1000,y: 80}],
autoRotate: ["x","y","rotation", 0]
},ease: Circ.easeInOut}, "-=.5");
tl1.staggerFrom(text1Chars, 1.2, {opacity:0, scale:0.5, y:30, transformOrigin:"50% 50%", ease:Bounce.easeOut}, 0.08, "-=1.5");
tl1.to(body, .5, {morphSVG:{shape: "#iddle-body", shapeIndex:21},ease: Circ.easeOut}, "-=.5");
tl1.from(".options-wrap", 1, {y:-300, skewY: -40, transformOrigin:"0 50%", ease:Bounce.easeOut}, "-=.5");
tl1.to(scene, 1.5, {
attr: { viewBox: '1000 300 1200 700' },
ease:Circ.easeOut
}, "-=2");
return tl1;
}
function secondScene(option) {
var tl2 = new TimelineMax(),
$text = document.querySelectorAll(".option"+option+"-text"),
splitText = new SplitText($text, {type:"words,chars"}),
textChars = splitText.chars;
tl2.to(body, .5, {morphSVG:{shape: "#swimming-body", shapeIndex:21},ease:Circ.easeOut});
tl2.staggerFrom(textChars, 1.2, {opacity:0, scale:0.5, y:30, transformOrigin:"50% 50%", ease:Bounce.easeOut}, 0.08, "-=1.5");
tl2.to(mermen, 3, {
bezier: {
type: "soft",
values: [
{x: 1000, y: 10},
{x: 1100,y: -30},
{x: 1300,y: -50},
{x: 1500,y: -200},
{x: 1700,y: -100},
{x: 2000,y: -80}],
autoRotate: true
},ease: Circ.easeInOut}, "-=2.5");
tl2.to(body, .5, {morphSVG:{shape: "#iddle-body", shapeIndex:21},ease: Circ.easeOut}, "-=.5");
tl2.to(scene, 1.5, {
attr: { viewBox: '2000 300 1200 700' },
ease:Circ.easeOut
}, "-=.5");
TweenMax.to("#bank3", 6, {
bezier: {
type: "soft",
values: [
{x: 0, y: 0},
{x: -50,y: 25},
{x: -100,y: 40},
{x: -150,y: 10},
{x: -200,y: 35},
{x: -250,y: 5},
{x: -300,y: -15},
{x: -350,y: 30},
{x: -450,y: -10}],
},ease: Linear.easeNone});
TweenMax.to("#bank-far", 12, {
bezier: {
type: "soft",
values: [
{x: 0, y: 0},
{x: -50,y: 25},
{x: -100,y: 40},
{x: -150,y: 10},
{x: -200,y: 35},
{x: -250,y: 5},
{x: -300,y: -15},
{x: -350,y: 30},
{x: -450,y: -10},
{x: -500,y: 0},
{x: -550,y: 20},
{x: -600,y: -5},
{x: -650,y: 15},
{x: -700,y: 35}],
},ease: Linear.easeNone});
tl2.eventCallback("onComplete", endSceneTwo);
return tl2;
}
function thirdScene() {
var tl3 = new TimelineMax(),
$text = document.querySelectorAll(".text-2"),
splitText = new SplitText($text, {type:"words,chars"}),
textChars = splitText.chars,
$text3 = document.querySelectorAll(".text-3"),
splitText3 = new SplitText($text3, {type:"words,chars"}),
textChars3 = splitText3.chars;
tl3.to(body, .5, {morphSVG:{shape: "#swimming-body", shapeIndex:21},ease:Circ.easeOut});
tl3.staggerFrom(textChars, 1.2, {opacity:0, scale:0.5, y:30, transformOrigin:"50% 50%", ease:Bounce.easeOut}, 0.08, "-=1.5");
tl3.to(mermen, 3, {
bezier: {
type: "soft",
values: [
{x: 2200, y: 10},
{x: 2400,y: -30},
{x: 2600,y: -50},
{x: 2800,y: -200},
{x: 3000,y: -100},
{x: 3100, y: -150},
{x: 3200,y: -200},
{x: 3300,y: -250},
{x: 3400,y: -320}],
autoRotate: true
},ease: Circ.easeInOut}, "-=2.5");
tl3.to(scene, 1.5, {
attr: { viewBox: '2800 0 1200 700' },
ease:Circ.easeOut
}, "-=1.5");
tl3.to(body, .5, {morphSVG:{shape: "#finish-body", shapeIndex:21},ease:Circ.easeOut});
tl3.to(mermen, .2, {rotation:20, scale:1.5, y: -475}, "-=.3");
tl3.set(".text-2", {display:"none"});
tl3.set(".text-3, .end-options", {display:"block"});
tl3.eventCallback("onComplete", endSceneThree);
tl3.staggerFrom(textChars3, 1.2, {opacity:0, scale:0.5, y:30, transformOrigin:"50% 50%", ease:Bounce.easeOut}, 0.08, "-=1.5");
tl3.from(".end-options", 1, {y:-300, skewY: -40, transformOrigin:"0 50%", ease:Bounce.easeOut}, "-=.5");
return tl3;
}
function endSceneThree() {
infinite.kill();
}
document.getElementById('bingo').addEventListener('click', function(){finish()});
document.getElementById('fail').addEventListener('click', function(){retry()});
function finish() {
TweenMax.set(".text-3, .end-options, .fail-text", {display:"none"});
TweenMax.set(".bingo-text, .finish-text", {display:"block"});
master.add(finishScene(),'finish');
}
function retry() {
TweenMax.set(".text-3", {display:"none"});
TweenMax.set(".fail-text", {display:"block"});
master.add(retryScene(),'retry');
}
function retryScene() {
var tl4 = new TimelineMax(),
$text = document.querySelectorAll(".fail-text"),
splitText = new SplitText($text, {type:"words,chars"}),
textChars = splitText.chars;
tl4.staggerFrom(textChars, 1, {opacity:0, scale:0.5, y:30, transformOrigin:"50% 50%", ease:Bounce.easeOut}, 0.08, "-=.25");
return tl4;
}
function finishScene() {
var tl4 = new TimelineMax(),
$text = document.querySelectorAll(".bingo-text"),
splitText = new SplitText($text, {type:"words,chars"}),
textChars = splitText.chars,
$textFinish = document.querySelectorAll(".finish-text"),
splitTextFinish = new SplitText($textFinish, {type:"words,chars"}),
textCharsFinish = splitTextFinish.chars;
tl4.staggerFrom(textChars, 1, {opacity:0, scale:0.5, y:20, transformOrigin:"50% 50%", ease:Bounce.easeOut}, 0.05, "-=.25");
tl4.to(scene, 1, {scale:0, transformOrigin:"50% 50%", ease:Circ.easeIn}, "-=.25");
tl4.staggerFrom(textCharsFinish, 1.2, {opacity:0, scale:0.5, y:30, transformOrigin:"50% 50%", ease:Bounce.easeOut}, 0.08, "-=.25");
return tl4;
}
!
