Jump to content


onComplete() in tl.reverse()

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi there,
I've got a rather long timeline with several onComplete  handlers set at various points.
In trying to reverse it with the default suppressEvents set to false, the reversal works except all the onComplete handlers are skipped (the actions within those handlers need to be reversed as well).
When I reverse it with suppressEvents set to 'true' ( I wrote it as  tl.reverse(true); ), only the first third of the timeline gets reversed, basically right before the first tween with an onComplete handler.
Should I be doing something differently? Here's a look at the timeline code:
var tl = new TimelineLite();
// tl.timeScale(0.25);
tl.to($('#floatBubble' ),1,{top: -12, ease: Expo.easeInOut})
.set($('.down-arrow' ),{clip: "rect(-40px, 40px, 40px, 0px)"})
.to($('.down-arrow' ),1,{clip: "rect(-40px, 40px, -40px, 0px)", ease: Expo.easeInOut},1)
.set($('.down-arrow' ),{clip: "rect(40px, 40px, 28px, 0px)"})
// .set($('#loadedContent' ),{overflow: "hidden"})
.to($('#posterContainer'), 1.5, {"margin-top":"111px",  ease: Expo.easeInOut, onComplete: function(){
var styles = {
"background-color": "white",
// $('#loadedContent').css("overflow", "hidden");
$('#loadedContent section').css("padding-top", "11px"); //so #floatBubble doesn't get cut off at top by fixed header
}, 0)
.to($('.keyline-work' ),2.5,{width: 40, ease: Expo.easeInOut}, 1)
.to($('#posterContainer img'),1.5, {"margin-top":"-111px", ease: Expo.easeInOut },1)
.to($('.poster-image'), 1.5, {height: "300px", ease: Expo.easeIn},1)
.to($('#fauxHeader'), 0.3, {opacity:0, ease: Expo.easeIn, onComplete: function(){
.to($('#loadedContent'), 1.5, {"max-width":"1280px", ease: Expo.easeInOut},1)
// .to($('.down-arrow'), 1, {"height":"0px", ease: Expo.easeInOut })
.to($('.prev-post'), 0.5, {"margin-left":"-60px", "width":"160px", ease: Expo.easeInOut }, 1)
.to($('.next-post'), 0.5, {"margin-right":"-60px", "width":"160px", ease: Expo.easeInOut }, 1)
.to($('.post-nav'), 0.5, {"width":"120px", ease: Expo.easeInOut }, 1.5)
.to($('.prev-post'), 1, {"margin-left":"0px", "width":"40px",  ease: Expo.easeInOut}, 2)
.to($('.next-post'), 1, {"margin-right":"0px", "width":"40px", ease: Expo.easeInOut, onComplete: function(){
$('.post-nav').wrapAll("<div class='post-navigation-wrap'></div>");
$('.down-arrow span i').toggleClass('icon-caret-up');
}, 2)
.to($('#posterContainer img'), 2.5, {"margin-top":"-280px", ease: Expo.easeOut },2.5)
.to($('.entry-title' ),1.5,{y: 0, ease: Expo.easeInOut}, 1.55)
.to($('.keyline-work' ),1.5,{y: 0, ease: Expo.easeOut}, 2.25)
.to($('.entry-title h2' ),1.5,{y: 0, ease: Expo.easeInOut}, 1.55)
.to([$('.big-header'), $('.entry-title h2' ) ],0.75,{color: "black", ease: Expo.easeInOut}, 2)
.to($('.pubdate'),1,{"opacity": 0.75,  ease: Expo.easeInOut, onComplete: function(){
console.log("reversed? ", this.reversed());
.to($('.poster-image'), 2, {"height":"150px", ease: Expo.easeOut}, 2.25)
.to($('.down-arrow' ),1,{clip: "rect(-40px, 40px, 28px, 0px)", ease: Expo.easeInOut},3.5)
.set($('.down-arrow span i'),{bottom:-20}, 3.5)
.to($('.down-arrow span i'), 1, {bottom: 35, ease: Expo.easeInOut}, 4.35)
.set($('.down-arrow' ),{clip: "rect(-80px, 40px, 28px, 0px)"})
.to($('#floatBubble' ),1,{top: -80, ease: Expo.easeInOut},5.35)
.fromTo($('.callout'), 2, {"opacity":0}, {"opacity":1, ease: Expo.easeOut}, 2.5)
// .to($('.down-arrow'), 1, {"height":"100%", ease: Expo.easeInOut })
.to($('.down-arrow'), 1, {"bottom": -15, ease: Expo.easeInOut},3.75 )

Link to comment
Share on other sites

I didn't look through your code, but I wanted to mention that the first parameter of reverse() is the time at which you want it to reverse from (if you leave it null, it'll just use the current time). The second parameter is suppressEvents. I suspect you meant to do:

tl.reverse(null, false);

The docs are at http://api.greensock.com/js/


Also keep in mind that GSAP cannot counteract/revert whatever actions you take inside your callbacks because it has no idea what you're doing inside those. For example, if you place a callback into your timeline that calls a function that changes a color, when the timeline gets reversed and goes backward past that callback, it'll call it again but it won't somehow know that it's supposed to change that color to the original value - you'd need to add that logic yourself (or put it as a set() call on the timeline). 


Does that help?

  • Like 3
Link to comment
Share on other sites

Hey thanks! That first parameter of null  made all the difference->    tl.reverse(null, true);


Note taken about adding logic to the onComplete(), but it seems in reverse only the onReverseComplete() handler gets called - so I guess I'll use that.


Thanks again!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.