CSSPlugin.defaultTransformPerspective = 400;
TweenLite.set("#bottom", {y:-91, opacity:0})
TweenLite.set(".wrapper", {visibility:"visible"});


var tl = new TimelineLite({delay:0.5, onUpdate:updateSlider}),
    $slider = $("#slider");

tl.from("#gs-logo", 1, {opacity:0, scale:0.8, ease:Back.easeOut.config(4)})
	.from("#tagline", 0.6, {opacity:0, y:20, ease:Back.easeOut}, "+=0.5")
  .add("codepen", "+=2")
  .set("svg", {visibility:"visible"}, "codepen")
  .fromTo("#top", 1, {drawSVG:"50% 50%"}, {drawSVG:"100%"}, "codepen")
  .set("#bottom", {opacity:1})
  .fromTo("#posts line", 0.5, {drawSVG:"0"}, {drawSVG:"100%"})
  .to("#bottom", 0.5, {y:0}, "-=0.5")
  .to("#greensock", 0.5, {y:60, autoAlpha:0}, "-=0.55")
  .to(".stroke", 0.2, {stroke:"#fff"}, "+=0.3")
  .from(".info img", 3.5, {opacity:0, rotationX:-90, transformOrigin:"center 20px", ease:Elastic.easeOut.config(0.5)})
  .staggerFrom("#date, li", 0.6, {opacity:0, y:20}, 0.1, "-=3")
  .from("#register", 3, {scale:0.5, autoAlpha:0, ease:Elastic.easeOut.config(0.8)}, "-=1.8")
  


tl.timeScale(2)
//--- SLIDER ---


$slider.slider({
  range: false,
  min: 0,
  max: 100,
  step: 0.02,
  value:0,
  slide: function ( event, ui ) {
    tl.progress( ui.value / 100 ).pause();
  }
});
function updateSlider() {
	$slider.slider("value", tl.progress() * 100);
}
var $replayIcon = $("#replayIcon"),
    $replay = $("#replay").mouseenter(function(){
      TweenLite.to($replayIcon, 0.4, {rotation:"+=360"});
      TweenLite.to($replay, 0.4, {opacity:1});
    }).mouseleave(function(){
      TweenLite.to($replay, 0.4, {opacity:0.65});
    }).click(function(){
      tl.restart();
});