momo12 Posted October 1, 2022 Share Posted October 1, 2022 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 More sharing options...
GSAP Helper Posted October 1, 2022 Share Posted October 1, 2022 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 More sharing options...
momo12 Posted October 1, 2022 Author Share Posted October 1, 2022 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 More sharing options...
Solution momo12 Posted October 1, 2022 Author Solution Share Posted October 1, 2022 Fixed. I used Gsap.MathMedia and works well! :)) 1 Link to comment Share on other sites More sharing options...
GreenSock Posted October 1, 2022 Share Posted October 1, 2022 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 More sharing options...
momo12 Posted October 1, 2022 Author Share Posted October 1, 2022 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 More sharing options...
GreenSock Posted October 1, 2022 Share Posted October 1, 2022 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. 2 Link to comment Share on other sites More sharing options...
momo12 Posted October 1, 2022 Author Share Posted October 1, 2022 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 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