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.