Staggering Web animations with GSAP

Animations with GSAP at first can be daunting and frustrating but with a good grasp of GSAP, it gives a superpower kind of feeling.

The GreenSock Animation Platform is known by the abbreviation GSAP. Because it can animate DOM elements, canvas, SVG, CSS, WebGL, generic JavaScript objects, and so much more, it is undoubtedly the best animation library for the web.

The developers of GSAP firmly consider it to be the world's quickest full-featured scripted animation tool.

In this article, I will be explaining the stagger effect on GSAP and how to implement it in your code.

Prerequisites

This tutorial assumes the reader has the following:

1. Node >= 8.10 installed on their local development machine

2. Codepen

3. Basic understanding of gsap methods

4. Basic knowledge of HTML, CSS, JavaScript

Stagger

In GSAP Stagger simply means adding delay to a sequence of animations with the same selectors.

The code above demonstrates the animation of different divs with the class of hello, we animate them sequentially such that each of them has a delay of 0.3 secs as they drop down in the y-direction by 50.

gsap.to('.hello', {y:50, stagger:0.3})

Advanced stagger

There is more to stagger than the above, stagger could be a number or an object, and the object allows us to add more features and complexity than just setting a delay in seconds.

Setting the Amount

Setting the amount in the stagger object allows the animation to flow for the given amount in seconds and the animation delay time is equally spread across by the gsap by the GSAP Engine.

gsap.to('.hello', {y:50, stagger:{
  amount:1
}})

Setting the Each and From in the Stagger object

each and from are keys in the stagger object that allows to specify the time of delay for each element and from allows us to specify the poisition (center, end, edges) from which the animation will occur, usually stagger animation starts from the first element for this demo we will be setting the from (position) to center.

gsap.to('.hello', {y:50, stagger:{
  each:0.2,
  from:"center"
}})

Conclusion

I hope you were able to learn about the stagger animation and how it works from this article and the code pen examples.