GSAP animations and accessibility: yes, you can have both!
By Anne-Mieke Bovelett on March 2, 2025
Status: up to date
Designers, you don’t have to choose between movement and inclusivity.
Web designers, I see you. You love movement, you love interactivity, and you love the way animation can bring a website to life. And then someone drops the accessibility bomb, and suddenly, you think all that creative freedom is gone. No more GSAP, no more smooth transitions, just static pages as far as the eye can see. But that’s not the reality. Accessibility is not a brick wall in front of your creativity, it’s a bridge to a better, more inclusive design.
In a group chat with some highly engaged YouTube content creators (You can read more about them at the bottom of this article), David Denedo, a rising star on YouTube who’s educating the WordPress community and beyond about accessibility, pointed to this fantastic video from the GSAP Learning channel. It’s just 12 minutes long, and it shows exactly how you can make sure accessibility is respected in your GSAP animations.
Yes, you read that right. GSAP has everything you need to respect user preferences while still bringing motion to your designs!
The video: Responsive & Accessible Animation with matchMedia
GreenSocket published this two years ago. Kudos to them for adding closed captions to it!
Rethinking animation: when to use it and when to rethink it
The problem isn’t animation itself, it’s how we use it. If an animation is purely decorative and doesn’t serve a functional purpose, maybe it doesn’t need to be there at all. But if it enhances the user experience, guides attention, or provides feedback, then it’s worth considering. The key is giving users control.
Think of it like seasoning in a dish. A pinch of salt enhances the flavor, but dumping an entire container into the pot? That ruins everything. The same goes for animation. Too much, too flashy, too uncontrolled, it overwhelms users, especially those with motion sensitivities. Instead, well-placed, thoughtful motion can make an experience smoother and more intuitive.
The power of prefers-reduced-motion
Some users experience dizziness, nausea, or discomfort from excessive motion effects. Recently I published a practical guide for designers and developers about accessible animation that goes into that user experience a bit deeper. That’s why operating systems allow users to set a ‘reduced motion’ preference. GSAP lets you respect this setting easily. By detecting when a user has chosen to reduce motion, you can automatically tone down or remove unnecessary animations while keeping the essence of your design intact.
This is not about limiting creativity. It’s about designing with care, ensuring that everyone, including those with vestibular disorders, can navigate your site comfortably. GSAP gives you all the tools to make this happen without gutting your vision.
Challenge: show me your accessible animations
If you’re a designer or developer who’s been holding back from using GSAP because of accessibility concerns, now’s the time to rethink that. Try it out. Build something that moves beautifully but mindfully. And when you do, share it with me. If it’s accessible, I’ll amplify it across my social media network. Let’s prove together that accessibility and animation can coexist, and thrive.
P.S. The Content Creators I spoke of
This topic came up in a group chat today with some great content creators with a heart for digital accessibility. We originally got together to talk about Greyd.Suite, as some of them plan to make videos about features of this magnificent WordPress Suite. They all make valuable tutorials about building dynamic websites and explore new themes and tools in tutorials and live streams. Here you find their YouTube channel and/or website: