Jump to content
Search Community

Delay of 2nd Stagger after 1st too much

CappMarvell 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 could use some assistance getting different staggers to appear in sequence.


My codepen URL is:


I have a group of blue bars that appear in sequence, starting from the bottom (from 0% to 100% opacity). Once that sequence is completed, another sequence changes the blue bars with a css class called "swap" to green bars.


The last blue bar in the sequence only changes halfway (blue and green). As such, there's a separate css class for that called "swaphalf". The animation for this is working.


However...there's a delay before the half bar displays. I'd like for that delay to be removed, so that I can set the half bar to appear as if it were in the same sequence of the blue to green bar swap.


I thought adding ", 0.025" would start them both at the same time, but that didn't work. Placing it ahead in the chain didn't work either. I tried placing it in my load function. However, the items are present at that point, so I get undefined errors.


Any help would be appreciated.





See the Pen kaswg by anon (@anon) on CodePen

Link to comment
Share on other sites

Thanks for the pen, it was very helpful.


I think the problem was that you were using a staggerTo on a single element, and you were trying to offset the position of the staggerTo using the stagger parameter instead of the position parameter (which comes after position) See docs for full method signature of staggerTo.


One way of fixing would just be to add a 0 as the stagger parameter in the last staggerTo()

.staggerTo(bars1greenhalf, 0.8, {className:"greenBarHalf-01", ease:Power2.easeOut}, 0, "-=0.775")

However I would prefer just to use a to() tween since only 1 element (target) needs to be animating and thus no stagger is needed

.staggerFrom(bars1blue, 0.8, {opacity: 0, ease:Power2.easeOut}, 0.025)
.staggerTo(bars1green, 0.8, {className:"greenBar", ease:Power2.easeOut}, 0.025)
.to(bars1greenhalf, 0.8, {className:"greenBarHalf-01", ease:Power2.easeOut}, "-=0.775")




Be sure to see our latest tutorial that discusses in depth the many ways to use the position parameter: http://greensock.com/position-parameter

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