meixeira

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!

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", "z-index":1030 } $('.main-header').css(styles); // $('#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(){ $('#fauxHeader').remove(); } },0.55) .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>"); $('#floatBubble').toggleClass('icon-landscape'); $('.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()); $(window).trigger("scroll"); } },2) .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 )