Gsap 滚动触发器合并时间线？

如何解决Gsap 滚动触发器合并时间线？

我目前有一个带有 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;
          }
        },},});