Creative Coding Club

You may hear your CSS purist friends sing the vitrues of using sibling-index() to dynamically set incremental delays on multiple elements.

Although this can work for animating characters in a single word, things can get complicated when you want to sequence these animations with other elements.

Basic GSAP Stagger Sequence

In the example above each word animates in one after the other.

GSAP naturally aligns these animations in sequence, but with CSS you would have to know the full duration of the first line to use as the delay of the 2nd line.

The third line has to have its delay set to the sum of the durations of the first and second line.

Keep in mind each line has different numbers of characters with overlapping animations.

What a nightmare!

Multiple Staggers with Same Duration

In the demo above each line starts and ends at the exact same time even though there are different numbers of characters in each line.

The secret here is that each tween in the timeline has its stagger amount set to 1 second.

Study the timeline defaults code:

const tl = gsap.timeline({
  defaults:{
    duration:1, 
    stagger:{
      amount:1, 
      from:"edges"
    }
  }
})

By setting stagger amount to 1 it means that each staggered element will start within 1 second.

The last character to animate in each line will start at a time of 1 second.

Whether a line has 10 or 30 characters, GSAP will distribute the start times to make sure the first character starts at time:0 and the last one starts at time:1.

Since all the characters in each line have the same duration, the LAST characters in each line will start and end at the same time 🚀 

I set from:"edges" just to show off a bit ✨ 

The timeline is just 3 simple tweens sharing the same default stagger values:

.from(splits[0].chars, {yPercent: 100}, 0)
.from(splits[1].chars, {yPercent: 100}, 0)
.from(splits[2].chars, {yPercent: 100}, 0)

Bonus Challenge

I don't have time to go into this now, but the staggers below are attainable when you get deeper into GSAP's advanced features as taught in Creative Coding Club.

The first line with the bounce is fairly easy for intermediate users but the second one would probably have some pros scratching their heads.

Notice how the characters at the end of the animation travel further with a longer duration.

We progressively increase values by Hacking Ease Curves.

That video is 5 years old. Tricks like this are nothing new, but very few people know these features exist or how to use them.

Features like these give professional animators the flexibility they need to go way beyond the limitations of CSS and other JS tools.

Share with Friends

The next time one of you peers pressures you to use CSS over GSAP, feel free to share this article and ask them to build the first two animations on this page.

Learn Everything I know About GSAP

I spent nearly 8 years working at GreenSock creating documentation, training videos, answering thousands of support questions and doing on-site training. 

Since working there I've spent nearly 6 years documenting everything I know about GSAP in my extensive Creative Coding Club courses.

See why this training is often hailed as "the best GSAP training on planet" (reviews).

Join today and start mastering GSAP