Match Media + event listener

[kabocreative]

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.

[Cassie]

Heya! What's the goal here?

 

All the animation on large screens, No animation at all on small screens?

[kabocreative]

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.

[Cassie]

Oh ok! Sure, then you just pop everything in the matchMedia function.

See the Pen BarggLM?editors=0010 by GreenSock (@GreenSock) on CodePen.

[kabocreative]

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.

[Cassie]

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.

[kabocreative]

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.

[kabocreative]

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.

[Cassie]

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.

[Cassie]

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)

[kabocreative]

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?

[Cassie]

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.

[kabocreative]

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.

 

[Cassie]

Maybe a simpler example might help?

See the Pen qBozeJz?editors=1010 by GreenSock (@GreenSock) on CodePen.

[kabocreative]

Ah that does help, a lot! Bookmarked for future reference thank you!!!!