GSAP错位动画

Question

如果一个element有类.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

在我目前的演示中，所有的卡片一起褪色。即使我指定了延迟？

每一张卡都有一个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>

​