How to Make Your Next.js Animations Accessible for Everyone Using Motion
- Author: Md. Saad
- Published at: September 14, 2025
- Updated at: September 14, 2025
Animations can bring your Next.js app to life, guiding users, highlighting interactions, and adding polish. However, they can also have serious usability implications, including motion sickness or distraction for certain individuals.
All modern operating systems include a Reduced Motion setting. When enabled, it indicates that a user prefers minimal motion, either due to health reasons (such as vestibular disorders) or personal comfort. As developers, we need to respect that preference.
In this guide, we’ll explore how to make your Next.js animations accessible using Motion, specifically with:
- reducedMotion in <MotionConfig> for automatic handling.
- useReducedMotion for fine-grained control.
- Real-world examples for replacing transforms, disabling autoplay videos, and stopping parallax effects.
Why Accessibility Matters for Animations
Before we dive into code, here are the key takeaways from accessibility experts:
- Keep educational transitions that help users understand context changes, but reduce unnecessary motion.
- Replace large element transforms with opacity fades.
- Disable auto-playing videos that can overwhelm the senses.
- Avoid parallax and other continuous background movements.
Automatic
The easiest way to respect a user’s reduced motion preference in Next.js is by setting the reducedMotion option on Motion’s configuration.
// app/layout.js
import { MotionConfig } from "motion/react";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<MotionConfig reducedMotion="user">
{children}
</MotionConfig>
</body>
</html>
);
}
How it works
- reducedMotion="user": Disables transform and layout animations if Reduced Motion is enabled, while preserving changes to values like opacity or backgroundColor.
- Can be overridden:
"always" → Motion is always reduced.
"never" → Motion is never reduced.
Example with a user setting:
<MotionConfig reducedMotion={userPreference}>
{children}
</MotionConfig>Manual
While reducedMotion is a great blanket tool for ensuring accessible animations across your whole site, sometimes you’ll want more bespoke control. That’s where the useReducedMotion hook comes in.
This hook returns true or false depending on whether your visitor has Reduced Motion enabled in their system settings.
We can use this boolean to solve common accessibility concerns. For example, replacing transform animations with opacity transitions.
Replace transform with opacity
When Reduced Motion is enabled (e.g., on iOS), the operating system still animates between states to help users transition between contexts. But instead of scaling or moving elements (x/y transforms), it fades them in and out.
We can achieve the same in Motion by passing different values to animate depending on useReducedMotion:
import { motion, useReducedMotion } from "motion/react";
export default function Sidebar({ isOpen }) {
const shouldReduceMotion = useReducedMotion();
let animate;
if (isOpen) {
animate = shouldReduceMotion ? { opacity: 1 } : { x: 0 };
} else {
animate = shouldReduceMotion
? { opacity: 0 }
: { x: "-100%" };
}
return <motion.div animate={animate} />;
}
What’s happening:
- If Reduced Motion is enabled → fade in/out (opacity).
- Otherwise → slide in/out (x transform).
Disable Auto-Playing Videos
Auto-playing background videos can cause visual strain. Using useReducedMotion, we can disable autoplay for users who request it.
import { useReducedMotion } from "motion/react";
export default function BackgroundVideo() {
const shouldReduceMotion = useReducedMotion();
return (
<video
autoPlay={!shouldReduceMotion}
muted
loop
className="w-full h-full object-cover"
>
<source src="/video.mp4" type="video/mp4" />
</video>
);
}
Disable Parallax Effects
Parallax scrolling can be particularly uncomfortable for motion-sensitive users. Let’s disable it when Reduced Motion is enabled.
"use client";
import { motion, useReducedMotion, useScroll, useTransform } from "motion/react";
export default function ParallaxImage() {
const shouldReduceMotion = useReducedMotion();
const { scrollY } = useScroll();
const y = useTransform(scrollY, [0, 500], [0, -100]);
return (
<motion.div
style={{ y: shouldReduceMotion ? 0 : y }}
className="h-[400px] bg-cover bg-center"
/>
);
}
Here:
- Normal users → image moves with scroll.
- Reduced Motion users → static background.
Conclusion
Respecting a user’s Reduced Motion preference is a simple step that makes your Next.js app more inclusive and comfortable.
Quick tips:
- Use MotionConfig for global, automatic handling.
- Use useReducedMotion for component-specific adjustments.
- Avoid motion-heavy effects like parallax for sensitive users.
- Test your site with Reduced Motion enabled in your OS settings.
By being intentional with motion, you can make animations accessible, delightful, and user-friendly for everyone.
Looking to improve your Next.js app? Add accessible animations with Motion for a smooth, user-friendly experience—we’re here to guide you every step of the way.
