Jump to content
Search Community

Using onRepeat

jjames test
Moderator Tag

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

I'm having trouble getting the tween.to's in my onRepeat function to sync with my TimelineMax:


My CodePen is here: http://cdpn.io/kwxIJ //WARNING THERE IS A 3.5 SECOND DELAY AT START


The Flash tutorial that I'm trying to replace is here: http://www.olympusmicro.com/primer/java/fuelcell/index.html


On the first run it looks like it's working just fine. 

Wait for about 2 minutes: You'll notice that the "water" molecule has started translating below it's original point. 

Many minutes later: The water molecule will just blink in and out at the bottom of the animation. 


I believe I need to use the onRepeatParams to tell my swapWater function exactly what it should do, or, perhaps that's not the solution. 


Thanks for any help. 




Link to comment
Share on other sites

Found a solution: 

Added/Removed/Moved the following in my JS:


var isWaterVisible = false; //added


onRepeat:swapWater //removed

function swapWater(){} //removed


water.css("visibility","hidden"); //added to buildAnimation() {}


tl.to(water.... //all moved inside of buildAnimation() {}
onComplete: function() {
            if (!isWaterVisible) {
              water.css("visibility", "visible");
              isWaterVisible = true;
          } //added to last to. of water molecule right after {alpha:0


and it works perfect now.. 

Link to comment
Share on other sites

Glad you found a solution. Just so you know, it wasn't a sync problem. It had to do with the fact that you were continually adding duplicate (conflicting) tweens to the beginning of the timeline every time the timeline repeated. Remember, your onRepeat gets called every time it repeats, and in order to have super accurate timing, the repeat doesn't always start EXACTLY at the beginning because that could cause time drifting (imagine if the CPU bogged down and it rendered a frame 0.00001 second before the end of the timeline, and then the next render was 0.25 seconds later - the correct behavior would be to render the timeline as if it's at 0.24999999 seconds into the repeat rather than at to 0 position). 


One other solution would have been to add tl.eventCallback("onRepeat", null); into your onRepeat callback so that it only gets called once. That way you're not creating conflicting tweens constantly. 

  • Like 1
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...