Responsive & Accessible Animation with gsap.matchMedia()

[robbertstapel]

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

[MattMcGraw]

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_]

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!

[khaledoghli]

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

[omidatash.peykar]

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

[gad]

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, as before i was just used : box1.addEventListener("mouseenter", () => { revert box2, revert box 3, revert box4, box1 play })

[markopolo]

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?

[alidakoumi]

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

[BGdev]

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

[BlackStar]

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