Jump to content
GreenSock

kylerumble

Different animations for menu on desktop and mobile

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 4
Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

@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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×