In Nesting timeline, how to make the start of one timeline coincide with a stage in another timeline?

[Jiang]

I want the overlay timeline to start animating from the text2 label. That is, when the text-2 animation starts, the overlay timeline will start running.

gsap.registerPlugin(ScrollTrigger)
    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: '.section',
        markers: true,
        pin: true, // pin the trigger element while active
        start: 'top top', // when the top of the trigger hits the top of the viewport
        end: 'bottom top', // end after scrolling 500px beyond the start
        scrub: true
      }
    })

    tl.to('.text-1', { x: -400 });
    tl.to('.text-2', { opacity: 1 }, "<");
    tl.to('.text-2', { opacity: 0 }, "text2");
    tl.to('.text-3', { opacity: 1 }, "<");
    tl.to('.text-3', { opacity: 0 });
    tl.to('.text-4', { opacity: 1 }, "<");

    const tl2 = gsap.timeline({
      scrollTrigger: {
        trigger: '.section',
        start: 'top top', // when the top of the trigger hits the top of the viewport
        end: 'bottom top', // end after scrolling 500px beyond the start
        scrub: true
      }
    })
    tl2.to('.overlay', { opacity: 0.2 })

    gsap.timeline()
            .add(tl)
            .add(tl2)

 

See the Pen XJmRYKP by Kotomi-Ichinose (@Kotomi-Ichinose) on CodePen.

[Rodrigo]

Hi,

 

A few things, first you're adding Timelines with ScrollTrigger configuration to a master timeline, that can create logic issues as mentioned here:

https://gsap.com/resources/st-mistakes#nesting-scrolltriggers-inside-multiple-timeline-tweens

 

On top of that both ScrollTrigger instances have the same trigger and configuration, the only difference is that one pins the trigger element (same on both ScrollTrigger configs) and the other doesn't. It would be far easier and also you would avoid the logic issue mentioned in the link above, to just move everything on a single Timeline and give that instance the ScrollTrigger config and add the overlay Tween at the same label:

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

tl.to(".text-1", { x: -400 });
tl.to(".text-2", { opacity: 1 }, "<");
tl.to(".text-2", { opacity: 0 }, "text2");
tl.to(".overlay", { opacity: 0.2 }, "text2");
tl.to(".text-3", { opacity: 1 }, "<");
tl.to(".text-3", { opacity: 0 });
tl.to(".text-4", { opacity: 1 }, "<");

Another alternative is to use the labelToScroll method to get the scroll position of the label in the first Timeline and use that as the starting point for the ScrollTrigger of the second Timeline:

const section = document.querySelector(".section");

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

tl.to(".text-1", { x: -400 });
tl.to(".text-2", { opacity: 1 }, "<");
tl.to(".text-2", { opacity: 0 }, "text2");
tl.to(".text-3", { opacity: 1 }, "<");
tl.to(".text-3", { opacity: 0 });
tl.to(".text-4", { opacity: 1 }, "<");

const tl2 = gsap.timeline({
  scrollTrigger: {
    trigger: section,
    start:tl.scrollTrigger.labelToScroll("text2"),
    end: "bottom top",
    scrub: true,
    markers: { indent: 120 },
    id: "overlay"
  }
});

tl2.to(".overlay", { opacity: 0.2 });

Even in this case is better to have both Timelines alone and not as children of another Timeline.

 

Honestly I think the most robust solution is to use a single Timeline since the setup you have, in your demo at least, allows for that .

 

Hopefully this helps

Happy Tweening!