Play timeline when clicking a button and reversing it when clicking a different one

[superunknown]

Hey guys. Sorry for the newbie question, I'm new to both jquery and gsap so I get pretty lost quite often. Been looking around in the forums for a while but I couldn't find an answer for this, or was too dumb to realize it when I found one, so I figured I'd just ask.

 

Ok, so I'm using a button to open both an overlay and a sidebar menu on top of it, this works great, overlay appears, then the sidebar menu, life is good:

 

var tl = new TimelineLite({paused: true, reversed: true});

 

$('.open-menu').click(function () {

   tl

       .to(overlay, 0.5, { x:'0', autoAlpha: 1, ease:Power2.easeIn})

      .to(menu, 0.5, { left:'0', autoAlpha: 1, ease:Power2.easeIn}, '-=0.2');

});

 

 

What I want to do next is to use a different button (that's inside the just-opened sidebar menu) or a click event on the part of the overlay that shows outside the menu to reverse the animation (so basically to animate both the sidebar and the overlay out).

 

What would be the cleanest way for me to do this? I'm not sure how to create a new function, on a different event, and tell it to reverse my timeline. I tried something like this:

 

$('.overlay, .menu.close').on('click keyup', function(event) {

    if (

        event.target == this ||

        event.target.className == 'close' ||

       event.keyCode == 27

      ) {

      tl.reversed() ? tl.play : tl.reverse();

     }

});

 

But it doesn't seem to work. Granted, I don't know what the hell I'm doing, I'm just copying and pasting stuff I find around here.

Any help would be appreciated. Thanks!

 

 

 

[ZachSaucier]

Hello superunknown and welcome to the forums,

 

11 hours ago, superunknown said:

or was too dumb to realize it when I found one

I don't think that's right. Your code is very close to what should work as far as I can tell. In fact, the tl.reversed() ? tl.play() : tl.reverse(); (notice the () after play - maybe that is your issue?) is exactly what I was going to suggest you try. 

 

To help you understand what it's doing, tl.reversed() is checking to see if the timeline is reversed. The ? operator is essentially a shorthand for an if statement where the part before the : is if reversed() returns true and the part after is if it returns false. It could be rewritten as:

 

if(tl.reversed()) {
  tl.play();
} else {
  tl.reverse();
}

With that being said, it's hard to tell exactly what is going awry. If the above doesn't fix your issue, could you please create a minimal demo of your issue in a CodePen? The below thread provides more information on how to do so.