Responsive & Accessible Animation with gsap.matchMedia()

[@robbertstapel788]

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

[@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.

[@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!

[@ashtonblignaut4565]

🥳🎉 Its soo simple. Thanks 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 🤔

[@joeypadasian4083]

Absolutely Genius!🤯

[@GreenSockLearning]

Thanks Joey! 🥳

[@omidatash.peykar1139]

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

[@coryhudson6932]

Awesome stuff!

[@toso6077]

been waiting for the new update 🙏

[@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 })

[@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.

[@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.

[@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.