GSAP ScrollTrigger don't work as espected in my timeline

[Frontend.dev]

Hello guys from GSAP community!
  You have created a cool tool, congratulations to you. And now, I'm trying to recreate the text animation in the second section from Apple's website: https://www.apple.com/airpods-pro/
The problem is that ScrollTrigger doesn't behave quite as I expected and instead of the Fade-In-Out effect on individual sentences like on the reference, I have the transparency of the entire text changing as soon as it enters the viewport. Can you please tell me what I'm doing wrong? Maybe someone has already tried to recreate this animation?

See the Pen MWxeqdB by sokolenkov (@sokolenkov) on CodePen

[Rodrigo]

Hi @Frontend.dev and welcome to the GSAP Forums!

 

The problem is that you are targeting all the elements with this selector:

tl
  .to(".list-item", { duration: 0.5, opacity: 1 })
  .to(".list-item", { duration: 0.5, opacity: 0 }, 0.5);

So they all animate at the same time. Also a couple of notes, the default duration of a GSAP Tween is 0.5 seconds, so there's no need to set the duration in the config.

You can achieve this in two ways, looping through the elements:

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".section",
    start: "top center",
    end: "bottom center",
    markers: true,
    scrub: true
  }
});

const items = gsap.utils.toArray(".list-item");
items.forEach((item, i) => {
  tl.to(item, { opacity: 1 })
  if (items[i - 1]) {
    tl.to(items[i - 1], { opacity: 0.3 }, "<")
  }
});

Or using staggers and a simple conditional block for the opacity of the last element:

const tl = gsap.timeline({
  scrollTrigger: {
    toggleActions: "play reverse play reverse",
    trigger: ".section",
    start: "top top",
    end: "bottom bottom",
    markers: true,
    scrub: true
  }
});
const items = gsap.utils.toArray(".list-item");
const amount = items.length;
tl
  .to(items, { stagger: 0.5, opacity: 1 })
  .to(items, {
    stagger: 0.5,
    opacity: (i) => (i < amount - 1) ? 0.3 : 1,
  }, 0.5);

Here is a fork of your demo using the stagger approach:

See the Pen rNRLQVx by GreenSock (@GreenSock) on CodePen

 

Finally thanks for the simple and minimal demo, we love those around here! 🥳

 

Hopefully this helps.

Happy Tweening!

[Frontend.dev]

Thank you, @Rodrigo! Works almost exactly the same as on Apple's site.