Implement skipAnimations option in MotionConfig (#2671)

framer · Jun 11, 2024 · d0b5f56 · d0b5f56
1 parent 5425384
commit d0b5f56
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 1 deletion.
diff --git a/packages/framer-motion/src/animation/interfaces/motion-value.ts b/packages/framer-motion/src/animation/interfaces/motion-value.ts
@@ -101,6 +101,7 @@ export const animateMotionValue =
 
         if (
             instantAnimationState.current ||
+            element?.skipAnimations ||
             MotionGlobalConfig.skipAnimations
         ) {
             shouldSkip = true

diff --git a/packages/framer-motion/src/components/MotionConfig/index.tsx b/packages/framer-motion/src/components/MotionConfig/index.tsx
@@ -53,7 +53,7 @@ export function MotionConfig({
      */
     const context = useMemo(
         () => config,
-        [JSON.stringify(config.transition), config.transformPagePoint, config.reducedMotion]
+        [JSON.stringify(config.transition), config.transformPagePoint, config.reducedMotion, config.skipAnimations]
     )
 
     return (

diff --git a/packages/framer-motion/src/context/MotionConfigContext.tsx b/packages/framer-motion/src/context/MotionConfigContext.tsx
@@ -34,6 +34,11 @@ export interface MotionConfigContext {
      */
     reducedMotion?: ReducedMotionConfig
 
+    /**
+     * If true, will disable all motion component animations within the `MotionContext`.
+     */
+    skipAnimations?: boolean
+
     /**
      * A custom `nonce` attribute used when wanting to enforce a Content Security Policy (CSP).
      * For more details see:
@@ -51,4 +56,5 @@ export const MotionConfigContext = createContext<MotionConfigContext>({
     transformPagePoint: (p) => p,
     isStatic: false,
     reducedMotion: "never",
+    skipAnimations: false,
 })
diff --git a/packages/framer-motion/src/motion/utils/use-visual-element.ts b/packages/framer-motion/src/motion/utils/use-visual-element.ts
@@ -22,6 +22,7 @@ export function useVisualElement<Instance, RenderState>(
     const lazyContext = useContext(LazyContext)
     const presenceContext = useContext(PresenceContext)
     const reducedMotionConfig = useContext(MotionConfigContext).reducedMotion
+    const skipAnimations = useContext(MotionConfigContext).skipAnimations
 
     const visualElementRef = useRef<VisualElement<Instance>>()
 
@@ -40,6 +41,7 @@ export function useVisualElement<Instance, RenderState>(
                 ? presenceContext.initial === false
                 : false,
             reducedMotionConfig,
+            skipAnimations,
         })
     }
 
@@ -96,5 +98,14 @@ export function useVisualElement<Instance, RenderState>(
         }
     })
 
+    /**
+     * Keep `skipAnimations` in sync with the context.
+     */
+    useEffect(() => {
+        if (!visualElement) return
+
+        visualElement.skipAnimations = skipAnimations ?? false
+    }, [skipAnimations])
+
     return visualElement
 }
diff --git a/packages/framer-motion/src/render/VisualElement.ts b/packages/framer-motion/src/render/VisualElement.ts
@@ -276,6 +276,11 @@ export abstract class VisualElement<
      */
     blockInitialAnimation: boolean
 
+    /**
+     * Decides whether this Visual element should skip its animations.
+     */
+    skipAnimations: boolean = false
+
     /**
      * A reference to this VisualElement's projection node, used in layout animations.
      */
@@ -374,6 +379,7 @@ export abstract class VisualElement<
             props,
             presenceContext,
             reducedMotionConfig,
+            skipAnimations,
             blockInitialAnimation,
             visualState,
         }: VisualElementOptions<Instance, RenderState>,
@@ -389,6 +395,7 @@ export abstract class VisualElement<
         this.presenceContext = presenceContext
         this.depth = parent ? parent.depth + 1 : 0
         this.reducedMotionConfig = reducedMotionConfig
+        this.skipAnimations = skipAnimations ?? false
         this.options = options
         this.blockInitialAnimation = Boolean(blockInitialAnimation)
 

diff --git a/packages/framer-motion/src/render/types.ts b/packages/framer-motion/src/render/types.ts
@@ -44,6 +44,7 @@ export type VisualElementOptions<Instance, RenderState = any> = {
     props: MotionProps
     blockInitialAnimation?: boolean
     reducedMotionConfig?: ReducedMotionConfig
+    skipAnimations?: boolean
 }
 
 /**