Skip animations (#2461)

packages/framer-motion/src/animation/__tests__/animate.test.tsx

@@ -1,7 +1,7 @@
 import { render } from "../../../jest.setup"
 import * as React from "react"
 import { useEffect } from "react"
-import { motion } from "../.."
+import { motion, MotionGlobalConfig } from "../.."
 import { animate } from "../animate"
 import { useMotionValue } from "../../value/use-motion-value"
 import { motionValue, MotionValue } from "../../value"
@@ -228,6 +228,19 @@ describe("animate", () => {
         })
     })
 
+    test("Skips animations", async () => {
+        const div = document.createElement("div")
+        MotionGlobalConfig.skipAnimations = true
+        animate(div, { opacity: [0.2, 0.5] }, { duration: 1 })
+        await new Promise<void>((resolve) => {
+            setTimeout(() => {
+                MotionGlobalConfig.skipAnimations = false
+                expect(div).toHaveStyle("opacity: 0.5")
+                resolve()
+            }, 100)
+        })
+    })
+
     test("time sets and gets time", async () => {
         const div = document.createElement("div")
         const animation = animate(div, { x: 100 }, { duration: 10 })

packages/framer-motion/src/animation/interfaces/motion-value.ts

@@ -11,6 +11,7 @@ import { getKeyframes } from "../utils/keyframes"
 import { getValueTransition, isTransitionDefined } from "../utils/transitions"
 import { animateValue } from "../animators/js"
 import { AnimationPlaybackControls, ValueAnimationOptions } from "../types"
+import { MotionGlobalConfig } from "../../utils/GlobalConfig"
 
 export const animateMotionValue = (
     valueName: string,
@@ -101,7 +102,8 @@ export const animateMotionValue = (
             !isOriginAnimatable ||
             !isTargetAnimatable ||
             instantAnimationState.current ||
-            valueTransition.type === false
+            valueTransition.type === false ||
+            MotionGlobalConfig.skipAnimations
         ) {
             /**
              * If we can't animate this value, or the global instant animation flag is set,

packages/framer-motion/src/index.ts

@@ -78,7 +78,10 @@ export { isMotionComponent } from "./motion/utils/is-motion-component"
 export { unwrapMotionComponent } from "./motion/utils/unwrap-motion-component"
 export { VisualElement } from "./render/VisualElement"
 export { addScaleCorrector } from "./projection/styles/scale-correction"
-export { useInstantTransition, disableInstantTransitions } from "./utils/use-instant-transition"
+export {
+    useInstantTransition,
+    disableInstantTransitions,
+} from "./utils/use-instant-transition"
 export { useInstantLayoutTransition } from "./projection/use-instant-layout-transition"
 export { useResetProjection } from "./projection/use-reset-projection"
 export { buildTransform } from "./render/html/utils/build-transform"
@@ -88,6 +91,7 @@ export { color } from "./value/types/color"
 export { complex } from "./value/types/complex"
 export { px } from "./value/types/numbers/units"
 export { ValueType } from "./value/types/types"
+export { MotionGlobalConfig } from "./utils/GlobalConfig"
 
 /**
  * Appear animations

packages/framer-motion/src/utils/GlobalConfig.ts

@@ -0,0 +1,3 @@
+export const MotionGlobalConfig = {
+    skipAnimations: false,
+}