Search the Community

Highlights: gsap.matchMedia() is a game-changer for responsive, accessible-friendly animations. 💚 gsap.context() that greatly simplifies setup and reverting of a bunch of animations/ScrollTriggers, especially for React developers! You can now revert() any animation to return the targets to their original state. Set lockAxis: true on an Observer to make it lock into whichever direction the user first drags 🥳 Responsive, accessibility-friendly animations with gsap.matchMedia() One of the hardest challenges for web-animators is crafting animations that work seamlessly on all screen sizes and respect users motion preferences. Well, not anymore! gsap.matchMedia() lets you easily tuck setup code into a function that only executes when a particular media query matches and then when it no longer matches, all the GSAP animations and ScrollTriggers created during that function's execution get reverted automatically! Customizing for mobile/desktop or prefers-reduced-motion is remarkably simple and incredibly flexible. Basic syntax // create let mm = gsap.matchMedia(); // add a media query. When it matches, the associated function will run mm.add("(min-width: 800px)", () => { // this setup code only runs when viewport is at least 800px wide gsap.to(...); gsap.from(...); ScrollTrigger.create({...}); return () => { // optional // custom cleanup code here (runs when it STOPS matching) }; }); // later, if we need to revert all the animations/ScrollTriggers... mm.revert(); Conditions syntax - 💪 POWERFUL 💪 What if your setup code for various media queries is mostly identical but a few key values are different? If you add() each media query individually, you may end up with a lot of redundant code. Just use the conditions syntax! Instead of a string for the first parameter, use an object with arbitrarily-named conditions and then the function will get called when any of those conditions match and you can check each condition as a boolean (matching or not). The conditions object could look like this: { isDesktop: "(min-width: 800px)", isMobile: "(max-width: 799px)", reduceMotion: "(prefers-reduced-motion: reduce)" } Name your conditions whatever you want. Below we'll set the breakpoint at 800px wide and honor the user's prefers-reduced-motion preference, leveraging the same setup code and using conditional logic where necessary: let mm = gsap.matchMedia(), breakPoint = 800; mm.add({ // set up any number of arbitrarily-named conditions. The function below will be called when ANY of them match. isDesktop: `(min-width: ${breakPoint}px)`, isMobile: `(max-width: ${breakPoint - 1}px)`, reduceMotion: "(prefers-reduced-motion: reduce)" }, (context) => { // context.conditions has a boolean property for each condition defined above indicating if it's matched or not. let { isDesktop, isMobile, reduceMotion } = context.conditions; gsap.to(".box", { rotation: isDesktop ? 360 : 180, // spin further if desktop duration: reduceMotion ? 0 : 2 // skip to the end if prefers-reduced-motion }); return () => { // optionally return a cleanup function that will be called when none of the conditions match anymore (after having matched) } }); Nice and concise! 🎉 See the Pen gsap.matchMedia() by GreenSock (@GreenSock) on CodePen. You can set a scope so that all selector text inside the function maps only to descendants of a particular element or React Ref or Angular ElementRef. This can greatly simplify your code. See the full documentation for all the details. gsap.context()