How to deal with mobile optimization?

[SteveS]

I've spent the last few days making a site with plenty of gsap interactions, and today I went ahead and rebuilt it mobile first. My question is, what is the best way to go about adapting interactions for multiple screen sizes? Should I rewrite gsap interactions and put them behind media queries? Or is it better to design my gsap so it works across all screen sizes. Both are going to take a good deal of time, so I'm wondering what other people do to approach the issue.

[Trapti]

Hey, 

I am not sure what you mean by this "design my gsap so it works across all screen sizes". 

Generally what I like to do is to develop the layout with mobile first approach. And add interaction with the same approach mobile first. Because anyways there will be less interaction in mobile compared to desktop and mostly mobile interaction are common in desktop. 

 

 

[GreenSock]

For ScrollTrigger stuff, there's a dedicated ScrollTrigger.matchMedia() method that's perfect for this. Otherwise, yeah, media queries with conditional JS logic is pretty common. 

[SteveS]

@Trapti I've seen several tutorials where people create effects that are fully dynamic. They write different CSS for mobile, but are able to use the same interaction on desktop and mobile without making changes to the JS. I have to imagine this only works in particular cases, but I figured it was worth asking if anyone has a process for using gsap across screen sizes. Most tutorials like to show how to make everything work at desktop sizes, few show the mobile optimization process

[GreenSock]

Just posting back here in case folks find this via Google or something...

 

GSAP 3.11 has gsap.matchMedia() which is crazy powerful for this type of stuff. The old ScrollTrigger.matchMedia() is deprecated in favor of the core gsap.matchMedia() which does everything that did plus a whole lot more. 

 

Enjoy!