Jump to content


Trying to repeat a new animation onComplete

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

Hey There,


This is my first post here at GSAP forums. Loving the tool so far! I'm a designer that's learning JS, so my code is probably going to be meh. 


I'm having a little problem though, I have the animation running just fine, but wanted the three circles to continue to spin after the main animation. So I used onComplete to run another function that has the continued animation inside. It seems to work "kind of". The problem is only one of the circles continues to spin. It looks like it tries at first and then gives up and rotates just one circle. What am I doing wrong (I'm sure a few things)?


Any help or tips would be much appreciated.

See the Pen vRXymV by Zaperela (@Zaperela) on CodePen

  • Thanks 1
Link to comment
Share on other sites

You can simply put repeat: -1 on the single tween within the timeline. :)


If you want them to do something slightly different you could add a new tween to the end with new property values and repeat that one.


See the Pen pLENGR?editors=0010 by sgorneau (@sgorneau) on CodePen


  • Like 6
  • Thanks 1
Link to comment
Share on other sites

Awesome! Thanks, Shaun! *Digital High Five* I was totally over thinking it.


Working how I was hoping by just adding staggerTo to the end of the timeline and adding repeat: -1.



See the Pen WzGRGp by Zaperela (@Zaperela) on CodePen


  • Like 1
Link to comment
Share on other sites

Hi @Zaperela:)


Welcome to the forum.


The reason your demo wasn't (kinda sorta) working was the onComplete was in the wrong spot and being called three times. It is a bit confusing, but for stagger tweens the onCompleteAll goes after the stagger number. So what you were seeing was the infinite circle repeat timeline starting before it should have which caused an overwrite. 


More info in the stagger docs:



In addition to @Shaun Gorneau's demo or moving that onComplete call on the stagger, you could also move the onComplete to the vars of the cs timeline. Lots of options.


See the Pen eMdvop by PointC (@PointC) on CodePen


See the Pen YaGNYP by PointC (@PointC) on CodePen



Hopefully that helps. Happy tweening and welcome aboard.




  • Like 5
Link to comment
Share on other sites

Slight clarification for anyone following along. I don't want to confuse anyone.


On a regular tween the onCompleteAll goes after the stagger number.

TweenMax.staggerFrom( targets:Array, duration:Number, vars:Object, stagger:Number, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteAllScope:* ) 


For a timeline, the onCompleteAll goes after the stagger and position:

.staggerFrom( targets:Array, duration:Number, vars:Object, stagger:Number, position:*, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteScope:* ) 


Happy tweening.




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