Allow disabling of shared layout crossfade

mattgperry · mattgperry · commit 54c92add8986 · 2025-04-14T13:28:23.000+02:00
diff --git a/dev/react/src/tests/layout-crossfade.tsx b/dev/react/src/tests/layout-crossfade.tsx
@@ -0,0 +1,31 @@
+import { AnimatePresence, motion, MotionConfig } from "framer-motion"
+import { useState } from "react"
+
+export const App = () => {
+    const [state, setState] = useState(false)
+
+    return (
+        <MotionConfig transition={{ duration: 10, ease: (p) => 0.25 }}>
+            <div style={{ display: "flex", gap: 100 }}>
+                <motion.div
+                    layoutId="box"
+                    style={{ width: 100, height: 100, background: "red" }}
+                />
+                <AnimatePresence>
+                    {state && (
+                        <motion.div
+                            layoutId="box"
+                            layoutCrossfade={false}
+                            style={{
+                                width: 100,
+                                height: 100,
+                                background: "blue",
+                            }}
+                        />
+                    )}
+                </AnimatePresence>
+            </div>
+            <button onClick={() => setState(!state)}>Toggle</button>
+        </MotionConfig>
+    )
+}
diff --git a/packages/framer-motion/cypress/integration/layout.ts b/packages/framer-motion/cypress/integration/layout.ts
@@ -347,4 +347,16 @@ describe("Layout animation", () => {
                 expect($count.textContent).to.equal("1")
             })
     })
+
+    it("Disabling crossfade works as expected", () => {
+        cy.visit("?test=layout-crossfade")
+            .wait(50)
+            .get("button")
+            .trigger("click")
+            .wait(200)
+            .get("#box")
+            .should(([$box]: any) => {
+                expect($box.style.opacity).to.equal("1")
+            })
+    })
 })
diff --git a/packages/framer-motion/src/motion/features/layout/types.ts b/packages/framer-motion/src/motion/features/layout/types.ts
@@ -92,4 +92,12 @@ export interface LayoutProps {
      * perform scale correction on it.
      */
     "data-framer-portal-id"?: string
+
+    /**
+     * By default, shared layout elements will crossfade. By setting this
+     * to `false`, this element will take its default opacity throughout the animation.
+     *
+     * @public
+     */
+    layoutCrossfade?: boolean
 }
diff --git a/packages/framer-motion/src/motion/utils/use-visual-element.ts b/packages/framer-motion/src/motion/utils/use-visual-element.ts
@@ -153,6 +153,7 @@ function createProjectionNode(
         dragConstraints,
         layoutScroll,
         layoutRoot,
+        layoutCrossfade,
     } = props
 
     visualElement.projection = new ProjectionNodeConstructor(
@@ -177,6 +178,7 @@ function createProjectionNode(
          */
         animationType: typeof layout === "string" ? layout : "both",
         initialPromotionConfig,
+        crossfade: layoutCrossfade,
         layoutScroll,
         layoutRoot,
     })
diff --git a/packages/framer-motion/src/projection/animation/mix-values.ts b/packages/framer-motion/src/projection/animation/mix-values.ts
@@ -25,19 +25,18 @@ export function mixValues(
     if (shouldCrossfadeOpacity) {
         target.opacity = mixNumber(
             0,
-            // TODO Reinstate this if only child
-            lead.opacity !== undefined ? (lead.opacity as number) : 1,
+            (lead.opacity as number) ?? 1,
             easeCrossfadeIn(progress)
         )
         target.opacityExit = mixNumber(
-            follow.opacity !== undefined ? (follow.opacity as number) : 1,
+            (follow.opacity as number) ?? 1,
             0,
             easeCrossfadeOut(progress)
         )
     } else if (isOnlyMember) {
         target.opacity = mixNumber(
-            follow.opacity !== undefined ? (follow.opacity as number) : 1,
-            lead.opacity !== undefined ? (lead.opacity as number) : 1,
+            (follow.opacity as number) ?? 1,
+            (lead.opacity as number) ?? 1,
             progress
         )
     }

Original file line number	Diff line number	Diff line change
`@@ -25,19 +25,18 @@ export function mixValues(`
`25`	`25`	`if (shouldCrossfadeOpacity) {`
`26`	`26`	`target.opacity = mixNumber(`
`27`	`27`	`0,`
`28`		`- // TODO Reinstate this if only child`
`29`		`- lead.opacity !== undefined ? (lead.opacity as number) : 1,`
	`28`	`+ (lead.opacity as number) ?? 1,`
`30`	`29`	`easeCrossfadeIn(progress)`
`31`	`30`	`)`
`32`	`31`	`target.opacityExit = mixNumber(`
`33`		`- follow.opacity !== undefined ? (follow.opacity as number) : 1,`
	`32`	`+ (follow.opacity as number) ?? 1,`
`34`	`33`	`0,`
`35`	`34`	`easeCrossfadeOut(progress)`
`36`	`35`	`)`
`37`	`36`	`} else if (isOnlyMember) {`
`38`	`37`	`target.opacity = mixNumber(`
`39`		`- follow.opacity !== undefined ? (follow.opacity as number) : 1,`
`40`		`- lead.opacity !== undefined ? (lead.opacity as number) : 1,`
	`38`	`+ (follow.opacity as number) ?? 1,`
	`39`	`+ (lead.opacity as number) ?? 1,`
`41`	`40`	`progress`
`42`	`41`	`)`
`43`	`42`	`}`