Skip to content

Instantly share code, notes, and snippets.

@patsma
Created March 13, 2018 00:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save patsma/233e0e73c19ef52130b47eeef536c5ef to your computer and use it in GitHub Desktop.
Save patsma/233e0e73c19ef52130b47eeef536c5ef to your computer and use it in GitHub Desktop.
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();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment