Making script backwards compatible

framer · Dec 8, 2023 · 2947edf · 2947edf
1 parent 827d3e0
commit 2947edf
Show file tree

Hide file tree

Showing 5 changed files with 140 additions and 4 deletions.
diff --git a/dev/optimized-appear/persist-optimised-animation.html b/dev/optimized-appear/persist-optimised-animation.html
@@ -0,0 +1,109 @@
+<html>
+    <head>
+        <style>
+            body {
+                padding: 100px;
+                margin: 0;
+            }
+
+            #box {
+                width: 100px;
+                height: 100px;
+                background-color: #0077ff;
+            }
+
+            [data-layout-correct="false"] {
+                background: #dd1144 !important;
+                opacity: 1 !important;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script src="../../node_modules/react/umd/react.development.js"></script>
+        <script src="../../node_modules/react-dom/umd/react-dom.development.js"></script>
+        <script src="../../node_modules/react-dom/umd/react-dom-server-legacy.browser.development.js"></script>
+        <script src="../../packages/framer-motion/dist/framer-motion.dev.js"></script>
+        <script src="../projection/script-assert.js"></script>
+
+        <script>
+            const {
+                motion,
+                animateStyle,
+                animate,
+                startOptimizedAppearAnimation,
+                optimizedAppearDataAttribute,
+                motionValue,
+                frame,
+            } = window.Motion
+            const { matchViewportBox } = window.Assert
+            const root = document.getElementById("root")
+
+            const duration = 2
+            const x = motionValue(0)
+
+            let isFirstFrame = true
+
+            // This is the tree to be rendered "server" and client-side.
+            const Component = React.createElement(motion.div, {
+                id: "box",
+                initial: { x: 0, opacity: 0 },
+                animate: { x: 100, opacity: 1 },
+                transition: { duration, ease: "linear" },
+                style: { x },
+                /**
+                 * On animation start, check the values we expect to see here
+                 */
+                onAnimationStart: () => {
+                    const box = document.getElementById("box")
+
+                    box.style.backgroundColor = "green"
+
+                    setTimeout(() => {
+                        box.style.transform = "scale(2)"
+
+                        const { width } = box.getBoundingClientRect()
+                        if (width !== 100) {
+                            showError(
+                                document.getElementById("box"),
+                                `Setting transform became visible, which means optimised animation has been prematurely cancelled. Width was ${width}px instead of 200px.`
+                            )
+                        }
+                    }, 100)
+                },
+                [optimizedAppearDataAttribute]: "a",
+                children: "Content",
+            })
+
+            // Emulate server rendering of element
+            root.innerHTML = ReactDOMServer.renderToString(Component)
+
+            // Start optimised opacity animation
+            startOptimizedAppearAnimation(
+                document.getElementById("box"),
+                "opacity",
+                [0, 1],
+                {
+                    duration: duration * 1000,
+                    ease: "linear",
+                }
+            )
+
+            // Start WAAPI animation
+            const animation = startOptimizedAppearAnimation(
+                document.getElementById("box"),
+                "transform",
+                ["translateX(0px)", "translateX(100px)"],
+                {
+                    duration: duration * 1000,
+                    ease: "linear",
+                },
+                (animation) => {
+                    setTimeout(() => {
+                        ReactDOM.hydrateRoot(root, Component)
+                    }, (duration * 1000) / 2)
+                }
+            )
+        </script>
+    </body>
+</html>
diff --git a/packages/framer-motion/cypress/fixtures/appear-tests.json b/packages/framer-motion/cypress/fixtures/appear-tests.json
@@ -1 +1 @@
-["defer-handoff.html","interrupt-delay-after.html","interrupt-delay-before-accelerated.html","interrupt-delay-before.html","interrupt-spring.html","interrupt-tween-opacity-waapi.html","interrupt-tween-opacity.html","interrupt-tween-transforms.html","interrupt-tween-x.html","persist.html","portal.html","resync-delay.html","resync.html","start-after-hydration.html"]
+["defer-handoff.html","interrupt-delay-after.html","interrupt-delay-before-accelerated.html","interrupt-delay-before.html","interrupt-spring.html","interrupt-tween-opacity-waapi.html","interrupt-tween-opacity.html","interrupt-tween-transforms.html","interrupt-tween-x.html","persist-optimised-animation.html","persist.html","portal.html","resync-delay.html","resync.html","start-after-hydration.html"]
diff --git a/packages/framer-motion/src/animation/interfaces/visual-element-target.ts b/packages/framer-motion/src/animation/interfaces/visual-element-target.ts
@@ -10,6 +10,7 @@ import { setTarget } from "../../render/utils/setters"
 import { AnimationPlaybackControls } from "../types"
 import { getValueTransition } from "../utils/transitions"
 import { MotionValue } from "../../value"
+import { frame } from "../../frameloop"
 
 /**
  * Decide whether we should block this animation. Previously, we achieved this
@@ -90,7 +91,12 @@ export function animateTarget(
                 visualElement.getProps()[optimizedAppearDataAttribute]
 
             if (appearId) {
-                const elapsed = window.HandoffAppearAnimations(appearId, key)
+                const elapsed = window.HandoffAppearAnimations(
+                    appearId,
+                    key,
+                    value,
+                    frame
+                )
 
                 if (elapsed !== null) {
                     valueTransition.elapsed = elapsed

diff --git a/packages/framer-motion/src/animation/optimized-appear/handoff.ts b/packages/framer-motion/src/animation/optimized-appear/handoff.ts
@@ -1,3 +1,5 @@
+import type { Batcher } from "../../frameloop/types"
+import type { MotionValue } from "../../value"
 import { transformProps } from "../../render/html/utils/transform"
 import { appearAnimationStore } from "./store"
 import { appearStoreId } from "./store-id"
@@ -6,7 +8,15 @@ let handoffFrameTime: number
 
 export function handoffOptimizedAppearAnimation(
     elementId: string,
-    valueName: string
+    valueName: string,
+    /**
+     * Legacy arguments. This function is inlined as part of SSG so it can be there's
+     * a version mismatch between the main included Motion and the inlined script.
+     *
+     * Remove in early 2024.
+     */
+    _value: MotionValue,
+    _frame: Batcher
 ): number | null {
     const optimisedValueName = transformProps.has(valueName)
         ? "transform"

diff --git a/packages/framer-motion/src/animation/optimized-appear/types.ts b/packages/framer-motion/src/animation/optimized-appear/types.ts
@@ -1,6 +1,17 @@
+import type { Batcher } from "../../frameloop/types"
+import type { MotionValue } from "../../value"
+
 export type HandoffFunction = (
     storeId: string,
-    valueName: string
+    valueName: string,
+    /**
+     * Legacy arguments. This function is inlined as part of SSG so it can be there's
+     * a version mismatch between the main included Motion and the inlined script.
+     *
+     * Remove in early 2024.
+     */
+    _value: MotionValue,
+    _frame: Batcher
 ) => null | number
 
 /**