Ano Posted March 6 Share Posted March 6 I have spent almost 2 days trying to do find a way to do this, 1) How do I utilize the useGSAP method with the matchMedia method - I am trying to have two different animations for large screens and small screens. I tried to use matchMedia() by itself and its not working, it doesn't produce any animation at all See the Pen mdgewOM?editor by thebrain365 (@thebrain365) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 6 Share Posted March 6 The syntax of the media you're trying to match is the same as the CSS spec, so you need to make sure you write it like you would write it in CSS. The useGSAP() is a new plugin special made for use in React, so if you use React or its other frame works, check out our Stackblitz starter templates, React (please read this article!), Next. Hope it helps and happy tweening! See the Pen gOyaxQV?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen 1 1 Link to comment Share on other sites More sharing options...
Rodrigo Posted March 6 Share Posted March 6 Hi, Here is a simple demo using GSAP MatchMedia with the useGSAP hook: https://stackblitz.com/edit/vitejs-vite-pfhzkf?file=src%2FApp.jsx&terminal=dev Hopefully this helps. Happy Tweening! 1 1 Link to comment Share on other sites More sharing options...
Ano Posted March 6 Author Share Posted March 6 Thank you guys, the solutions you provided work perfectly. The recommended articles above gave me a solution and more 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