diff --git a/packages/framer-motion/src/animation/interfaces/motion-value.ts b/packages/framer-motion/src/animation/interfaces/motion-value.ts index bc9c3baf10..7e7dcd0f4a 100644 --- 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 index 9346439a78..77ea542337 100644 --- 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 index 21fa6ad4ab..cb83c438e9 100644 --- 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({ 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 index 0561c64857..c8eb4c8902 100644 --- 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( const lazyContext = useContext(LazyContext) const presenceContext = useContext(PresenceContext) const reducedMotionConfig = useContext(MotionConfigContext).reducedMotion + const skipAnimations = useContext(MotionConfigContext).skipAnimations const visualElementRef = useRef>() @@ -40,6 +41,7 @@ export function useVisualElement( ? presenceContext.initial === false : false, reducedMotionConfig, + skipAnimations, }) } @@ -96,5 +98,14 @@ export function useVisualElement( } }) + /** + * 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 index 18d29c2f09..6bc7586675 100644 --- 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, @@ -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 index 3c873ec1b4..1c2592c357 100644 --- a/packages/framer-motion/src/render/types.ts +++ b/packages/framer-motion/src/render/types.ts @@ -44,6 +44,7 @@ export type VisualElementOptions = { props: MotionProps blockInitialAnimation?: boolean reducedMotionConfig?: ReducedMotionConfig + skipAnimations?: boolean } /**