play(). reverse() on click

[Envision3]

Hi,
 
First I want to say great forums, I have been reading and learning a lot, thank for helping out.

This is more probobly jquery than GSAP problem but I'm trying to play and reverse my timeline on click event. I'm struggling to bind the play() and reverse() to my function. When buttom is clicked the timeline will play and reverse it.
 
Here is what I have so far:

var tl = new TimelineLite();
    
$('.home').on('click', function(event) {
    event.preventDefault();
    tl.to('.sidebar, .main', 1,  {x:-231, ease:Power2.easeIn});
});

What is the best way of binding play() and reverse() to a same anchor? I would really appreciate your help.

 

Thanks,
Peter

[jamiejefferson]

Sure, just move the tween outside of the click function and you can play/reverse as you please.

var tl = new TimelineLite({paused:true});
tl.to('.sidebar, .main', 1,  {x:-231, ease:Power2.easeIn});
    
$('.home').on('click', function(event) {
    event.preventDefault();
    tl.reversed() ? tl.play() : tl.reverse();
});

[Envision3]

Thank you so much for your help.

 

Peter

[Envision3]

Hello guys, I have one more question, is it possible to add a tween or css class when the timeline on reversing only and then remove it on play?

 

Thanks for you help.

Peter

[Carl]

Not sure I understand the question as it begs a few follow-up questions

 

Add a css class to what object? Where in the timeline is the tween supposed to be added? What is the tween supposed to do? Is it supposed to work if the timeline's direction changes while its playing? etc.

 

Instead of worrying too much about answering those question, perhaps you can share some code (on codepen) or explain exactly the effect you want to achieve. I'm inclined to think what you want to do can be done without constantly modifying an existing timeline.

[Rodrigo]

Hi,

 

Perhaps you'll need two different pieces of code for that, which ultimately mean that Jamie's great conditional logic will be wasted.

 

The reason is that the engine doesn't have a onReverseStart callback, I'm guessing because reverse, play, seek, pause and other control events, might be triggered at any time, but Carl or Jack are more suited to answer that.

 

What you could do is create a boolean for the direction the timeline is playing and depending on that add or remove the class. If the timeline is going forward remove the class and if it's going backwards add the class:

var tl = New TimelineMax(),
    forward = true;

button.click(function()
{
  if(forward)//timeline is going forward so we should reverse it
  {
    tl.reverse();
    element.removeClass('className');
  }
  else//timeline is going backwards, so we should make it go forward
  {
    tl.play();
    element.addClass('className');
  }
  //this toggles the boolean on each click event
  forward = forward  ? false : true;
});

If this is not what you're after, please create a reduced codepen or jsfiddle in order to get a better idea of your issue.

 

Rodrigo.

[jamiejefferson]

For adding just a class, Rodrigo seems to have hit the nail on the head there. You can still use tl.reversed() to get the 'forward' state without the extra boolean though.

var tl = new TimelineLite({paused:true}),
    target = $('.sidebar, .main');
tl.to(, 1,  {x:-231, ease:Power2.easeIn});
    
$('.home').on('click', function(event) {
  event.preventDefault();
  if (tl.reversed()) {
    tl.play();
    target.removeClass('reversing');
  } else {
    tl.reverse();
    target.addClass('reversing');
  }
});

[Envision3]

That's works perfectly, thank you for your help.

[Ghosty]

I got this working only with jQuery, but the problem is, it only starts working after the first click. First click does nothing, then from the second click on it works to toggle back and forth. I'm not sure what is still wrong with it? 

 

See the Pen QwLerVm by Ross-Reinhardt (@Ross-Reinhardt) on CodePen.

[Rodrigo]

Hi @Ghosty and welcome to the GSAP Forums!

 

Yeah the reason for that is because all GSAP Instances are created moving forward by default, even though in this case the Timeline is paused, so when you first click reversed() is false, so the Timeline is reversed, then on the second click reversed() is true, so the Timeline goes forward. When toggling a Tween/Timeline using reversed() is better to reverse the Tween/Timeline after adding the last instance to it and then just toggle the reversed state:

var tl = new TimelineLite({
  paused: true
});
tl.to(".menu-toggle", {
  duration: 0.05,
  opacity: 0
});
tl.to("#search", {
  duration: 0.5,
  width: "360px",
  ease: "power3.inOut"
}).reverse();
document.getElementById("open-search").addEventListener("click", function (event) {
  event.preventDefault();
  tl.reversed(!tl.reversed());
});

https://gsap.com/docs/v3/GSAP/Timeline/reversed()

 

Hopefully this helps

Happy Tweening!

[GreenSock]

@Ghosty that's just a logic thing. 

 

You've got it paused initially, and it is not reversed. So the playhead just sits at 0 (start). The first time your logic runs, it checks to see if the timeline is reversed and if not (it's not), it calls reverse(). So the playhead is at 0 and it moves backwards (now that it's reversed) to...ZERO (doesn't move). See the problem? 

 

Just change paused: true to reversed: true: 

 

See the Pen raBXKaE?editors=0110 by GreenSock (@GreenSock) on CodePen.

[Ghosty]

ahh so silly, thank you! perfect.