Updating changelog

Author: mattgperry

CHANGELOG.md

@@ -4,6 +4,12 @@ Motion adheres to [Semantic Versioning](http://semver.org/).
 
 Undocumented APIs should be considered internal and may change without warning.
 
+## [12.23.6] 2025-07-11
+
+### Changed
+
+-   Added explainer for reduced motion warning.
+
 ## [12.23.5] 2025-07-11
 
 ### Fixed

packages/framer-motion/src/render/VisualElement.ts

@@ -416,7 +416,8 @@ export abstract class VisualElement<
         if (process.env.NODE_ENV !== "production") {
             warnOnce(
                 this.shouldReduceMotion !== true,
-                "You have Reduced Motion enabled on your device. Animations may not appear as expected."
+                "You have Reduced Motion enabled on your device. Animations may not appear as expected.",
+                "reduced-motion-disabled"
             )
         }
 

packages/framer-motion/src/utils/reduced-motion/use-reduced-motion.ts

@@ -40,7 +40,8 @@ export function useReducedMotion() {
     if (process.env.NODE_ENV !== "production") {
         warnOnce(
             shouldReduceMotion !== true,
-            "You have Reduced Motion enabled on your device. Animations may not appear as expected."
+            "You have Reduced Motion enabled on your device. Animations may not appear as expected.",
+            "reduced-motion-disabled"
         )
     }
 

packages/motion-utils/src/errors.ts

@@ -1,3 +1,5 @@
+import { formatErrorMessage } from "./format-error-message"
+
 export type DevMessage = (
     check: boolean,
     message: string,
@@ -8,21 +10,15 @@ let warning: DevMessage = () => {}
 let invariant: DevMessage = () => {}
 
 if (process.env.NODE_ENV !== "production") {
-    const formatMessage = (message: string, errorCode?: string) => {
-        return errorCode
-            ? `${message}. For more information and steps for solving, visit https://motion.dev/troubleshooting/${errorCode}`
-            : message
-    }
-
     warning = (check, message, errorCode) => {
         if (!check && typeof console !== "undefined") {
-            console.warn(formatMessage(message, errorCode))
+            console.warn(formatErrorMessage(message, errorCode))
         }
     }
 
     invariant = (check, message, errorCode) => {
         if (!check) {
-            throw new Error(formatMessage(message, errorCode))
+            throw new Error(formatErrorMessage(message, errorCode))
         }
     }
 }

packages/motion-utils/src/format-error-message.ts

@@ -0,0 +1,5 @@
+export function formatErrorMessage(message: string, errorCode?: string) {
+    return errorCode
+        ? `${message}. For more information and steps for solving, visit https://motion.dev/troubleshooting/${errorCode}`
+        : message
+}

packages/motion-utils/src/warn-once.ts

@@ -1,3 +1,5 @@
+import { formatErrorMessage } from "./format-error-message"
+
 const warned = new Set<string>()
 
 export function hasWarned(message: string) {
@@ -7,11 +9,10 @@ export function hasWarned(message: string) {
 export function warnOnce(
     condition: boolean,
     message: string,
-    element?: Element
+    errorCode?: string
 ) {
     if (condition || warned.has(message)) return
 
-    console.warn(message)
-    if (element) console.warn(element)
+    console.warn(formatErrorMessage(message, errorCode))
     warned.add(message)
 }