0

I currently have a scrolltrigger setup with GSAP that pins at a point and then scrolls through some slides vertically. All is working as expected. However I'm not sure how to setup an inner timeline inside each of the slides before moving on to the next slide. Ideally what would happen is Slide 1 is showing as is and then the content inside that slide cycles through its content (fade out, fade in) before moving on to the next slide index and so forth.

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;
          }
        },
      },
    });
hendy0817
  • 979
  • 2
  • 20
  • 47
  • Hey Mark. I would set things up differently. Instead of creating a different tween and ScrollTrigger for _each_ section I would create a single timeline and ScrollTrigger for _all_ sections. That will help the snapping behavior work a lot better than what it's currently doing. It will also make it easier to fire off set animation (entry and exit) when necessary. – Zach Saucier Jul 20 '21 at 22:30
  • Alternatively you could use CSS's built in scroll snap functionality paired will regular ScrollTrigger animations for each section. Demo of that [here](https://codepen.io/GreenSock/pen/YzyaKrq). – Zach Saucier Jul 20 '21 at 22:32
  • Ok I will give that a try! So with the setup now gsap.to sections block would I nest the inner slide timelines inside that code block? Or create another timeline and call that inside? I think I’m mostly confused on where and when to call the timelines so they follow correct order. Thanks for the help! – hendy0817 Jul 20 '21 at 22:49

0 Answers0