Jump to content
Search Community

Anim Feature Request– Seamless Staggering

Gary 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

Oh how I love GSAP’s staggering.  It’s so simple, and yet so powerful.  The one thing that I wish it could do, though, is seamless staggering.


See the animation at

See the Pen OyMmvB by garyc (@garyc) on CodePen


I had to add a bunch of repeating to have seamlessness between each iteration.  However, eventually the repeating stops, after the last repeat.  I know I could set repeat to -1 but that would mess up the outer timeline’s duration (see the trackbar).



To get a better sense of what I am talking about, in the codepen, remove the repeat and yoyo in the charAction by changing the anim entry to this:


anim:{ dur:4, stagger:0.12, ease:"curve inout" }, 


The characters all have to stop before the main timeline can start again, so at the beginning and end of the outer timeline there are characters that aren't moving.  I’d love to be able to pass in a seamless flag that pre-positions all the characters before the last one, skipping part of the animation, using the ease, and right away starts all of them.  It would also handle the end of the timeline by continuing the animation what was skipped at the start for all but the last one So, I wouldn’t need to repeat, the outer timeline would be as short as possible, and the animation could be looped forever without characters stopping.

See the Pen OyMmvB?editors=101 by garyc (@garyc) on CodePen

Link to comment
Share on other sites

Hi Gary :)


if i understood correctly ! , you can use something like this : 

var myStagger = new TimelineMax({repeat:-1,yoyo:true}).staggerTo(".box",1.5,{opacity:0.5},0.2);

var tl = new TimelineMax({repeat:3,onComplete:function(){
  myStagger.eventCallback("onRepeat",function(){ myStagger.pause() });


See the Pen yYOwZV by MAW (@MAW) on CodePen

  • Like 1
Link to comment
Share on other sites

Thanks for the response, Diaco.  


I can't use repeat -1 in my ProStyle library because the tweens are added to an outer timeline that must have a measurable duration, since it uses controllers like the trackbar.



Let me try to explain it better.  Here's a fork of my original codepen that has the controllers setup to pause right away.


See the Pen GpZeab?editors=101 by garyc (@garyc) on CodePen


Notice that none of the characters are rotated at position 0.  It can never be like this in a seamlessly staggered loop.   Similarly, if you click on the track bar at the end (position 6.04), no characters are rotated there either.


Since there are 19 characters, each staggered 0.12 seconds, position 2.04 shows what the start should look like to make it seamless.  (19-2) * 0.12 = 2.04.  The overall timeline is currently 6.04 because it is a 4 second animation per letter plus the 2.04 staggering.  


If I could do it seamlessly, the main timeline would only be 4 seconds instead of 6.04, and at no time would all the letters be lined up.

Link to comment
Share on other sites

in this way , the myStagger timeline don't have any effect on your outer/master Timeline duration , so you can set to repeat:-1 and play/pause (or whatever) at the master tl start/end :

var myStagger = new TimelineMax({repeat:-1,yoyo:true}).staggerTo(".box",1.5,{opacity:0.5,rotation:90},0.2);

var OuterTl = new TimelineMax();

//OuterTl.add(function(){  myStagger.pause() } , 10); // pause myStagger after 10s

OuterTl.add(function(){  myStagger.eventCallback("onRepeat",function(){ myStagger.pause() }) } , 10);  

Link to comment
Share on other sites

I'm not sure how I could incorporate something like that into ProStyle.  It supports an arbitrary number of nested timelines and the duration of the parent timelines are a function of the durations of the children.  See https://prostyle.io/concepts/#animation


The user can seek anywhere from 0..x on the main timeline and all children are moved to a deterministic position.  The codepen that I included has just one set of text but there could be other things being animated.


A helper parameter would make it much simpler than callbacks (similar to how yoyo simplifies). I imagine the stagger parameter optionally taking an array instead of number that could have the delay and a boolean for seamless.

{ stagger: [0.12, true] }

I'm not sure how many people would want seamless staggering. Similar to when I proposed xPercent/yPercent, it's something that would be very helpful for me but I don't have enough insight into what most people do with GSAP to know if it would be helpful for many others. I thought I'd at least put it out there for consideration.  Thanks!

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