Different animations for menu on desktop and mobile

[kylerumble 2 Likes (Newbie)]

I have two different animations I'd like to run on my menu. One for desktop and one for mobile. 

 

For Desktop everything is fine, for mobile I just want your typical slide up/down without the list item animating. 

 

Could someone take a look at my code and tell me how I could quickly clean this up? 

 

Thanks. 

See the Pen bGaMbvw by kylerumble (@kylerumble) on CodePen

[mvaneijgen 787 Likes (Leader)]

Did you know GSAP has is own matchMedia() build in to scrollTrigger https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia() seems a lot easier to get what you want.

[mvaneijgen 787 Likes (Leader)]

I was playing around a bit with your code and the `scrollTrigger.matchMedia()` I suggested and couldn't find any animation for mobile? But maybe I read your initial post wrong and you hadn't created that yet. 

 

What I have right now is this. I really like the `.matchMedia()` this way, because you just write it like you would write CSS media queries. Your initial solution might also work, but you're using GSAP, so why not use the tools you'll get out of the box. 

 

See the Pen popVbBG?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[kylerumble 2 Likes (Newbie)]

@mvaneijgen

 

Thank you so much.

 

I had seen the ScollTrigger matchMedia, but just figured it was only for scrolling. 

 

If I use Chrome and toggle device toolbar though and toggle between desktop/mobile and back again, there is a weird behavior.

 

See video https://www.loom.com/share/5c7f2d06396342d3ad6c6749a46409dd 

[OSUblake 18,417 Likes (Superhero)]

Since the toggleMenu timeline is created outside of the matchMedia and is not part of a ScrollTrigger, you should use a cleanup function as shown in the matchMedia docs to revert and clear the timeline. Also, you should use ScrollTrigger.saveStyles() to help when the media changes.

 

See the Pen JjMvLyg by GreenSock (@GreenSock) on CodePen

 

[kylerumble 2 Likes (Newbie)]

@OSUblake

 

 

Thank you for the help.

 

i'm going to go read up on a few of those points such as SaveStyles, progress and clear.

 

Kyle

[GreenSock 17,270 Likes (Superhero)]

1 hour ago, kylerumble said:

I had seen the ScollTrigger matchMedia, but just figured it was only for scrolling. 

 

Technically that is true - it only kills ScrollTrigger-related animations when the media query doesn't match anymore, but it still does call those functions when the media query matches so you're welcome to use it. And you can return your own cleanup function at the end so if you need to revert/kill any non-ScrollTrigger animations, just do it in there.