Disable/enable ScrollTrigger based on window.innerWidth and resize

[Brittany@Decisely]

I'm trying to conditionally disable ScrollTrigger on mobile, and I've read a handful of posts on this -

 

• .from Kill, Invalidate Tween on Resize (for Mobile)
• How to Kill and reset a ScrollTrigger Timeline
• GSAP / TweenMax disable desktop animation on mobile and vise versa and also reset on resize

 

But I haven't had luck getting these things to work across the board on all browsers... especially Firefox. In the CodePen, I put a few things that I've tried (commented out) - .kill(), clearProps: true, .play()/.pause()... and every combination in between.

 

I know, realistically, people aren't going to be resizing their browser 50 times like I am with testing, but I don't want the site to break on them if they do.

See the Pen oNxEPdd by abitofbrit (@abitofbrit) on CodePen

[ZachSaucier]

Hey Brittany. Those posts are kind of old (in terms of the short life of ScrollTrigger ). ScrollTrigger now has a built in method for this that makes it easy! It's .matchMedia(). You're going to love it  

 

Let us know if you have questions about using it and we'll be happy to do our best to help.

[Brittany@Decisely]

2 hours ago, ZachSaucier said:

Hey Brittany. Those posts are kind of old (in terms of the short life of ScrollTrigger ). ScrollTrigger now has a built in method for this that makes it easy! It's .matchMedia(). You're going to love it  

 

Let us know if you have questions about using it and we'll be happy to do our best to help.

 

Perfect. I'll look into it!

 

And yeah, the old posts are what I could find, so I was trying to adapt the new stuff with the old. Thanks again!  

[Brittany@Decisely]

That totally did the trick. Thank you! Thank you! Thank you!