Jump to content
GreenSock

momo12

ScrollTrigger.matchMedia not working / With Locomotive ?

Go to solution Solved by momo12,

Recommended Posts

Guys I have a question. I have this code but it's not working with Scrolltrigger.matchmedia

 

I mean when I remove the mathMedia everything works fine but with this nothing works fine! I use Locomotive Scroll BTW! 

 

gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.matchMedia({
  "(min-width: 800px)": function() {
          const imgwr = document.querySelector(".small-image-wr")
          gsap.utils.toArray(".small-image-wr").forEach((imgwr, i) => {
          imgwr.img = imgwr.querySelector(".img-4");
             gsap.from(imgwr.img, {
              yPercent: 10, 
            });

             gsap.to(imgwr.img, {
              yPercent: -10, 
              ease: "none",
              scrollTrigger: {
                trigger: imgwr,
                scroller: ".sections-wr",
                scrub: true,
                invalidateOnRefresh: true
              }
            });
          });
  }, 

"(min-width: 800px)": function() {
          const projectimg = document.querySelector(".project-image")
          gsap.utils.toArray(".project-image").forEach((projectimg, i) => {
             projectimg.img = projectimg.querySelector(".img-5");
             gsap.from(projectimg.img, {
              yPercent: 10, 
            });

             gsap.to(projectimg.img, {
              yPercent: -10, 
              ease: "none",
              scrollTrigger: {
                trigger: projectimg,
                scroller: ".sections-wr",
                scrub: true,
                invalidateOnRefresh: true
              }
            });
          });
				} 
});

 

Link to comment
Share on other sites

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Does it work correctly with this preview of the next release?: 

https://assets.codepen.io/16327/gsap-latest-beta.min.js

 

There was a regression related to some .from()/fromTo() animations which has been fixed in the upcoming release. Maybe give that a shot and let us know if it resolves things. 

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

Hello again guys

 

This is the codepen:

See the Pen yLjKmja by talewoy290 (@talewoy290) on CodePen

 

It runs well but doesn't work in my project! :( 

 

I'm using Locomotive Scroll. Do you think it can cause the problem? ScrollTrigger.matchMedia doesn't work Locomotive?
 

@Rodrigo Could you please have a look? Thanks in advance!

Link to comment
Share on other sites

  • Solution

Fixed. I used Gsap.MathMedia and works well! :))

  • Like 1
Link to comment
Share on other sites

Glad you solved it. I'm curious, though - the CodePen you provided worked fine, right? So if it was only broken in your local setup, I wonder if you just had an outdated version of GSAP/ScrollTrigger? That's my best guess. 🤷‍♂️

Link to comment
Share on other sites

11 minutes ago, GreenSock said:

Glad you solved it. I'm curious, though - the CodePen you provided worked fine, right? So if it was only broken in your local setup, I wonder if you just had an outdated version of GSAP/ScrollTrigger? That's my best guess. 🤷‍♂️

No the latest version. I still don't know what caused that ... Scrolltrigger.mathmedia doesn't work but GSAP.mathmedia works. :)) Even if the function which only needs to run on Desktop is a scroll trigger 

GSAP version: 3.11.00 / ScrollTrigger: 3.11

Link to comment
Share on other sites

Yes, that's an outdated version. There was a regression in 3.11.0 that caused ScrollTrigger.matchMedia() not to function properly (but gsap.matchMedia() did). If you updated, you'd see that it's fixed. 

  • Like 2
Link to comment
Share on other sites

7 minutes ago, GreenSock said:

Yes, that's an outdated version. There was a regression in 3.11.0 that caused ScrollTrigger.matchMedia() not to function properly (but gsap.matchMedia() did). If you updated, you'd see that it's fixed. 

Great! Thanks for the tip!

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.
×