GSAP 交错动画

Question

如果 element 有 class .stagger 那么我正在尝试执行一张一张地显示卡片的动画。

在我当前的演示中，cards 一起淡入淡出。即使我指定了 delay?

如何让卡片一张一张出现？

  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>

Answer 1

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

每张卡都有 0.5s 延迟，所以它们会一起移动。

根据当前卡片索引使用延迟：

delay: 0.5 + (0.5 * i)

所以每张卡片都会延迟（0.5s + 每个索引半秒）

  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 交错动画

GSAP stagger animation

javascript

gsap

scrolltrigger