Allow disabling of shared layout crossfade

Author: mattgperry

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>
+    )
+}

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")
+            })
+    })
 })

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
 }

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,
     })

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
         )
     }