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();
});