From f5518dd1291dc739dacf341c1fd5e76ae59b030d Mon Sep 17 00:00:00 2001 From: Matt Perry Date: Mon, 19 Dec 2022 15:23:02 +0000 Subject: [PATCH 1/2] Firing animateChanges in useLayoutEffect if we're in a handoff situation --- .../src/motion/utils/use-visual-element.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) 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 cf4b075cf7..bd6194bccb 100644 --- a/packages/framer-motion/src/motion/utils/use-visual-element.ts +++ b/packages/framer-motion/src/motion/utils/use-visual-element.ts @@ -48,7 +48,17 @@ export function useVisualElement( visualElement && visualElement.render() }) - useEffect(() => { + /** + * If we have optimised appear animations to handoff from, trigger animateChanges + * from a synchronous useLayoutEffect to ensure there's no flash of incorrectly + * styled component in the event of a hydration error. + */ + const useAnimateChangesEffect = + typeof window !== "undefined" && window.MotionAppearAnimations + ? useIsomorphicLayoutEffect + : useEffect + + useAnimateChangesEffect(() => { if (visualElement && visualElement.animationState) { visualElement.animationState.animateChanges() } From fd94b300e61fa731e9448d42d6ca933fa91f70ad Mon Sep 17 00:00:00 2001 From: Matt Perry Date: Mon, 19 Dec 2022 15:50:02 +0000 Subject: [PATCH 2/2] Removing logic fork --- .../framer-motion/src/motion/utils/use-visual-element.ts | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) 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 bd6194bccb..cd90b28ce7 100644 --- a/packages/framer-motion/src/motion/utils/use-visual-element.ts +++ b/packages/framer-motion/src/motion/utils/use-visual-element.ts @@ -1,5 +1,5 @@ import * as React from "react" -import { useContext, useEffect, useRef } from "react" +import { useContext, useRef } from "react" import { PresenceContext } from "../../context/PresenceContext" import { MotionProps } from "../../motion/types" import { useVisualElementContext } from "../../context/MotionContext" @@ -53,12 +53,7 @@ export function useVisualElement( * from a synchronous useLayoutEffect to ensure there's no flash of incorrectly * styled component in the event of a hydration error. */ - const useAnimateChangesEffect = - typeof window !== "undefined" && window.MotionAppearAnimations - ? useIsomorphicLayoutEffect - : useEffect - - useAnimateChangesEffect(() => { + useIsomorphicLayoutEffect(() => { if (visualElement && visualElement.animationState) { visualElement.animationState.animateChanges() }