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: