Jump to content
Search Community

Disable Scroll Trigger pinning on mobile.

sneruz test
Moderator Tag

Recommended Posts

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", () => {
    timeout = setTimeout(pinState, 250);

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

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

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? 

  • Like 6
  • Thanks 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...