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?
