Jump to content
Search Community

Accessing repeat counter

Oliver16Years test
Moderator Tag

Go to solution Solved by GreenSock,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

Link to comment
Share on other sites

  • Solution

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
Link to comment
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
Link to comment
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
Link to comment
Share on other sites

  • 2 years later...

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

 

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...