Samuele Posted August 26, 2022 Share Posted August 26, 2022 Hi there! I'm having some issue moving to the new GSAP matchMedia feature. I followed the documentation, but probably i missed out some crucial part as in mobile devices, scrollTrigger animations seem not working to all my projects so far. I already added to the head section the initial scale: <meta name="viewport" content="width=device-width, initial-scale=1"> I do have a lot of code going on, but I'll just copy a part of bug: document.addEventListener("DOMContentLoaded", () => { gsap.registerPlugin(ScrollTrigger, ScrollToPlugin); let mm = gsap.matchMedia(); mm.add("(min-width: 1024px)", () => { gsap.to(".sticky-infos", { scrollTrigger: { trigger: ".sticky-infos", start: "top top-=0", endTrigger: ".carta-wrapper", end: "100% 50%", pin: true, pinSpacing: false, }, }); }); mm.add("(max-width: 1023px", () => { gsap.to(".sticky-infos", { opacity: 1, duration: 0.25, scrollTrigger: { trigger: ".sticky-infos", start: "top top-=0", endTrigger: ".carta-wrapper", end: "100% 20%", pin: true, pinSpacing: false, toggleActions: "play play play reverse", }, }); }); }); I'm using these versions: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/ScrollTrigger.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/ScrollToPlugin.min.js"></script> Anyone have some issue too? See the Pen ExEzdYx by sml-k (@sml-k) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted August 26, 2022 Share Posted August 26, 2022 It's very hard for us to debug without a minimal demo I'm afraid Here's a starting point for you - can you recreate the issue? See the Pen KKoMpMv by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Samuele Posted August 26, 2022 Author Share Posted August 26, 2022 Hi @Cassie! Here's a minimal demo: In that case only the 1023px media query doesn't work... Link to comment Share on other sites More sharing options...
Cassie Posted August 26, 2022 Share Posted August 26, 2022 Gotcha! Typo //typo missing ) mm.add("(max-width: 1023px", () => { //fixed mm.add("(max-width: 1023px)", () => { Thanks for the demo 1 Link to comment Share on other sites More sharing options...
Samuele Posted August 26, 2022 Author Share Posted August 26, 2022 Oh, I feel very blind right now... Thanks Cassie really appreciate! 1 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