kabocreative Posted August 29, 2022 Share Posted August 29, 2022 Hi all! I need to hide a section entirely on narrower screen widths, including killing the animation to avoid wasted resources on something you can't see. I've stumbled across the lovely new match media, which looks just the thing. I've successfully applied it on a simplified version of my animation by surrounding the entire timeline in a min-width match media: [codepen not displaying in place for some reason - see simpler codepen titled GSAP forum: simple timeline matchmedia test which is showing at bottom of this post] My more complex animation this quite working.. Again I've wrapped a timeline (t1) in a min-width match media query and that is working as expected. The animation does not play below 1200px. However I'm getting an error in my event listener for the mousenter hover effect: Quote Uncaught ReferenceError: t1 is not defined This I kind of get, as now I guess t1 is only defined for widths above 800px due to match media, but it means the whole mousenter instructions aren't playing even above 800px. See the Pen jOzjRjz by kabocreative (@kabocreative) on CodePen I've tried wrapping the whole lot in a matchmedia query, but that results in nothing playing at any screen size. Pointers always appreciated Thanks! See the Pen mdxZgYr by kabocreative (@kabocreative) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted August 29, 2022 Share Posted August 29, 2022 Heya! What's the goal here? All the animation on large screens, No animation at all on small screens? 1 Link to comment Share on other sites More sharing options...
kabocreative Posted August 29, 2022 Author Share Posted August 29, 2022 Hey! Yep on tablet and below these circles will be hidden entirely - so not visible at all. Therefore I don't want them animating either. So yes - all animation on large screens, no animation on small screens exactly as you've said. Link to comment Share on other sites More sharing options...
Cassie Posted August 29, 2022 Share Posted August 29, 2022 Oh ok! Sure, then you just pop everything in the matchMedia function. See the Pen BarggLM?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
kabocreative Posted August 29, 2022 Author Share Posted August 29, 2022 Thanks Cassie, I tried that, but it's breaking the event listener for mouseenter: See the Pen jOzjjyO by kabocreative (@kabocreative) on CodePen That's the bit I can't figure out how to resolve with match media. Link to comment Share on other sites More sharing options...
Cassie Posted August 29, 2022 Share Posted August 29, 2022 Can you give me your original pen without any matchMedia stuff in it? You've got a matchMedia inside a matchMedia here. That's not valid. You don't need to wrap every timeline. I've tried to unpick it but I'm not sure what it's meant to look like originially. 1 Link to comment Share on other sites More sharing options...
kabocreative Posted August 29, 2022 Author Share Posted August 29, 2022 Oh! So I do, quickly edited one to show you and failed to notice I'd been working in it already sorry. Completely clean without any matchmedia: See the Pen QWmzLYO by kabocreative (@kabocreative) on CodePen Link to comment Share on other sites More sharing options...
kabocreative Posted August 29, 2022 Author Share Posted August 29, 2022 I've also updated this pen to not contain two sets of matchmedia! Everything works as it should, it just doesn't stop animating below 800px: See the Pen jOzjjyO by kabocreative (@kabocreative) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted August 29, 2022 Share Posted August 29, 2022 Here's a 'how-to' and a 'why' Video explanation - Codepen demo See the Pen OJvwJge by GreenSock (@GreenSock) on CodePen But I'm not quite sure how to manage the scope of your event listeners in order to remove them in the cleanup function. You can say 'only run once' on an eventListener though, so maybe that's a solution? See the Pen qBozzey?editors=0011 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 29, 2022 Share Posted August 29, 2022 Ah no that's still going to end up with a bunch of unkilled event listeners... I'll loop back to this later on! (unless someone else jumps in in the interim) 1 Link to comment Share on other sites More sharing options...
kabocreative Posted August 29, 2022 Author Share Posted August 29, 2022 Yep - thanks for the video. I watched that today, match media looks ace and I've happily been going through a few animations using scrolltrigger matchmedia and updating to the newer match media, perfect. I'm stuck where you've mentioned.. it's the event listeners! I've no idea what to do with that. Perhaps it's not something match media should be covering and I'm trying to make it do something it shouldn't be? Link to comment Share on other sites More sharing options...
Solution Cassie Posted August 29, 2022 Solution Share Posted August 29, 2022 Ah no - all good you're not doing anything wrong. It's just scope, it's annoying sometimes. That function just had to be pulled out so we can access it later to remove it. See the Pen qBozzey?editors=0011 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
kabocreative Posted August 29, 2022 Author Share Posted August 29, 2022 Just had to be pulled out - I love how simple you make it sound! Thanks so much Cassie, I can follow what you've done but I'm certain I'd never have gotten there on my own. At least not yet. 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 29, 2022 Share Posted August 29, 2022 Maybe a simpler example might help? See the Pen qBozeJz?editors=1010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
kabocreative Posted August 30, 2022 Author Share Posted August 30, 2022 Ah that does help, a lot! Bookmarked for future reference thank you!!!! 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