console.clear();

TweenMax.set("h1",{yPercent:-50, autoAlpha:1});
TweenMax.set(".end h1",{xPercent:-50, autoAlpha:1});
TweenMax.set(".end",{xPercent:-50, y:-120});
TweenLite.defaultEase = Sine.easeInOut;

// === The sections will appear at a smaller distance (= faster) ===
//TweenLite.set('.section',{height:'150vh'});
//TweenLite.set('h1',{top:'50%'});
 
// === Continuous animation of the blobs =================
//TweenMax.to("#Blobs",1,{scaleX:0.95,transformOrigin:"center",repeat:-1,yoyo:true});
TweenMax.to("#Blobs",1.5,{skewX:-10,scaleX:0.95,transformOrigin:"center",repeat:-1,yoyo:true});

// === Once at the beginning ========================
TweenLite.to('#Blob1',2,{scale:1.5, transformOrigin:"center", ease: Bounce.easeOut,vdelay:0.5});

// === The Blob Timeline =============================
// with a variety of adjusting screws for timing.
// timing and position of each tween
// labels with position parameter e.g. "+=4" which act as "pause" here.
// plus general timing (see above)

var blob = new TimelineMax({paused:true})
  .to("#Blob1", 1, { morphSVG: "#Blob2"})
  .to("#Blob1", 1, {x:'+200'}, '-=0.5')

  .addLabel('second',"+=4")
  .set("#Blob1",{fill:'red'},'second')
  .to("#Blob1",1.5,{rotation:180, x:'-300',transformOrigin:"center", ease: Bounce.easeOut},'second')
  
  .addLabel('third',"+=3")
  .to("#Blob1", 0.6, { scale: 4,repeat:3,yoyo:true,transformOrigin:"center" },'third')
  
  .addLabel('fourth',"+=3")
  .to("#Blob1", 1, { morphSVG: "#Blob3",x:'+100'},'fourth')

  .addLabel('fifthly',"+=3")
  .to("#Blob1", 0, { fill: "green" },'fifthly')
  .to("#Blob1",1.5,{rotation:220, scale:1.5, transformOrigin:"center", x:'-100', ease: Bounce.easeOut}, 'fifthly')
  .set(".blobsWrapper",{zIndex:5},'+=1')
  .to("#Blob1",1,{scale:8, transformOrigin:"center"})
  .to('.end',0.5,{autoAlpha:1})


// === scrolling sync =========================
var lastScrollTop = 0;

$(window).scroll(function(e) {
  var scrollNum = $(window).scrollTop();
  scrollPercent = $(window).scrollTop() / ($(document).height() - $(window).height());
  
  var progressBlobs = scrollPercent*1; 
  
  if (scrollNum > lastScrollTop) {  // downscroll
    TweenLite.to(blob, 1, {progress:progressBlobs, ease: Sine.easeOut});
  } else {    //upscroll
    TweenLite.to(blob, 1, {progress:progressBlobs, ease: Sine.easeOut});
  }
  
  lastScrollTop = scrollNum;
  
});