When should I use the useReducedMotion hook in Motion?

You should use the useReducedMotion hook when you need fine-grained control over individual animations. It allows you to conditionally change animation behavior, such as replacing slide or scale animations with fades, disabling parallax scrolling, or stopping autoplay videos based on user preferences.

How can I test reduced motion behavior in my Next.js app?

You can test reduced motion by enabling the Reduced Motion setting in your operating system’s accessibility preferences on macOS, Windows, iOS, or Android. After enabling it, reload your Next.js app and confirm that animations adapt, such as fading instead of sliding and disabling parallax or autoplay effects.

September 14, 2025

How to Make Your Next.js Animations Accessible for Everyone Using Motion

Q: How do I make animations accessible in a Next.js application?

To make animations accessible in Next.js, respect users’ Reduced Motion preferences. Use MotionConfig with reducedMotion='user' for global control and the useReducedMotion hook for component-level logic. Replace large transforms with opacity fades, avoid autoplay videos, and disable parallax effects for motion-sensitive users.

Q: What is Reduced Motion and why is it important for accessibility?

Reduced Motion is an operating system accessibility setting that signals a user’s preference for minimal animation. It is important because excessive motion can cause discomfort or dizziness for some users. Supporting Reduced Motion helps meet accessibility standards like WCAG and improves overall user experience.

Q: How does Motion automatically handle reduced motion preferences?

Motion automatically handles reduced motion through the MotionConfig component. When reducedMotion is set to 'user', Motion disables transform and layout animations for users who have Reduced Motion enabled, while preserving subtle visual changes like opacity or color transitions.

Q: Are animations bad for accessibility in Next.js apps?

No, animations are not inherently bad for accessibility. Problems occur when motion is excessive, continuous, or unavoidable. When animations are intentional, subtle, and respect Reduced Motion settings, they can improve clarity, feedback, and usability in Next.js applications.

Md. Saad

make-nextjs-animations-accessible-using-motion

Have you ever added a smooth animation to your Next.js app and wondered, “Is this comfortable for everyone?” Or ask yourself, “What happens if a user feels dizzy, distracted, or overwhelmed by motion on my site?”

Animations can elevate user experience, but they can also unintentionally exclude users if accessibility is not considered. According to the World Health Organization, more than 1 in 3 people worldwide live with a condition that affects their perception of motion or visual stimuli [1]. Additionally, WebAIM’s 2024 accessibility survey found that motion-related issues remain one of the most common causes of user discomfort on modern websites [2].

This is why reduced-motion support is no longer optional. Modern operating systems allow users to express a preference for minimal animation, and as developers, we have a responsibility to respect that choice.

In this guide, you’ll learn how to make your Next.js animations accessible using Motion, ensuring your interfaces remain polished, inclusive, and user-friendly for everyone.

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

Accessible animation is not about removing motion from your Next.js app; it’s about using motion responsibly. By respecting users’ reduced-motion preferences, you create experiences that are inclusive, comfortable, and trustworthy without sacrificing design quality or performance. Motion provides the right tools, from "MotionConfig" for global control to "useReducedMotion" for fine-grained adjustments, making accessibility practical and scalable in real-world projects.

At StaticMania, we specialize in building high-performance Next.js applications with accessibility baked in from day one. Our team understands how to balance animation, usability, and performance while aligning with WCAG standards and modern UX best practices.

Whether you’re refining existing animations or designing an accessible motion system from scratch, StaticMania helps you deliver experiences that feel smooth, inclusive, and conversion-ready.

Ready to make your Next.js animations accessible for everyone? Contact StaticMania today and let our experts guide you toward a more inclusive and future-proof web experience.

FAQ

How do I make animations accessible in a Next.js application?

To make animations accessible in Next.js, respect users’ system-level Reduced Motion preferences. Use Motion’s MotionConfig with reducedMotion="user" for global handling, and the useReducedMotion hook for component-level control. Replace large transforms with opacity fades, avoid autoplay media, and disable parallax effects for motion-sensitive users.

What is “Reduced Motion,” and why is it important for accessibility?

Reduced Motion is an operating system setting that indicates a user prefers minimal animation, often due to motion sensitivity or vestibular disorders. Honoring this setting improves usability, reduces discomfort, and helps your site comply with accessibility standards such as WCAG 2.2, making your Next.js app more inclusive.

How does Motion handle reduced motion automatically?

Motion provides a MotionConfig component that can automatically reduce animations when a user enables Reduced Motion in their OS. When set to reducedMotion="user", Motion disables transform and layout animations while preserving subtle changes like opacity, ensuring accessibility without breaking UI flow.

When should I use the useReducedMotion hook instead of MotionConfig?

Use useReducedMotion when you need fine-grained control over specific animations. It allows you to conditionally switch between animation types, such as replacing slide or scale transitions with fade effects, disabling parallax scrolling, or stopping autoplay videos based on user preferences.

Are animations bad for accessibility in Next.js apps?

No. Animations are not inherently bad for accessibility. Problems arise when motion is excessive, continuous, or unavoidable. Well-designed animations that respect Reduced Motion preferences can improve clarity, provide feedback, and enhance user experience without causing discomfort.

How can I test reduced motion in my Next.js application?

You can test Reduced Motion by enabling it in your operating system’s accessibility settings (macOS, Windows, iOS, or Android). Then reload your Next.js app and verify that animations adapt correctly, such as fading instead of sliding, static backgrounds instead of parallax, and disabled autoplay media.

Author & Reviewer

Written by: Md Saad, Front-End Web Developer at StaticMania, specializing in Next.js, React, Motion, and accessible UI development.
Reviewed by: M Kausar, Co-Founder of StaticMania, with extensive experience in modern web architecture and JAMstack solutions.
About StaticMania:
StaticMania is a globally trusted web design and development agency focused on high-performance, accessible, and conversion-driven web experiences.

References
[1] World Health Organization – Disability and Health
[2] WebAIM Million 2024 Report