Share Posted April 7, 2022 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 More sharing options...
Share Posted April 8, 2022 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. 1 Link to comment Share on other sites More sharing options...
Share Posted April 8, 2022 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 4 Link to comment Share on other sites More sharing options...
Author Share Posted April 8, 2022 @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 Link to comment Share on other sites More sharing options...
Share Posted April 8, 2022 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 1 Link to comment Share on other sites More sharing options...
Author Share Posted April 8, 2022 @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 More sharing options...
Share Posted April 8, 2022 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now