EndTrigger wrong when seperate scrollTrigger for horizontal scroll.

[ferriss]

Hi, 

 

Hopefully this is simple question to not need a reproduction.

 

I have a Header with scrollTrigger:

 

ScrollTrigger.create({
    trigger: '.l-header--sticky',
    start: 'top top',
    endTrigger: 'html',
    end: 'bottom bottom',
    pin: true,
    pinSpacing: false,
    markers: true,
    scrub: 1
});

 

Half way down the vertical page, I have a horizontal scrolling section:

 

gsap.to(container, {
    x: () => -(container.offsetWidth - document.documentElement.clientWidth) + "px",
    ease: "none",
    scrollTrigger: {
        trigger: container,
        pin: true,
        scrub: true,
        end: () => "+=" + container.offsetWidth
    }
});

 

Now, this means the calculation for the header endTrigger is wrong as it's not taking into account the horizontal vertical scroll. Cannot see anything in the docs to refresh this calculation?

 

Thanks.

[akapowl]

 

Hey @ferriss

 

24 minutes ago, ferriss said:

Now, this means the calculation for the header endTrigger is wrong as it's not taking into account the horizontal vertical scroll. Cannot see anything in the docs to refresh this calculation?

 

If your ScrollTriggers appear in your code in this order, then yeah, your first ScrollTrigger can't know the pinning duration of any ScrollTrigger created later on. What could help is setting a refreshPriority of -1 to your ScrollTrigger with the html-endtrigger, so it will on refresh get considered after your horizontal-pinning ScrollTrigger (which by default has a refreshPriority of 0).

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.sort()

 

Give it a shot and let us know if it helps.

 

 

[ferriss]

Perfect, that's sorted it. Thanks!