Responsive & Accessible Animation with gsap.matchMedia()

In this video we'll walk through the new gsap.matchMedia() and create some responsive and accessible animation! 🥳
gsap.matchMedia() lets you 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 accessibility is remarkably simple.
Docs - greensock.com/docs/v3/GSAP/gs...)
Demos - codepen.io/collection/vBebgJ

[@robbertstapel788]

When GreenSockLearning posts something new, you already know It's gonna be good. Love this one! You are real web innovators! 💌

[@ashtonblignaut4565]

🥳🎉 Its soo simple. Thanks GSAP!

[@MattMcGraw1]

Really informative tutorial! Thanks for going through the reduceMotion functionality for better accessibility. That's just such a nice segue to other, deeper settings.

[@coryhudson6932]

Awesome stuff!

[@joeypadasian4083]

Absolutely Genius!🤯

[@GreenSockLearning]

Thanks Joey! 🥳

[@tjk_9000]

yessss! thank you so much. I'm new to some of this but I really wanted to make a bunch of blog categories draggable, but only if they run of the screen. brilliant!

[@toso6077]

been waiting for the new update 🙏

[@omidatash.peykar1139]

the matchMedia() really helpfull , thank's for gsap❤

[@khaledoghli1894]

We hope more content practice videos from gsap,we love gsap

[@GreenSockLearning]

What kind of videos would you like to see?

[@eliskymystic4246]

​ @GreenSockLearning Cassie breaking down or recreating existing animations in popular websites 🤔

[@gad1023]

hello and thanks for the great information and effort, I'm wonder if i have multiple timelines like accordion section consist of 4 inner columns, and each one on hover expanding to full width, how to manage those Four timeline with Context.add() do i put all the timelines inside Context.add() and if so, how to call them back with box.addEventlistener("mouseEnter") , as before i was just used : box1.addEventListener("mouseenter", () => { revert box2, revert box 3, revert box4 , box1 play })

[@alidakoumi3291]

In the clean up function, instead of removing the event listener, can we use context.revert ?

[@JackDoyleGS]

No, because it's impossible for it to know what you added listeners to, etc. You must remove those yourself in the cleanup function.

[@markopolo2224]

if i use this along with ctx gsap.context that records all animations inside and then reverts them when i want is that necessary or does matchmedia do all that on its own?

[@abdullahajayi]

It isn't necessary. matchMedia does that on it's own.

[@BGdev305]

Wouldn't using CLAMP be better? Seeing how CLAMP is replacing media queries

[@JackDoyleGS]

I'm not sure how clamp has anything to do with what's described in the video. Help? You're welcome to use clamp in your CSS if you'd like. All the concepts described in the video still pertain. You can use GSAP to set/animate CSS variables too. So tons of options to make your layouts/animations responsive.

[@JackDoyleGS]

I'm not sure how clamp has anything to do with what's described in the video. Help? You're welcome to use clamp in your CSS if you'd like. All the concepts described in the video still pertain. You can use GSAP to set/animate CSS variables too. So tons of options to make your layouts/animations responsive.

[@finlaycaven4683]

ᎮᏒᎧᎷᎧᏕᎷ 🎉

[@Black1991Star]

I don’t see where on a real project these new features can be applied. You increase the size of the downloaded library. The developer could be made all innovations use native JS

[@GreenSockLearning]

We see a lot of people writing a lot of code to handle responsive and accessible animation, so we've written a small amount of code to make it easier.