$(document).ready(function() {
$("#pause").hide();
$("#resume").hide();
$("#restart").hide();
var master = new TimelineMax();
slider = $("#ctrl_slider"),
sliderValue = {
value: 0
};
slider.slider({
range: false,
min: 0,
max: 100,
step: .1,
start: function() {
master.pause();
},
slide: function(event, ui) {
master.progress(ui.value / 100);
},
stop: function() {
master.pause();
}
});
master.eventCallback("onUpdate", function() {
sliderValue.value = master.progress() * 100;
slider.slider(sliderValue);
$("#restart").hide();
$("#play").show();
});
master.eventCallback("onComplete", function() {
TweenMax.to(slider, 1, {
autoAlpha: 1
});
$("#play").hide();
$("#restart").show();
});
var playBtn = document.getElementById("play")
playBtn.onclick = function() {
master.paused(!master.paused());
$("#step0").hide();
$("#ctrl_slider").show();
playBtn.innerHTML = master.paused() ? "Play" : "Pause";
}
$("#ctrl_slider").mousedown(function() {
$("#play").html("Play");
});
$("#restart").click(function() {
master.play(0);
$(this).hide();
$("#play").show();
playBtn.innerHTML = master.paused() ? "Play" : "Pause";
});
var box1 = $(".animation1"),
column1 = $("#column-1"),
column2 = $("#column-2"),
backflush1 = $(".backflush-1"),
cgchangecolor = $(".cgchange"),
ecd = $(".ecd"),
fid = $(".fid"),
methanizer = $(".methanizer"),
svgCont = $("#svg-cont"),
h = [];
var json = [{
line1: "first"
}, {
line3: "first-out"
}, {
line4: "valve-1-rotate"
}, {
line5: "second"
}, {
line6: "fourth"
}, {
line7: "cg"
}, {
line8: "cg-column-1"
}, {
line9: "cg-column-2"
}, {
line10: "valve-1-rotate-back"
}, {
line11a: "column-1-flush-1a"
}, {
line11b: "column-1-flush-1b"
}, {
line12: "column-1-flush-2"
}, {
line13: "column-1-flush-3"
}, {
line14: "no-to-ecd"
}, {
line15: "valve-2-rotate"
}, {
line16: "valve-2-hide"
}, {
line17: "methane-to-fid"
}, {
line18: "valve-3-rotate"
}, {
line19: "valve-3-hide"
}, {
line20: "carbon-to-methane"
}, {
line21: "methane-to-fid-2"
}, {
line22: "sample-through"
}, {
slug1: "slug-1"
}, {
slug2: "slug-2"
}, {
slug3: "slug-3"
}, {
samplepush: "sample-push"
}, {
donthide: "push-show"
}];
$.each(json, function() {
$.each(this, function(name, value) {
window[name] = document.getElementsByClassName(value)
});
});
tl = new TimelineMax();
tl.timeScale(0.55);
tl.to("#step0", 0.5, {
autoAlpha: 1,
ease: Back.easeOut
});
tl.to(window, 3, {
scrollTo: {
y: 0
},
ease: Power2.easeOut
});
master.add(step1(), "Step1")
.add(step2(), "Step2")
.add(step3(), "Step3")
.add(step4(), "Step4")
.add(step5(), "Step5")
.add(step6(), "Step6")
.add(step7(), "Step7")
.add(step8(), "Step8")
.add(step9(), "Step9")
.add(step10(), "Step10")
.add(step11(), "Step11");
//second for loop programatically adds pauses after step 1...
/*for (i =2; i <8; i++){
eval("master.addPause('Step'+i+'', playPause)");
}*/
master.addPause("Step2", playPause)
.addPause("Step3", playPause)
.addPause("Step4", playPause)
.addPause("Step5", playPause)
.addPause("Step6", playPause)
.addPause("Step7", playPause)
.addPause("Step8", playPause)
.addPause("Step9", playPause)
.addPause("Step10", playPause)
.addPause("Step11", playPause);
master.pause();
function playPause() {
$("#play").html("Play");
}
function getHeight() {
if (window.innerHeight <= 320) {
h = window.innerHeight * 0.65;
} else if (window.innerHeight > 320 && window.innerHeight === 768 && window.innerWidth === 1024) {
h = window.innerHeight * 0.45;
} else {
h = window.innerHeight * 0.75;
}
return h;
}
function step0() {
tl = new TimelineMax();
tl.set("#step0", {
autoAlpha: 0
});
//Hide all buttons except for first initially so we can make them visibile later through onComplete callbacks
return tl;
}
function step1() {
text = $("#step1");
tl = new TimelineMax();
tl.timeScale(0.55)
.to(text, 0.5, {
autoAlpha: 1,
ease: Back.easeOut
})
.set(line1, {
visibility: "visible"
})
.staggerFromTo(line1, 0.5, {
drawSVG: "0%"
}, {
drawSVG: "100%"
}, 0.5)
.to(text, 0.75, {
top: "-=100%"
}, 5)
return tl;
}
function step2() {
text = $("#step2");
tl = new TimelineMax();
tl.timeScale(0.4)
.to(text, 0.5, {
autoAlpha: 1,
ease: Back.easeOut
})
.to(line3, 1, {
drawSVG: "0%"
}, "v-1-rotate")
.set(line4, {
visibility: "visible"
}, "v-1-rotate")
.from(line4, 1, {
drawSVG: "0%"
}, "v-1-rotate")
.to(text, 0.75, {
top: "-=100%"
}, 2)
return tl;
}
function step3() {
text = $("#step3");
tl = new TimelineMax();
tl.timeScale(0.55)
.to(text, 0.5, {
autoAlpha: 1,
ease: Back.easeOut
})
.to(line22, 0.01, {
visibility: "visible"
})
.staggerFromTo(line22, 1, {
drawSVG: "0%",
ease: Power4.easeInOut
}, {
drawSVG: "100%",
ease: Power4.easeInOut
}, 0.45)
.to(line7, 0.01, {
visibility: "visible"
})
.to(donthide, 0.01, {
visibility: "visible"
}, "carrier-in")
.to(line1, 0.01, {
visibility: "hidden"
}, "carrier-in")
.staggerFromTo(line7, 1, {
drawSVG: "0%",
ease: Power4.easeInOut
}, {
drawSVG: "100%",
ease: Power4.easeInOut
}, 0.45, "carrier-in")
.to(samplepush, 0.01, {
visibility: "visible"
}, "carrier-in")
.staggerFromTo(samplepush, 1, {
drawSVG: "0% 100%",
ease: Power4.easeInOut
}, {
drawSVG: "100% 100%",
ease: Power4.easeInOut
}, 0.45, "carrier-in+=1.75")
.staggerFromTo(line22, 1, {
drawSVG: "0% 100%",
ease: Power4.easeInOut
}, {
drawSVG: "100% 100%",
ease: Power4.easeInOut
}, 0.45, "carrier-in+=2")
.to(text, 0.75, {
top: "-=100%"
}, 7);
return tl;
}
function step4() {
text = $("#step4");
tl = new TimelineMax();
tl.timeScale(0.55)
.to(text, 0.5, {
autoAlpha: 1,
ease: Back.easeOut
})
.set([column1], {
fill: "#4E8AF4"
})
.to([column1], 1, {
fill: "#ED3B41",
repeat: 2
})
.to([column1], 1.5, {
fill: "#4E8AF4"
})
.to(text, 0.75, {
top: "-=100%"
}, 6);
return tl;
}
function step5() {
text = $("#step5");
tl = new TimelineMax();
tl.timeScale(0.55)
.to(text, 0.5, {
autoAlpha: 1,
ease: Back.easeOut
})
.set(slug1, {
visibility: "visible"
})
.staggerFromTo(slug1, 1, {
drawSVG: "0%",
ease: Power4.easeInOut
}, {
drawSVG: "100%",
ease: Power4.easeInOut
}, 0.45)
.staggerFromTo(slug1, 1, {
drawSVG: "0 100%",
ease: Power4.easeInOut
}, {
drawSVG: "100% 100%",
ease: Power4.easeInOut
}, 0.45, "slug1")
.set(slug2, {
visibility: "visible"
}, "slug1+=0.01")
.staggerFromTo(slug2, 1, {
drawSVG: "0%",
ease: Power4.easeInOut
}, {
drawSVG: "100%",
ease: Power4.easeInOut
}, 0.45, "slug1+=0.01")
.staggerFromTo(slug2, 1, {
drawSVG: "0 100%",
ease: Power4.easeInOut
}, {
drawSVG: "100% 100%",
ease: Power4.easeInOut
}, 0.45, "slug2")
.set(slug3, {
visibility: "visible"
}, "slug2+=0.01")
.staggerFromTo(slug3, 1, {
drawSVG: "0%",
ease: Power4.easeInOut
}, {
drawSVG: "100%",
ease: Power4.easeInOut
}, 0.45, "slug2+=0.01")
.staggerFromTo(slug3, 1, {
drawSVG: "0 100%",
ease: Power4.easeInOut
}, {
drawSVG: "100% 100%",
ease: Power4.easeInOut
}, 0.45, "slug3")
.staggerFromTo(slug2, 1, {
drawSVG: "0%",
ease: Power4.easeInOut
}, {
drawSVG: "100%",
ease: Power4.easeInOut
}, 0.45, "slug3+=0.01")
.to(text, 0.75, {
top: "-=100%"
}, 15);
return tl;
}
function step6() {
text = $("#step6");
tl = new TimelineMax();
tl.timeScale(0.55)
.to(text, 0.5, {
autoAlpha: 1,
ease: Back.easeOut
})
.set([column2], {
fill: "#3DC862"
})
.to([column2], 1, {
fill: "#4E8AF4",
repeat: 2
})
.to([column2], 1.5, {
fill: "#3DC862"
})
.to(text, 0.75, {
top: "-=100%"
}, 5);
return tl;
}
function step7() {
text = $("#step7");
tl = new TimelineMax();
tl.timeScale(0.55)
.to(text, 0.5, {
autoAlpha: 1,
ease: Back.easeOut
})
.to(line3, 0.5, {
drawSVG: "0%"
}, {
drawSVG: "100%"
}, 0.5, "v1-rotate-back")
.from(line3, 0, {
drawSVG: "0%"
}, 0.5, "v1-rotate-back")
.to(line3, 1, {
drawSVG: "100%",
stroke: "#000000"
}, 0.5, "v1-rotate-back")
.to(line4, 0.5, {
drawSVG: "100%"
}, {
drawSVG: "0%"
}, 0.5, "v1-rotate-back")
.from(line4, 0, {
drawSVG: "100%"
}, "v1-rotate-back")
.to(line4, 1, {
drawSVG: "0%"
}, 0.5, "v1-rotate-back")
.to(line10, 0.5, {
drawSVG: "100%"
}, {
drawSVG: "0%"
}, 0.5, "v1-rotate-back")
.from(line10, 0, {
drawSVG: "100%"
}, 0.5, "v1-rotate-back")
.to(line10, 1, {
drawSVG: "0%"
}, 0.5, "v1-rotate-back")
.to([backflush1], 1, {
stroke: "#000000"
}, 0.5, "v1-rotate-back")
.to([line4], 1, {
stroke: "#000000"
}, 0.5, "v1-rotate-back")
.set(line11a, {
visibility: "visible"
})
.staggerFromTo(line11a, 1, {
drawSVG: "0%",
ease: Power4.easeInOut
}, {
drawSVG: "100%",
ease: Power4.easeInOut
}, 0.45, "bf1")
.set(line12, {
visibility: "visible"
}, "bf1+=3.01")
.staggerFromTo(line12, 1, {
drawSVG: "0%",
ease: Power4.easeInOut
}, {
drawSVG: "100%",
ease: Power4.easeInOut
}, 0.45, "bf1+=3.01")
.staggerFromTo(line12, 1, {
drawSVG: "0 100%",
ease: Power4.easeInOut
}, {
drawSVG: "100% 100%",
ease: Power4.easeInOut
}, 0.5, "bf2")
.set(line11b, {
visibility: "visible"
}, "bf2-=0.15")
.staggerFromTo(line11b, 1, {
drawSVG: "0%",
ease: Power4.easeInOut
}, {
drawSVG: "100%",
ease: Power4.easeInOut
}, 0.45, "bf2-=0.15")
.staggerFromTo(line11a, 0.5, {
drawSVG: "0 100%",
ease: Power4.easeInOut
}, {
drawSVG: "100% 100%",
ease: Power4.easeInOut
}, 0.2, "bf2+=1.3")
.staggerFromTo(line11b, 0.5, {
drawSVG: "0 100%",
ease: Power4.easeInOut
}, {
drawSVG: "100% 100%",
ease: Power4.easeInOut
}, 0.2, "bf2+=2.3")
.to(text, 0.75, {
top: "-=100%"
}, 12)
return tl;
}
function step8() {
text = $("#step8");
tl = new TimelineMax();
tl.timeScale(0.55)
.to(text, 0.5, {
autoAlpha: 1,
ease: Back.easeOut
})
.to(line14, 0.01, {
visibility: "visible"
})
.staggerFromTo(line14, 0.5, {
drawSVG: "0%"
}, {
drawSVG: "100%"
}, 0.5)
.from(line14, 0, {
drawSVG: "0%"
})
.to(line14, 1, {
drawSVG: "100%"
})
.to([ecd], 1, {
fill: "purple",
repeat: 3
})
.to(text, 0.75, {
top: "-=100%"
}, 9);
return tl;
}
function step9() {
text = $("#step9");
tl = new TimelineMax();
tl.timeScale(0.55)
.to(text, 0.5, {
autoAlpha: 1,
ease: Back.easeOut
})
.set(line15, {
visibility: "visible"
})
.set(line14, {
visibility: "hidden"
})
.fromTo(line15, 0.5, {
drawSVG: "0%"
}, {
drawSVG: "100%"
}, 0.5)
.from(line15, 0, {
drawSVG: "0%"
})
.to(line15, 1, {
drawSVG: "100%"
})
.fromTo(line16, 0.5, {
drawSVG: "100%"
}, {
drawSVG: "0%"
}, 0.5)
.from(line16, 0, {
drawSVG: "100%"
})
.to(line16, 1, {
drawSVG: "0%"
})
.set(line17, {
visibility: "visible"
})
.staggerFromTo(line17, 0.5, {
drawSVG: "0%"
}, {
drawSVG: "100%"
}, 0.5, "scrollstart")
.to(window, 4, {
scrollTo: {
y: getHeight(h)
}
}, "scrollstart+=1")
.from(line17, 0, {
drawSVG: "0%"
})
.to(line17, 1, {
drawSVG: "100%"
})
.to([fid], 1, {
fill: "#F87F08",
repeat: 3
})
.to(text, 0.75, {
top: "-=100%"
}, 12);
return tl;
}
function step10() {
text = $("#step10");
tl = new TimelineMax();
tl.timeScale(0.55)
.to(text, 0.5, {
autoAlpha: 1,
ease: Back.easeOut
})
.set(line18, {
visibility: "visible"
})
.set(line17, {
visibility: "hidden"
})
.fromTo(line18, 0.5, {
drawSVG: "0%"
}, {
drawSVG: "100%"
}, 0.5)
.from(line18, 0, {
drawSVG: "0%"
})
.to(line18, 1, {
drawSVG: "100%"
})
.fromTo(line19, 0.5, {
drawSVG: "100%"
}, {
drawSVG: "0%"
}, 0.5)
.from(line19, 0, {
drawSVG: "100%"
})
.to(line19, 1, {
drawSVG: "0%"
}, "scrollstart2")
.to(window, 5, {
scrollTo: {
y: 0
}
}, "scrollstart2+=1")
.set(line20, {
visibility: "visible"
})
.staggerFromTo(line20, 0.5, {
drawSVG: "0%"
}, {
drawSVG: "100%"
}, 0.5)
.from(line20, 0, {
drawSVG: "0%"
})
.to(line20, 1, {
drawSVG: "100%"
}, "scrollstart3")
.to(window, 5, {
scrollTo: {
y: getHeight(h)
}
}, "scrollstart3+=1")
.to([methanizer], 1, {
fill: "#FA77E9",
repeat: 3
})
.to(text, 0.75, {
top: "-=100%"
}, 18);
return tl;
}
function step11() {
text = $("#step11");
tl = new TimelineMax();
tl.timeScale(0.55)
.to(text, 0.5, {
autoAlpha: 1,
ease: Back.easeOut
})
tl.to(line21, 0.01, {
visibility: "visible"
})
.staggerFromTo(line21, 0.5, {
drawSVG: "0%"
}, {
drawSVG: "100%"
}, 0.5, "end")
.from(line21, 0, {
drawSVG: "0%"
})
.to(line21, 1, {
drawSVG: "100%"
})
.to([fid], 0.01, {
fill: "#BFDEFF"
})
.to([fid], 1, {
fill: "#F87F08",
repeat: 3
}, "scrollstart4")
.to(window, 3, {
scrollTo: {
y: 0
},
ease: Power2.easeOut
}, "scrollstart4+=3")
.to(text, 0.75, {
top: "-=100%"
}, 10);
return tl;
}
});
!
