Jump to content
Search Community

matchMedia without standalone

ferriss test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hi,

 

Is it possible to use matchMedia (which I assume if the only way to add responsive breakpoints) within gsap? Your docs mentions this is the most common setup, but I cannot see a property that allows using breakpoints using that setup, only by using the standalone version?

 

I'm currently using the common setup like so:

 

gsap.to(container, {
    x: () => -(container.offsetWidth - document.documentElement.clientWidth) + "px",
    ease: "none",
    scrollTrigger: {
        trigger: container,
        pin: true,
        scrub: true,
        end: () => "+=" + container.offsetWidth
    }
})

 

This is to do a horizontal scroll lock. On mobile I just want to stack, so the only way I can see to do this is re-code into a standalone setup and then use .matchMedia()? Or is there another nested property.

 

Thanks

 

Link to comment
Share on other sites

From your docs:

 

Quote

Standalone/Custom example

You don't need to put ScrollTriggers directly into animations (though that's probably the most common use case).

 

The above example isn't using that setup, so won't allow the use of .matchMedia() without re-coding to a standalone setup?

 

Yes, I'm aware of JS media queries, but I then didn't want to add in resize debouce as I was hoping GSAP had this in-build so you can resize the browser and it'll degrade without refreshing.

Link to comment
Share on other sites

Sorry, I still don't quite understand what you're asking. You can put whatever code you want into the matchMedia functions. Can you please put what you're trying to achieve into a demo?

 

49 minutes ago, ferriss said:

Yes, I'm aware of JS media queries, but I then didn't want to add in resize debouce as I was hoping GSAP had this in-build so you can resize the browser and it'll degrade without refreshing.

 

Media query events don't fire on resize, they fire on media query change events, so trying to debounce them is pointless.

 

  • Like 1
Link to comment
Share on other sites

Ah, noted on the Media Query events. 

 

 

Regards to the .matchMedia(), are you saying I can do it like this:

 

ScrollTrigger.matchMedia({
    "(min-width: 800px)": () => {
        gsap.to(container, {
            x: () => -(container.offsetWidth - document.documentElement.clientWidth) + "px",
            ease: "none",
            scrollTrigger: {
                trigger: container,
                pin: true,
                scrub: true,
                end: () => "+=" + container.offsetWidth
            }
        })
    } 
});

 

As this looks wrong to me, so my question is, do I need to re-code the opening posts setup to use .matchMedia(), without using scrollTrigger: {} within GSAP.

 

or the other question was, is there a property to use within the animation.

 

gsap.to(container, {
    x: () => -(container.offsetWidth - document.documentElement.clientWidth) + "px",
    ease: "none",
    scrollTrigger: {
        trigger: container,
        pin: true,
        scrub: true,
        end: () => "+=" + container.offsetWidth,
        matchMedia: {
            "(min-width: 800px)": () => {
                // Do Something
            }
        }
    }
})

Link to comment
Share on other sites

  • Solution
10 minutes ago, ferriss said:

Regards to the .matchMedia(), are you saying I can do it like this:

 

Yep. Did you look at the examples in the docs? That's pretty much the format they all use.

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()

 

12 minutes ago, ferriss said:

or the other question was, is there a property to use within the animation.

 

No that's not possible, but like I said earlier, you can put any code you want inside the matchMedia functions.

 

  • Like 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...