onReverseComplete

[Amnesicat]

Hi,

I have a timeline with an onReverseComplete and a listener that toggles the tween and another listener that just reverses it. Is it possible to reverse the tween without activating the onReverseComplete?

Thanks.

var tl:TimelineMax;

tl = new TimelineMax({paused:true, reversed:true, onReverseComplete:doSomething});
tl.to(mc1, 0.5, {x:"50"});
tl.to(mc1, 0.5, {y:"50"});

mc1.addEventListener(MouseEvent.MOUSE_DOWN, mcTween);
mc2.addEventListener(MouseEvent.MOUSE_DOWN, mcReverse);

function mcTween(e:MouseEvent):void
{
    tl.reversed(!tl.reversed());
    tl.resume();
}

function mcReverse(e:MouseEvent):void
{
    tl.reverse();//don't want this to activate onReverseComplete
}

function doSomething():void
{
    trace("something");
}

[jamiejefferson]

Certainly an odd one, but you could create a tween to scrub the playhead in "reverse", without actually affecting the timelines reversed state (meaning that tl.reversed() will continue to be false).

TimelineMax tweenTo()

tl.tweenTo(0);

[Amnesicat]

This is just a simplified sample, it makes sense in context of the larger project it's from.

 

Thanks, I tried tl.tweenTo(0) but it still seems to activate the onReverseComplete, which is what I don't want to happen.

[Carl]

Frankly, I'm a little surprised that Jamie's suggestion didn't work, but I verified that you are correct. Might have to look into this more.

 

For now, a viable solution might be removing and re-applying the onReverseComplete callback:

 

var tl:TimelineMax;


tl = new TimelineMax({paused:true, reversed:true});
tl.to(mc1, 0.5, {x:"50"});
tl.to(mc1, 0.5, {y:"50"});


mc1.addEventListener(MouseEvent.MOUSE_DOWN, mcTween);
mc2.addEventListener(MouseEvent.MOUSE_DOWN, mcReverse);


function mcTween(e:MouseEvent):void
{   
    tl.eventCallback("onReverseComplete", doSomething); 
    tl.reversed(!tl.reversed());
    tl.resume();
}


function mcReverse(e:MouseEvent):void
{
   tl.eventCallback("onReverseComplete", null); 
   tl.reverse()
}


function doSomething():void
{
    trace("something");
}

Thanks for providing the simplified code, it certainly was helpful.

[Amnesicat]

Thanks Carl, so I take it tweenTo(0) was suppose to work in that scenario?

 

Thank you for the work around.

 

Cheers.

[GreenSock]

Yep, that's expected behavior, but I can see why it may not seem entirely intuitive. Heck, it tripped up Carl and Jamie and those are two of the top GSAP gurus on the planet. Let me explain...

 

Originally (years ago) we had onReverseComplete only fire when the tween's state was specifically set to "reversed", but a lot of people complained that it wasn't intuitive because they were putting tweens into a timeline and then reversing the timeline and expecting the child tweens' onReverseComplete to be fired when the virtual playhead arrived at their beginnings even though their playback state was NOT specifically set to "reversed". 

 

It gets tricky with nesting because tweens that aren't reversed but are put into a timeline that's reversed will ACT like they're reversed (in a sense), but then if you put that timeline into another timeline that's reversed, they'll appear to play forward, etc. 

 

A valid argument could be made for either behavior, so we had to make a design decision based on what most developers prefer which was definitely to have the onReverseComplete fire when the playhead arrives at the beginning (from a point beyond the beginning) regardless of whether or not they specifically set that particular tween's orientation to reversed. When we made that change, a lot of people were happy. This is the first time I can remember having anyone complain about that altered behavior. Not that you're doing anything wrong or illogical - I'm just saying this is very unusual. 

 

If you don't want your callback to get called, you should remove it or apply some other conditional logic in your actual callback. 

[jamiejefferson]

Ah, thanks for clearing that up Jack. In that case, tweenTo(0) might still be a solution (since it doesn't modify tl.reversed()) if you just add a little extra logic to doSomething i.e.

function doSomething() {
  if (tl.reversed()) {
    // actually doSomething
  }
}

[GreenSock]

One other option is to simply tween to a time of 0.00001 or something just shy of the beginning. 

tl.tweenTo(0.0001);

[Amnesicat]

Well actually Carl's solution seemed to work the best, as tweenTo interupts the toggle which then requires two clicks before it activates again. Anyhow, I wasn't really complaining about it, I was just curious to see if it was possible. But I decided to totally reconstruct the code so that an onReverseComplete wasn't required, which in turn solved another issue I was struggling with.

 

Thank you all again for your contributions. I always receive quick helpful advice from these forums, for which I am truly grateful.

 

Cheers.