//From 7 Hidden Gems of GSAP (Net Magazine)
//Read full article: https://medium.com/net-magazine/7-hidden-gems-of-the-greensock-animation-platform-4fb71389f6ca#.t6xniz19i


var shakeBtn = document.getElementById("shake"),
    flickerBtn = document.getElementById("flicker"),
    slowBtn = document.getElementById("slow"),
    fastBtn = document.getElementById("fast"),
    restartBtn = document.getElementById("restart"),
    timeScaleSlider = document.getElementById("timeScaleSlider"),
    slowMoAni = getSlowMoTimeline();
    

//create all animations

//SteppedEase

var walkAni = TweenMax.to('#walker', 1, {
    backgroundPosition: '100% 0px',
    ease: SteppedEase.config(22),
    repeat: -1
});

function update(){
  walkAni.timeScale(timeScaleSlider.value);
  timeScaleDisplay.innerHTML = "tl.timeScale(" + timeScaleSlider.value + ")";
}

timeScaleSlider.addEventListener("input", update);
timeScaleSlider.value = 1;

// Credits

// walker tutorial: http://eighthdaydesign.com/journal/sprite-animation
// walker original pen: https://codepen.io/eighthday/pen/dYNJyR


//SlowMo

function getSlowMoTimeline() {
  var phrase = "create dramatic text effects with SlowMo ease",
  words = phrase.split(" "),
  container = document.getElementById("SlowMoStage"),
  numWords = words.length,
  tl = new TimelineMax();

  for(var i = 0; i < numWords; i++){
    var word =  document.createElement("div");       // Create a <button> element
    var text = document.createTextNode(words[i]);     
    word.appendChild(text)// Create a text node
    container.appendChild(word); 
    TweenLite.set(word, {xPercent:-50, yPercent:-50})
    tl.from(word, 1, {scale:0, ease:SlowMo.ease}, "word" + i)
      .from(word, 1, {opacity:0, ease:SlowMo.ease.config(0.7, 0.7, true)}, "word" + i)
    
  }
  tl.timeScale(1.2)
  return tl;
}

restartBtn.onclick = function() {
  slowMoAni.restart();
}

//RoughEase

var shakeAni = new TimelineMax({paused:true});
shakeAni.from(".logo-man", 0.5, {x:2, y:2, ease: RoughEase.ease.config({ strength: 8, points: 50, taper: "none", randomize: true, clamp: false})})
.set(".logo-man", {x:0, y:0});

var flickerAni = new TimelineMax();
flickerAni.from(".logo-man", 0.5, {opacity:0, ease: RoughEase.ease.config({ strength: 8, points: 50, taper: "none", randomize: true, clamp: true})});

shakeBtn.onclick = function() {
  shakeAni.restart();
}

flickerBtn.onclick = function() {
  flickerAni.restart();
}