patsma
3/13/2018 - 12:04 AM

Toggle timeline held in function

Toggle timeline held in function

var select = function(s){
  return document.querySelector(s);
}
var normalTimelineGreen = select('.normalTimelineGreen');
var returnedTimelineRed = select('.returnedTimelineRed');






// NORMAL TIMELINE
var tl = new TimelineMax({paused:true,reversed:true});
tl.to(normalTimelineGreen,1,{xPercent:100})



// RETURNED TIMELINE
function tlReturned(){
  var tlR = new TimelineMax({paused:true,reversed:true});
  tlR.to(returnedTimelineRed,1,{xPercent:100})
  return tlR;
}

// That's VERY important - without this you can't acces the .reversed etc
var returned_tl = tlReturned();

// WORKS LIKE A CHARM
normalTimelineGreen.addEventListener('click',function(){
  tl.reversed() ? tl.play():tl.reverse();
});

// THIS WONT WORK WITHOUT var main_tl = tlReturned();
returnedTimelineRed.addEventListener('click',function(){
  returned_tl.reversed() ? returned_tl.play():returned_tl.reverse();
});