ScrollTrigger endTrigger isn't scoped by context/matchMedia

[antonjb]

Hi greensock,

I believe there is an issue with ScrollTrigger's endTrigger not being scoped by gsap.context or gsap.matchMedia.

Here is a CodePen of the issue I'm experiencing: https://codepen.io/antonjb/pen/mdzqGxK

Steps to reproduce:

1. Comment out the first instance of .stopper
2. The Marker will move down to the second instance of .stopper and scrolling will work
3. Uncomment the first instance and the end marker moves up to the first stopper despite the scope being set to the containing .wrapper element

There's also an extra .square element, which is the trigger, if you uncomment that, the start marker does not change, meaning that the scope is working for the trigger.

Scroll end marker in the correct place

When the extra stopper is uncommented, it's in the incorrect place

[antonjb]

My current workaround is to use the selector utility method

const matchMediaCTX = gsap.matchMedia($ref)
const q = gsap.utils.selector($ref)

matchMediaCTX.add('(min-width: 769px', () => {
    ScrollTrigger.create({
        start: 'center center',
        end: 'center center',
        trigger: ".sticky",
        endTrigger: q(".stopper"),
        pin: true,
        scrub: true,
    })
})

[jackdoyle]

Thanks for pointing this out and providing an excellent minimal demo. Super helpful! This should be resolved in the next release. It only affects when you use selector text for the endTrigger. Your workaround solves it well, and you could also just pass in a reference to the actual element rather than selector text.