Jump to content
swampthang

Reverse doesn't work unless in on onComplete

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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/

  • Like 2

Share this post


Link to post
Share on other sites

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! 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.