GSAP stagger animation

If an element has the class .stagger then I'm trying to execute an animation which shows the cards one by one.

In my current demo, the cards all fade in together. Even though I've specified a delay?

How can I the cards to appear one by one?

  const boxes = gsap.utils.toArray('.stagger');

  boxes.forEach((box, i) => {
    const anim = gsap.fromTo(box, {
      autoAlpha: 0,
      y: 50
    }, {
      duration: 1,
      autoAlpha: 1,
      y: 0,
      delay: 0.5,
    });
    ScrollTrigger.create({
      trigger: box,
      animation: anim,
      toggleActions: 'play none none none',
      once: true,
    });
  });

.section{
  background: lightblue;
  padding: 100px 0;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>


<div class="section">
  <div class="container">
    <div class="row">

      <div class="col-4">
        <div class="card text-center stagger">
          Card
        </div>
      </div>

      <div class="col-4">
        <div class="card text-center stagger">
          Card
        </div>
      </div>

      <div class="col-4">
        <div class="card text-center stagger">
          Card
        </div>
      </div>

    </div>
  </div>
</div>

Solution

In my current demo, the cards all fade in together. Even though I've specified a delay?

Each card has a 0.5s delay, so the'll move all together.

Use a delay based on the current card index:

delay: 0.5 + (0.5 * i)

So every card will be delayed with (0.5s + half a second for each index)

  const boxes = gsap.utils.toArray('.stagger');

  boxes.forEach((box, i) => {
    const anim = gsap.fromTo(box, {
      autoAlpha: 0,
      y: 50
    }, {
      duration: 1,
      autoAlpha: 1,
      y: 0,
      delay: 0.5 + (0.5 * i),
    });
    ScrollTrigger.create({
      trigger: box,
      animation: anim,
      toggleActions: 'play none none none',
      once: true,
    });
  });

.section{
  background: lightblue;
  padding: 100px 0;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>


<div class="section">
  <div class="container">
    <div class="row">

      <div class="col-4">
        <div class="card text-center stagger">
          Card
        </div>
      </div>

      <div class="col-4">
        <div class="card text-center stagger">
          Card
        </div>
      </div>

      <div class="col-4">
        <div class="card text-center stagger">
          Card
        </div>
      </div>

    </div>
  </div>
</div>