How to play onComplete on timeline reverse

[mk1]

Hey, quick question.

 

How can I make this onComplete part work on main timeline reverse?

.to(imessagewrapper, 0.4, {autoAlpha: 1, ease: Back.easeOut.config(1.7), onComplete: function () {
            imessage_tl.play();
        }}, "S22")

I don't want to launch this timeline in .add() or as a tween, as this will ruin my timeline behaviour.

[mk1]

Update, but still not working

.to(imessagewrapper, 0.4, {autoAlpha: 1, ease: Back.easeOut.config(1.7), onComplete: function () {
            imessage_tl.play();
            console.log("Trying to play");
        }, onReverseComplete: function () {
            imessage_tl.play();
            console.log("Trying to play on reverse");
        }}, "S22")

Here I found something about onREverse call https://greensock.com/forums/topic/9499-onreverse/?hl=onreverse#entry38487

 

but it's not listed here:

 

https://ihatetomatoes.net/wp-content/uploads/2015/08/GreenSock-Cheatsheet-2.pdf

[mk1]

Okay, problem solved, it's still hard for me to picture how the code is executed on reverse actions , need more exp

 

Here's my solution:

.to(imessagewrapper, 0.4, {autoAlpha: 1, ease: Back.easeOut.config(1.7), onComplete: function () {
            imessage_tl.play();
            console.log("Trying to play");
        }}, "S22")
        .add("S2end")
        .addPause()

        .to('#innerDotWrapper', 0.4, {autoAlpha: 0, height: 0, marginBottom: "0px", onComplete: function () {
            imessage_tl.pause(0);
            console.log("Pause");
        }, onReverseComplete: function () {
            imessage_tl.play();
            console.log("Trying to play on reverse");
        }}, "S3")

If someone was so nice and explain to me why my previous solution refused to work I will much appreciate it.

[Dipscom]

Hey mk1,

 

I'd love to give it a shot but I'd be hard pressed without seeing it in context. If you set up a demo, I'll certainly give my best.

[mk1]

Setting up a codepen would quite time consuming in this case. Let me know if you can take a look using dev link:

http://barb.beectrl.a2hosted.com/

[Dipscom]

I'm having difficulties loading your page. The 'assets/js' folder is not showing up.

[mk1]

Should be okay, we have some issues with our hosting. As the provider claims whole network were under DDoS attack ^^ 

Please let me know if the issue still occurs after refreshing cache.

[Dipscom]

It worked in the end, although I imagine you're still working on this as it kind of breaks if I change the window size. Lots of things misalign. 

 

Anyway, trying to read a whole website's worth of code is a no go. Too much to wade thru there mate, sorry.

 

However, I can give a punt as to why the first attempt did not work and the second did (at least I think it is why, only an example pen would set this matter to rest but it's a tad late here and I won't set one up at the moment... Soz...)

 

Here, you have two instances of .play() in the same timeline but notice you are not passing any arguments to the method.

.to(imessagewrapper, 0.4, {autoAlpha: 1, ease: Back.easeOut.config(1.7), onComplete: function () {
 imessage_tl.play();
 console.log("Trying to play");
}, onReverseComplete: function () {
 imessage_tl.play();
 console.log("Trying to play on reverse");
}}, "S22")

By default, the .play() method just continues playing from where the virtual playhead is until it reaches the end of that timeline. Once at the end, it doesn't really do anything. I think it is safe to say that by the time you get to the onReverseComplete() call the imessage_tl has finished playing and thus, nothing else would happen.

 

In your second attempt, you have a different setup that includes the following:

imessage_tl.pause(0);

That makes the virtual playhead jump back to the start of the timeline and so, when you later have the onReverseComplete() call, the imessage_tl plays from its beginning.

 

In order for the first setup to work, you would simply add a zero as a parameter into your .play() methods, like so:

.to(imessagewrapper, 0.4, {autoAlpha: 1, ease: Back.easeOut.config(1.7), onComplete: function () {
 imessage_tl.play(0);
 console.log("Trying to play");
}, onReverseComplete: function () {
 imessage_tl.play(0);
 console.log("Trying to play on reverse");
}}, "S22")

That way, every time that tween either completes playing or reversing, the imessage_tl is going to start right from the start, no matter where its virtual playhead is.