How Do I Remove Animation from Framer Motion?

You can remove animation from Framer Motion primarily by respecting the user's preference for reduced motion or by explicitly controlling animation behavior with the reducedMotion property.

Removing animations can significantly improve accessibility and performance for users, especially those sensitive to motion effects or using slower devices. Framer Motion provides built-in ways to handle this gracefully.

Respecting User Preferences (Recommended)

The most common and recommended way to "remove" animations for users who prefer it is by respecting their operating system's accessibility settings. Users can typically set a preference for "reduced motion" in their system settings. Framer Motion is designed to automatically disable or reduce animations when this preference is detected.

According to the reference:

• In Framer (the design tool/platform), you can enable this site-wide by navigating to Site Settings > Accessibility and checking the box labeled "Disable transform and layout animations if user prefers reduced motion". This ensures that standard animations within your Framer site adhere to user preferences.

When this setting is enabled and a user has "reduced motion" turned on in their OS, Framer Motion will generally:

• Skip layout animations.
• Skip or simplify animate transitions.
• Immediately set the target state without animating.

This provides a better experience for users who require or prefer less motion.

Overriding Reduced Motion Preference

While respecting user preference is default behavior and good practice, you might have specific cases where you need to override this. Framer Motion allows you to control this using the reducedMotion prop.

The reducedMotion property can be applied to <motion> components or configured globally. It accepts three possible values:

• "always": Animations will always run for this component, regardless of the user's system preference.
• "never": Animations will never run for this component, regardless of the user's system preference. This effectively "removes" the animation for this specific element entirely.
• "user": (This is the default behavior). Animations run based on the user's system preference. If the user prefers reduced motion, animations are disabled; otherwise, they run normally.

Based on the reference, you can allow a user to override Reduced Motion for just your site by setting reducedMotion to "always" or "never". This implies you might expose a site-specific setting that toggles this value (though the reference doesn't detail how a user would override it, only that you can set the property to override).

Using the reducedMotion Prop

You can apply the reducedMotion prop directly to a motion component:

<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ duration: 0.5 }}
  reducedMotion="never" // Removes animation for this specific element
>
  This element will not animate.
</motion.div>

Setting reducedMotion="never" on a specific component is the most direct way to remove its animation entirely, overriding any user preference or global setting.

Summary of Methods

Here's a quick overview:

Method	Scope	How it Works	Primary Goal
Framer Site Settings	Site-wide	Checks the "Disable transform and layout animations..." box. Respects OS pref.	Accessibility & User Preference
reducedMotion="user" (Default)	Per component/Global	Respects user's OS preference.	Accessibility & User Preference
reducedMotion="never"	Per component/Global	Disables animation always, ignoring OS preference.	Force no animation on specific elements
reducedMotion="always"	Per component/Global	Enables animation always, ignoring OS preference.	Force animation on specific elements

To effectively "remove" animation in Framer Motion, you should either rely on the default behavior (respecting user preferences) or explicitly set reducedMotion="never" on the elements you do not want to animate.

Remember, prioritizing accessibility by respecting user preferences is generally the best approach for most animations. Explicitly removing animations (reducedMotion="never") should be used when a specific element's motion is problematic regardless of user preference or design goals require it.