Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
sneruz

Disable Scroll Trigger pinning on mobile.

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", () => {
    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

Share this post


Link to post
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 4

Share this post


Link to post
Share on other sites

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

 

  • Like 1

Share this post


Link to post
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.

×