Lasercode Posted April 29, 2020 Share Posted April 29, 2020 Hi guys, this is how i normally created my loops in my banners before gsap3: // ... tl.addCallback(function(){ if(loopCount < 3){ loopCount++; // fade out elements }else{ tl.pause(); } }); Now, that addCallback is not present anymore I use "call()", but the ad does not loop correctly, but only two times. Is "call" not being processed in every loop of the timeline? This would be my whole timeline. Also notice the "tl.to({}, 0.1, {});" in the end, which is needed to avoid a flickering when looping. This was not the case in gsap2 as well. var loopCount = 0; var tl = new TimelineMax({paused:true, repeat:-1}); tl.timeScale(1.2); //fr1 tl.from('#logo', 1, {scale:1.2, opacity: 0 }); tl.to({}, 2, {}); tl.from('.line, .line2', 0.2, { opacity: 0 }); tl.to('.cls-1', 1.2, { 'stroke-width': 102 }); //fr2 tl.from('#bg-blue', 3, {opacity: 0}, 'kaas') tl.from('#stuk1', 0.2, {opacity: 0}, 'kaas'); tl.from('#shop', 0.5, {y: 50, opacity: 0, ease:Back.easeOut},'kaas'); tl.from('#stuk1_shade', 0.2, {opacity: 0}, 'kaas'); tl.from('#stuk2r', 1.3, {x: -72, opacity: 0, ease:Power4.easeOut}, 'kaas'); tl.from('#stuk2l', 1.3, {x: 72, opacity: 0, ease:Power4.easeOut}, 'kaas'); tl.from('#stuk3r', 1.5, {x: -121, opacity: 0, ease:Power4.easeOut}, 'kaas'); tl.from('#stuk3l', 1.5, {x: 121, opacity: 0, ease:Power4.easeOut}, 'kaas'); tl.from('#stoerer', 0.5, {scale: 0.5, opacity: 0, ease:Back.easeOut}, 'kaas+=1.2'); tl.to({}, 1, {}); tl.to('#stoerer', 0.2, {scale: 0.95, yoyo: true, repeat: 3}); tl.to({}, 2, {}); // loop tl.call(function(){ if(loopCount <= 5){ loopCount++; tl.set('.cls-1', { 'stroke-width': 14 }); tl.set('.line, .line2, #logo', { opacity: 0 }); tl.to('#frame2', 0.5, {opacity: 0}); }else{ tl.pause(); } }); tl.to({}, 0.1, {}); What am I doing wrong? Thanks! Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 29, 2020 Share Posted April 29, 2020 Hey Lasercode. Sorry for the troubles you're facing. There are a few aspects of your code that I'd change: You use several empty tweens to add delays. Why not use the position parameter to add those delays instead? For example, instead of tl.to({}, 2, {}); tl.from('.line, .line2', 0.2, { opacity: 0 }); you could have tl.from('.line, .line2', 0.2, { opacity: 0 }, "+=2"); Why use new TimelineMax? The more modern way of creating a timeline is var tl = gsap.timeline({paused:true, repeat:-1}); We recommend putting the duration inside of the vars parameter. That way you can make use of GSAP 3's defaults. We recommend using the condensed string form for eases. For example"power4" vs Power4.easeOut (out is the default). Inside of the call you are conditionally adding the same new tweens to the timeline — Is that really what you want to be doing? I would think you'd want to do something like this instead: tl.call(function(){ if(loopCount <= 5) { loopCount++; gsap.set('.cls-1', { 'stroke-width': 14 }); gsap.set('.line, .line2, #logo', { opacity: 0 }); } else{ tl.pause(); } }); tl.to('#frame2', 0.5, {opacity: 0}); Or better yet, just use fromTos in your timeline where appropriate so that you don't have to use any set calls in the .call(): tl.fromTo('.cls-1', { 'stroke-width': 14 }, { 'stroke-width': 102, duration: 1.2 }); The other set() is unnecessary because you're using .from()s in the timeline. That way you can just have this in your .call(): tl.call(function() { loopCount++; if(loopCount > 5) { tl.pause(); } }); tl.to('#frame2', {opacity: 0}); Although even then, this seems like the situation where you could just use the repeat parameter on the timeline instead. It might require changing the order of your tweens in the timeline. Without seeing what's going on it's hard to say for sure. With all of that being said, I can't reproduce the errors that you're talking about in a minimal CodePen demo. The demo below repeats twice (for a total of 3 play throughs) like it should. Can you please modify the demo below to recreate the issue(s) that you're describing? See the Pen bGVrgBB by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
Lasercode Posted April 29, 2020 Author Share Posted April 29, 2020 As always great help!!! I think most problems really come from wrong usage of mine. I will change the things you mentioned and will get back, if any error persists. Thanks a ton. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now