Accessing repeat counter

[Oliver16Years]

Hi,
 
Is there a way to access the current iteration of a repeating Timeline?
 

I would like to stop the loop just after the last digit is shown at the last repeat of this numeric counter.

This is an automatically generated frame animation:

 
COUNTER1tl=new TimelineMax({repeat:99});
COUNTER1tl
.addLabel('d')
.set(digit_1,{autoAlpha:1})
.set(digit_2,{autoAlpha:0})
.set(digit_3,{autoAlpha:0})
.set(digit_4,{autoAlpha:0})
.set(digit_5,{autoAlpha:0})
.set(digit_6,{autoAlpha:0})
.set(digit_7,{autoAlpha:0})
.set(digit_8,{autoAlpha:0})
.set(digit_9,{autoAlpha:0})
.set(digit_10,{autoAlpha:0})
.to(digit_1,0,{autoAlpha:1},'d+=0')
.to(digit_1,0,{autoAlpha:0},'d+=0.02')
.to(digit_2,0,{autoAlpha:1},'d+=0.02')
.to(digit_2,0,{autoAlpha:0},'d+=0.04')
.to(digit_3,0,{autoAlpha:1},'d+=0.04')
.to(digit_3,0,{autoAlpha:0},'d+=0.06')
.to(digit_4,0,{autoAlpha:1},'d+=0.06')
.to(digit_4,0,{autoAlpha:0},'d+=0.08')
.to(digit_5,0,{autoAlpha:1},'d+=0.08')
.to(digit_5,0,{autoAlpha:0},'d+=0.1')
.to(digit_6,0,{autoAlpha:1},'d+=0.1')
.to(digit_6,0,{autoAlpha:0},'d+=0.12')
.to(digit_7,0,{autoAlpha:1},'d+=0.12')
.to(digit_7,0,{autoAlpha:0},'d+=0.14')
.to(digit_8,0,{autoAlpha:1},'d+=0.14')
.to(digit_8,0,{autoAlpha:0},'d+=0.16')
.to(digit_9,0,{autoAlpha:1},'d+=0.16')
.to(digit_9,0,{autoAlpha:0},'d+=0.18')
.to(digit_10,0,{autoAlpha:1, onComplete: function(){ /* stop if last repeat */ }},'d+=0.18')
.to(digit_10,0,{autoAlpha:0},'d+=0.2')
;

If I put a counter variable into the code
 

var COUNTER1_repeat = 99

and decrement it

.to(digit_10,0,{autoAlpha:1, onComplete: function(){ if ( !COUNTER1_repeat-- ){ COUNTER1tl.pause() } } }, 'd+=1.8' )

the code works, but seems like a workaround. Not nice in my opinion.

 

 

Thanks a lot,
Oliver

[GreenSock]

Well, there are many ways you could structure this, but here's one that uses a lot less code: 

var digits = [digit_1, digit_2, digit_3, digit_4, digit_5, digit_6, digit_7, digit_8, digit_9, digit_10];
TweenLite.set(digits, {autoAlpha:0});

COUNTER1tl = new TimelineMax({repeat:99});
COUNTER1tl.staggerTo(digits, 0, {autoAlpha:1}, 0.02)
    .staggerTo(digits, 0, {autoAlpha:0}, 0.02, 0.02);

TweenLite.delayedCall(digits.length * 0.02 * COUNTER1tl.repeat() - 0.02, function() {
    COUNTER1tl.pause();
});

I haven't really tested that, but I assume it'd give you what you're after. Notice I'm just doing a delayedCall() based on the calculated time it'd take to reach that spot in the timeline the last time through. 

 

Does that help at all? 

[Oliver16Years]

This is elegant and clean!

It helped me to understand how to use the delayedCall(). What is the difference between a setInterval() and this function? Is it more reliable or precise? Is it uses the same timing mechanism as the other tweens?

 

I'll test it and put this code into my engine.

Thank You very much!

 

Oliver

[Carl]

Hi Oliver,

 

TweenLite.delayedCall() is perfectly synchronized with the rest of the engine. So if you create a tween that is 5 minutes long AND a delayedCall() that is set to fire at 5 minutes you can be absolutely certain that the delayedCall with fire the instant the tween completes, even if the user switches tabs 10 times or if the CPU gets bogged down for a considerable amount of time. 

 

setInterval in general is not terribly precise and is not at all synchronized with the rest of GSAP

 

http://stackoverflow.com/questions/8173580/setinterval-timing-slowly-drifts-away-from-staying-accurate

https://zetafleet.com/blog/2010/04/why-i-consider-setinterval-to-be-harmful.html

 

A little secret: delayedCall() actually creates a TweenLite tween behind the scenes with an onComplete callback. 

[katerlouis]

I am also interested in accessing a repeat-counter. Surely GSAP has to keep track and using one under the hood, right?

 

My use case:

 

var tween = TweenMax({}, 1, { repeat: 10 })
	.eventCallback("onRepeat", function() {
      
      	// how can I access the repeat count of the tween?
      	var repeatCount = ???
      
    	if (repeatCount < 5)
          // do this
          
        else 
          // do that
          
       	inBothCases("doThis");
    });

 

[GreenSock]

No, there isn't something like that but it's pretty easy to figure out: 

 

var repeatCount = Math.floor(tween.totalTime() / (tween.duration() + tween.repeatDelay()));