GSAP stagger animation

Question

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>

score 1 · Accepted Answer · answered Jan 18 '22 at 15:08

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>

GSAP stagger animation

1 Answers1