Jump to content
Search Community

Loop not working as expected

Lasercode test
Moderator Tag

Recommended Posts

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

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

  • Like 3
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.
×
×
  • Create New...