Stagger animation with GSAP (GreenSock Animation Platform).

Subhash Chaudhary

January 16, 2022

4 min read

Overview

Staggering is a very simple concept. It refers to a visual change that occurs one by one in sequential order to the elements. Elements may completely or partially overlap with each other during staggering.

Stagger animation with GSAP

Stagger animation can be useful in a variety of situations. For example, if you have a long list of items to display in the viewport, staggering them can be useful. The staggering creates the illusion of a smooth page or app experience.

It can also come in handy if you have a long list of grids or divs. Staggering allows you to animate those grids and create a smooth page experience.

How can we create stagger animation?

There are several methods for creating a stagger animation. However, in this post, I will demonstrate how to do stagger animation with GSAP. If you're unfamiliar with GSAP, it's a JavaScript animation library that's been optimized for speed and performance.

Because this is not a post about HTML or CSS, I will not go into detail about them. I'll only go over how to make a stagger animation with GSAP.

Let's create an index.html file inside of an empty folder and paste the following code.

Completed source code

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Stagger Animation</title>

    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      html {
        background-color: #111111;
      }

      main {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        width: 90%;
        margin: 0 auto;
        overflow: hidden;
      }

      .container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
      }

      .box {
        color: white;
        background-color: #222222;
        width: 200px;
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <main>
      <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
        <div class="box">8</div>
        <div class="box">9</div>
      </div>
    </main>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
    <script>
      //  Lets start animating our divs
      const box = document.getElementsByClassName("box");

      gsap.from( box, {
        y: 100,
        stagger: 0.1,
        repeat: -1, //Repeats infinitely if set to -1
        yoyo: true, //animation goes back and forth seamlessly
      });
    </script>
  </body>
</html>

Code explanation

Let's take the chunk of code and try to understand it.

gsap.from( box, {
  y: 100,
  stagger: 0.1,
  repeat: -1, //Repeats infinitely if set to -1
  yoyo: true, //animation goes back and forth seamlessly
});

The above code simply explains that, take the box element, and animate that box from the given values to its original position.

Here,

y: 100 means, the element will move from positive Y-axis to its original position.
stagger: 0.1 means, each box element will start 0.1 seconds after the previous box.
repeat: -1 means, the staggering animation will keep repeating infinitely.
yoyo: true means, the animation is done back and forth seamlessly when repeat: -1 is set.

Conclusion

You have created stunning animation on the web using GSAP. The above post was only a basic tutorial. You can create more advanced staggering animations with the help of GSAP.

You can visit the official site for advanced animation.

Stagger animation with GSAP (GreenSock Animation Platform).

Overview

How can we create stagger animation?

Code explanation

Conclusion

SUBHASH CHAUDHARY

Social Links