GSAP timeline with ScrollTrigger not working correctly. Set duration has no effect

[DenisLeclair]

I use GSAP 3.6.0 and I would like to know how can I create a duration on my elements.

 

I have two cube, red and blue :

    import gsap from './gsap'
    import ScrollTrigger from './ScrollTrigger'

    gsap.registerPlugin(ScrollTrigger)

    const tl1 = gsap.timeline();

    tl1.to('.cube.red', {
        duration:2, y:100, ease:"linear",
        scrollTrigger: {
            trigger:"#intro",
            markers:true,
            start: "0",
            pin: "#intro",
            //end: '+=1',
            scrub:0,
        }
    })

    tl1.to('.cube.blue', {
        duration:1, y:100, ease:"linear",
        scrollTrigger: {
            trigger:"#intro",
            markers:true,
            start: "0",
            pin: "#intro",
            //end: '+=4',
            scrub:0,
        }
    })

When I scroll, the red cube and the blue cube move together. But I set a different duration.
The red cube has a duration equal 2, and the blue cube has a duration equal 1.

When I scroll, the red cube must move less quickly, but the two cubes move at the same speed...

[Carl]

Hi and welcome to the forums.

 

It's a common logic issue in that you can't have multiple tweens in a timeline with separate ScrollTrigger's controlling them. 

The timeline's playhead can only be in one place at a time which is why you can't have multiple ScrollTrigger's controlling child tweens in the timeline.

 

For more info on this issue and others check out Common ScrollTrigger Mistakes.

 

For your example you can just have 2 tweens with their own ScrollTrigger (no need for a timeline at all)

[DenisLeclair]

Thank you for your answer !

 

I read the document Common ScrollTrigger Mistakes, I follow your recommandation and I tried without timeline, but I have the same problem :

 

import ScrollTrigger from './ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

//const tl1 = gsap.timeline();

gsap.to('.cube.red', {
    duration:2, y:100, ease:"linear",
    scrollTrigger: {
        trigger:"#intro",
        //scrub:0,
    }
})

gsap.to('.cube.blue', {
    duration:1, y:100, ease:"linear",
    scrollTrigger: {
        trigger:"#intro",
        //scrub:0,
    }
})

 

When I comment scrub:0 I show the correct animation, with duration. But I can control with the scroll. If I uncomment scrub:0, I can use the scroll, but I lost the duration... 😕

[GreenSock]

Please read the docs about how duration works with scrub: 

https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub

 

You're trying to link the playhead of both animations to the scrollbar, and you're using the same start and end scroll value for both, so of course they'll scrub in an identical fashion regardless of what duration you have on the tweens. It's a logic issue in your code. 

 

So, for example, if you want the blue one to last twice as long as the red one, you could set end: "+=2" on red, and end: "+=4" on blue (just as an example).

 

Does that help?