sneruz Posted July 4, 2020 Share Posted July 4, 2020 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 Link to comment Share on other sites More sharing options...
GreenSock Posted July 4, 2020 Share Posted July 4, 2020 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? 6 1 Link to comment Share on other sites More sharing options...
sneruz Posted July 5, 2020 Author Share Posted July 5, 2020 Thanks Jack for the prompt reply. Will be sure to download the new release as soon as it live. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now