Disable Scroll Trigger pinning on mobile.

[sneruz]

I want to disable the pinning of an element on mobile/tablet displays (i.e less than 767px) but have it enabled on larger displays.

let timeout = false;
window.addEventListener("resize", () => {
    clearTimeout(timeout);
    timeout = setTimeout(pinState, 250);
});

function pinState() {
    let triggerState;
    if (window.innerWidth > 767) triggerState = true;
    else triggerState = false;
    ScrollTrigger.create({
        trigger: ".welcomePage",
        start: "top top",
        pin: triggerState,
    });
}
pinState();

This works when I open on mobile and desktop, but when I resize the browser window to less than 767px on desktop, the pinning still persist. I have to refresh the browser window to get it to work on the resized desktop browser.
Is there a way to force ScrollTrigger to 'refresh' the pin state without refreshing the page?

See the Pen LYGWoKL by sneruz (@sneruz) on CodePen.

[GreenSock]

You're gonna love what's coming in version 3.4. There's a new matchMedia() method that does EXACTLY what you're talking about here. This is an example: 

See the Pen GRoyWBd by GreenSock (@GreenSock) on CodePen.

 

We hope to release 3.4 within the next week. You're welcome to use the beta in the mean time if you'd like. https://assets.codepen.io/16327/ScrollTrigger.min.js

 

Does that help? 

[sneruz]

Thanks Jack for the prompt reply. Will be sure to download the new release as soon as it live.