Oliver16Years

Accessing repeat counter

Recommended Posts

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

Share this post


Link to post
Share on other sites

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? 

  • Like 3

Share this post


Link to post
Share on other sites

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

  • Like 2

Share this post


Link to post
Share on other sites

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. 

  • Like 2

Share this post


Link to post
Share on other sites

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");
    });

 

Share this post


Link to post
Share on other sites

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()));

 

  • Like 1

Share this post


Link to post
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.