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;
}

0stone0 · Accepted Answer

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;
}

GSAP stagger animation

Answers (1)

Related Questions