javascript - Gsap scrolltrigger结合时间线？

Question

我目前有一个带有 GSAP 的滚动触发器设置，它固定在一个点上，然后垂直滚动一些幻灯片。一切都按预期工作。但是，在转到下一张幻灯片之前，我不确定如何在每张幻灯片中设置内部时间线。理想情况下，幻灯片 1 会按原样显示，然后幻灯片中的内容会循环播放其内容（淡出、淡入），然后再转到下一张幻灯片索引等等。

https://codepen.io/mDDDD/pen/dyWRqJW

    const sections = gsap.utils.toArray('.slide');
    const innerSections = gsap.utils.toArray('.slide--inner');
    const numSections = sections.length - 1;
    const snapValue = 1 / numSections;
    let oldIndex = 0;
    const navList = document.querySelectorAll('.timeline-nav__list-item');

     gsap.to(sections, {
      yPercent: -100 * numSections,
      ease: 'none',
      scrollTrigger: {
        pin: '#pin',
        scrub: true,
        snap: snapValue,
        markers: true,
        end: 'bottom bottom',
        onUpdate: (self) => {
          const currentIndex = Math.round(self.progress / snapValue);
          if (currentIndex !== oldIndex) {
            console.log(currentIndex);
            navList[oldIndex].classList.remove('is-active');
            navList[currentIndex].classList.add('is-active');
            oldIndex = currentIndex;
          }
        },
      },
    });