liow Posted December 31, 2021 Share Posted December 31, 2021 Hi there, anyone know how to fix this responsive layout issue? A simple demo is placed in the codepen below. I have set the CSS media query to add transform property to the X position of the text. GSAP does not read the new value from the CSS media query after screen resize unless I reload the browser. See the Pen vYedomq by callmeliow (@callmeliow) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted December 31, 2021 Share Posted December 31, 2021 Sure, that's what ScrollTrigger.matchMedia() is for: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia() You may need .saveStyles(): https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.saveStyles() 1 Link to comment Share on other sites More sharing options...
liow Posted December 31, 2021 Author Share Posted December 31, 2021 Is there a must to use matchMedia() ? I only want to adjust the yPercent only. If you inspect the element, you may see the problem is caused by the inline CSS. GSAP read the Xposition from CSS media query and when the window resize, the inline CSS is still there. And this is why the issue occurs..saveStyles() is not working or am I using it the wrong way? 😅 Link to comment Share on other sites More sharing options...
OSUblake Posted December 31, 2021 Share Posted December 31, 2021 9 minutes ago, liow said: Is there a must to use matchMedia() ? I only want to adjust the yPercent only. GSAP will not know that you changed it without it. See the Pen rNGdNZj by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
liow Posted December 31, 2021 Author Share Posted December 31, 2021 Ok, the way you write for the the matchMedia() is different from the docs. That's why I confuse about it as two animation in both media query is the same. The create is not listed in https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia() Is the create means ScrollTrigger.create() ? Creating two different ScrollTrigger for different media query? Link to comment Share on other sites More sharing options...
OSUblake Posted December 31, 2021 Share Posted December 31, 2021 The name create has no meaning. It's just a function, and you can name it whatever you want. If your animation code is going to be the same for every media query, there is no point in writing the same thing out again. Use functions to your advantage and keep your code DRY (Don't Repeat Yourself). ScrollTrigger.matchMedia({ "(max-width: 576px)": function () { let tl = gsap.timeline({ scrollTrigger: { trigger: ".flex", toggleActions: "restart none none reverse", start: "top center", end: "bottom center", markers: true } }); tl.from(".text", { yPercent: -100, duration: 1 }); }, "(min-width: 577px)": function () { let tl = gsap.timeline({ scrollTrigger: { trigger: ".flex", toggleActions: "restart none none reverse", start: "top center", end: "bottom center", markers: true } }); tl.from(".text", { yPercent: -100, duration: 1 }); } }); 18 minutes ago, liow said: Creating two different ScrollTrigger for different media query? This is explained in the docs. There won't be 2 ScrollTriggers as it will kill the other one when the media changes. Quote Allows you to set up ScrollTriggers that only apply to certain viewport sizes (using media queries). It's surprisingly simple, actually - you pass in a configuration object with a key for each media query like "(min-width: 800px)" and an associated function that should run when that media query matches. Do all your setup tasks inside that function. Any ScrollTriggers that are created inside that function are automatically reverted and killed when that media query no longer matches! If the ScrollTrigger has an animation associated with it, that will also be reverted and killed. 1 Link to comment Share on other sites More sharing options...
liow Posted December 31, 2021 Author Share Posted December 31, 2021 Ops... Sorry. I didn't notice that you wrap them into a function called "create". 😅 Thanks for helping me @GreenSock and @OSUblake. 2 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