Reverse doesn't work unless in on onComplete

[swampthang]

The codepen was set up to test a new dom capture library (npm dom-to-image) but I noticed a couple of things.

 

First, I stacked the animations in the timeline using the shorthand method like...

main.add(TweenMax.set("#quote", {perspective:400}))
    .add(TweenMax.set('svg', {x: 320, y: 50}));
main.staggerFromTo(lines, 0.20, { drawSVG: '0' }, { drawSVG: '0 100%', 'visibility': 'visible', ease: Expo.easeOut }, 0.2)
    .staggerFrom(chars, 0.8, {opacity:0, scale:0, y:80, rotationX:180, transformOrigin:"0% 50% -50",  ease:Back.easeOut}, "-=4", "+=0")
    .fromTo('svg', 0.2, {scale: 1.0}, {scale: 1.5, ease: Power4.easeInOut, force3D:false}, 3)
    .reverse();

I noticed that reverse() wasn't working any way I did it. I thought reverse tacked onto the end of a timeline would automatically reverse it once the timeline had finished the entire duration. I was able to get it to work though adding an onComplete function like this...

main.add(TweenMax.set("#quote", {perspective:400}))
    .add(TweenMax.set('svg', {x: 320, y: 50}));
main.staggerFromTo(lines, 0.20, { drawSVG: '0' }, { drawSVG: '0 100%', 'visibility': 'visible', ease: Expo.easeOut }, 0.2)
    .staggerFrom(chars, 0.8, {opacity:0, scale:0, y:80, rotationX:180, transformOrigin:"0% 50% -50",  ease:Back.easeOut}, "-=4", "+=0")
    .fromTo('svg', 0.2, {scale: 1.0}, {scale: 1.5, ease: Power4.easeInOut, force3D:false, onComplete: backOut}, 3);

function backOut() {
  main.reverse();
}

Oh, and one other thing, to PLAY the animation, click the Preview button. The Record button is just to test the dom-to-image library. Just in case you want to try that out, I had to be in debug mode to get it to act right. In Edit mode, it's like the Bounce ease is getting applied to every draw that DrawSVGPlugin makes.

 

Works fine in debug or live mode - http://codepen.io/swampthang/live/BzJrNW

See the Pen BzJrNW?editors=1010 by swampthang (@swampthang) on CodePen

[swampthang]

Hmmm, well, I take that back. When I looked at it in an incognito browser, it does the same weird little bouncing thing when recording the images. Strange.

[Rodrigo]

Hi,

 

What you're seeing is expected behaviour.

 

Turns out that you have your code. The browser reads and interprets the code in a matter of milliseconds. So when you create the timeline is paused. Then you add instances to it and at the end the reverse method. Finally you call the play method on the timeline; at that point the timeline it's actively running, but it's reversed status is true, so it's going backwards. Turns out that it's at zero seconds, so is just stuck there.

 

Basically in JS when you use the parenthesis in a function or method is called immediately, like this:

function myFunc(){
  console.log("Hi!!");
}

var btn1 = $("#btn1");

btn1.on("click",function(){
  myFunc();
});

The function will be called immediately after the code is read, not when the button is clicked. That's basically what's happening here.

 

A way around is to add a call method at the end of the timeline, but if you need to reverse the timeline after is completed, I don't see the need for it, as an onComplete callback is enough. Also you should add the onComplete in the timeline constructor:

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

Finally, you can use the call method as I mentioned above:

main.set("#quote", {perspective:400}))
    .set('svg', {x: 320, y: 50}));
    .staggerFromTo(lines, 0.20, { drawSVG: '0' }, { drawSVG: '0 100%', 'visibility': 'visible', ease: Expo.easeOut }, 0.2)
    .staggerFrom(chars, 0.8, {opacity:0, scale:0, y:80, rotationX:180, transformOrigin:"0% 50% -50",  ease:Back.easeOut}, "-=4", "+=0")
    .fromTo('svg', 0.2, {scale: 1.0}, {scale: 1.5, ease: Power4.easeInOut, force3D:false}, 3)
    // call backOut after the timeline is completed
    .call(backOut);
 
function backOut() {
  main.reverse();
}

Call Method

http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/call/

[OSUblake]

Just a little tip about adding reverse to the end of a timeline or tween. Sometimes that stuck behavior can useful for toggling animations as you don't have to pause the animation.

See the Pen c31a58e5c044b265e81b854dd2ce0838?editors=0010 by osublake (@osublake) on CodePen

[swampthang]

Thanks you guys. Gives clarity to the reverse thing. And yea, I can see where pause is definitely not the prescription. Love the simple toggle script too!