Jump to content


Loop a staggerTo [basic banner]

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

Hello schtals, and Welcome to the GreenSock Forum!


You can add repeat:-1 on your TimelineMax constructor

var tl = new TimelineMax({ repeat: -1 });

tl.staggerTo ([f1, f2, f3, f4, f5], 0.15, {opacity: 1}, 5 );

the -1 stands for infinite  repeat


repeat : Number - Number of times that the animation should repeat after its first iteration. For example, if repeat is 1, the animation will play a total of twice (the initial play plus 1 repeat). To repeat indefinitely, use -1. repeat should always be an integer.


You can find more info about repeat in the TimelineMax Docs:




Let us know if you need anymore assistance and Happy Tweening! :)

  • Like 4
Link to comment
Share on other sites

Hi schtals  :)


you can use Position Parameterhttp://greensock.com/position-parameter


tl.staggerTo ([f1_1, f1_2, f1_3], 0.5, {opacity: 1, left:"+=40px"}, 0.25 )
  .staggerTo ([f1_1, f1_2, f1_3], 0.5, {opacity: 0, left:"-=40px"}, 0.25 , "+=3" );
  • Like 2
Link to comment
Share on other sites

To add to Diaco's great advice!


You could also just add a empty to() tween between your animations like so:

// to( target, duration, vars)
.to({}, 3, {}) 

you just pass an empty object for the tween target and the tween vars

.staggerTo ([f1_1, f1_2, f1_3], 0.5, {opacity: 1, left:"+=40px"}, 0.25 ) // load in anim
.to({}, 3, {}) // adds a 3 second pause between the two animations
.staggerTo ([f1_1, f1_2, f1_3], 0.5, {opacity: 0, left:"-=40px"}, 0.25 ) // load out anim


  • Like 1
Link to comment
Share on other sites

It would be this for jQuery CDN link

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Found her on Google CDN page:



<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.8.2/jquery.gsap.min.js"></script> 


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.