Israr Posted January 7 Share Posted January 7 (edited) Hi @Team I have made a menu with gsap animation but I have faced one issue in mobile. When I changed the menu item order in mobile using CSS media query the animation on menu items worked as an original list item shown in HTML. I want the animation to work on mobile in the order I used in the CSS media query. I will be very thankful to you Regards, Israr Ul Haq See the Pen xxBVYPE by israr-ul-haq (@israr-ul-haq) on CodePen Edited January 7 by Israr Link to comment Share on other sites More sharing options...
mvaneijgen Posted January 7 Share Posted January 7 Check out https://gsap.com/docs/v3/GSAP/gsap.matchMedia() it has a lot of build in features which makes working with media queries in GSAP really easy! Link to comment Share on other sites More sharing options...
Israr Posted January 7 Author Share Posted January 7 I have changed using matchmedia, but the order of items have behaved like original HTML, not changed the animation on basis of order that I mentioned in codepen Link to comment Share on other sites More sharing options...
Cassie Posted January 7 Share Posted January 7 Heya! So GSAP doesn't know what order your element are in visually. All it knows is the order the elements are in in the HTML (DOM). If I were you I'd create an array in JS that has the menu items in the order you need them and then stagger that array, or you could physically reorder the items in the DOM yourself Hope this helps. ✨ 2 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