gsap.to scrollTriggers seem to be overwriting each other

[willywonka]

Hello all!

 

In a threejs app, I'm triggering the movement of the same object in two separate triggers. They kinda work, but there's a weird glitch happening.

- the first one starts at x:0 (but it won't, it will start at x: -6) which seems to me it's using the startAt from the second animation where I set the startAt to -6.

 

If I remove the startAt() values, the second animation will start at x:0 causing a jump, because it should really start at -6 where the previous animation ended.

Also weird is that when I log position.x onStart() in the second animation, the value will be 0, while if I log it onComplete after the first one, it will be set to -6.

I hope anyone can point me in the right direction. Thank you!

gsap.to(groupHuman.position, {
    scrollTrigger: {
        trigger: ".page2",
        start: "top 95%",
        toggleActions: "play pause resume reverse",
    },
    x: -6, // should start at 0, but will use -6 (see bottom startAt)
    duration: 1.5,
    ease: "power2.inOut",
    startAt: { x: 0 },
    overwrite: false,
});

gsap.to(groupHuman.position, {
    scrollTrigger: {
        trigger: ".page3",
        start: "top 95%",
        toggleActions: "play pause  reverse",
    },
    x: 6,
    duration: 1.5,
    ease: "power2.inOut",
    startAt: { x: -6 },
    overwrite: false,
});

 

 

[GreenSock]

It's pretty tough to diagnose without a minimal demo (like a CodePen), but keep in mind that when you define a startAt like that, it'll render immediately by default. You can stop that by setting immediateRender: false (in the "to" vars object). Does that resolve things for you? If not, please make sure you provide a CodePen or Stackblitz that illustrates the problem and we'd be happy to take a look. 

[willywonka]

Fantastic, I didn't encounter that while going through the docs so I needed someone like you to put me on the right path. This was exactely the problem I was having and your suggestion fixes it: immediateRender: false

 

Thanks a lot for taking the time to help, thoroughly enjoying gsap with threejs!