0

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)

Schematic diagram enter image description here

Improve this question
Related questions
0
In gsap scrolltrigger Why a div is vanishing when a trigger element reach to start and end view port?
0
Superscrolloroma offset, animation should start when sections enters viewport
1
GSAP ScrollTrigger Markers Moving with Scroll Instead of Staying Fixed - React Vite
Load 1 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.