Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Loop a staggerTo [basic banner]

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.