Merge pull request #1816 from framer/feature/resume-waapi-animations

Optimised appear animations
framer · Dec 13, 2022 · 6adc917 · 6adc917
2 parents 8410d2e + bac5a8a
commit 6adc917
Show file tree

Hide file tree

Showing 40 changed files with 1,139 additions and 141 deletions.
diff --git a/.gitignore b/.gitignore
@@ -16,6 +16,7 @@ yarn-error.log
 /packages/*/coverage
 /packages/*/cypress/screenshots
 /packages/*/cypress/videos
+/packages/*/cypress/fixtures/appear-tests.json
 /packages/*/cypress/fixtures/projection-tests.json
 .cache-loader
 

diff --git a/.yarn/cache/@motionone-animation-npm-10.13.2-2d612b9109-f748e40c00.zip b/.yarn/cache/@motionone-animation-npm-10.13.2-2d612b9109-f748e40c00.zip
diff --git a/.yarn/cache/@motionone-animation-npm-10.15.1-f581cc96f3-75b7a1e6c4.zip b/.yarn/cache/@motionone-animation-npm-10.15.1-f581cc96f3-75b7a1e6c4.zip
diff --git a/.yarn/cache/@motionone-dom-npm-10.13.1-2b54608f7c-cbf7e9f4f2.zip b/.yarn/cache/@motionone-dom-npm-10.13.1-2b54608f7c-cbf7e9f4f2.zip
diff --git a/.yarn/cache/@motionone-dom-npm-10.15.3-a0343c9f8b-e43746b837.zip b/.yarn/cache/@motionone-dom-npm-10.15.3-a0343c9f8b-e43746b837.zip
diff --git a/...ing-npm-10.13.2-f32ef8c665-7589a46cf0.zip → ...ing-npm-10.15.1-793a4addaa-cf7cfcf991.zip b/...ing-npm-10.13.2-f32ef8c665-7589a46cf0.zip → ...ing-npm-10.15.1-793a4addaa-cf7cfcf991.zip
diff --git a/...ors-npm-10.13.2-acfad0e593-1f93e74e99.zip → ...ors-npm-10.15.1-9b31cd017c-0eb6797a64.zip b/...ors-npm-10.13.2-acfad0e593-1f93e74e99.zip → ...ors-npm-10.15.1-9b31cd017c-0eb6797a64.zip
diff --git a/...pes-npm-10.13.2-de43249558-34745476c2.zip → ...pes-npm-10.15.1-0bac46e291-98091f7dca.zip b/...pes-npm-10.13.2-de43249558-34745476c2.zip → ...pes-npm-10.15.1-0bac46e291-98091f7dca.zip
diff --git a/...ils-npm-10.13.2-3640662822-fd43f7c5d2.zip → ...ils-npm-10.15.1-13443b5c16-6ef13cd663.zip b/...ils-npm-10.13.2-3640662822-fd43f7c5d2.zip → ...ils-npm-10.15.1-13443b5c16-6ef13cd663.zip
diff --git a/dev/optimized-appear/collect-appear-tests.js b/dev/optimized-appear/collect-appear-tests.js
@@ -0,0 +1,19 @@
+const fs = require("fs")
+const path = require("path")
+
+const files = fs
+    .readdirSync(__dirname)
+    .filter((f) => path.extname(f) === ".html" && !f.includes(".skip."))
+
+fs.writeFile(
+    "../../packages/framer-motion/cypress/fixtures/appear-tests.json",
+    JSON.stringify(files),
+    "utf8",
+    (err) => {
+        if (err) {
+            return console.error("Fail to collect appear tests:", err.message)
+        }
+
+        console.log("Appear tests collected!")
+    }
+)
diff --git a/dev/optimized-appear/interrupt-delay-after.html b/dev/optimized-appear/interrupt-delay-after.html
@@ -0,0 +1,127 @@
+<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,
+                startOptimizedAppearAnimation,
+                optimizedAppearDataAttribute,
+                motionValue,
+            } = window.Motion
+            const { matchOpacity } = window.Assert
+            const root = document.getElementById("root")
+
+            const duration = 1
+            const opacity = motionValue(0)
+            let opacityHasChanged = false
+
+            opacity.onChange((v) => {
+                if (!opacityHasChanged) {
+                    if (v > 0.3) {
+                        showError(
+                            document.getElementById("box"),
+                            `opacity should not start animating beyond 0.3 (started at ${v})`
+                        )
+                    }
+                }
+                opacityHasChanged = true
+                if (v < 0.25) {
+                    showError(
+                        document.getElementById("box"),
+                        "opacity should never be less than 0.25"
+                    )
+                }
+            })
+
+            // This is the tree to be rendered "server" and client-side.
+            const Component = React.createElement(motion.div, {
+                id: "box",
+                initial: { opacity: 0 },
+                animate: { opacity: 1 },
+                transition: { duration, ease: "linear", delay: 0.25 },
+                style: { opacity },
+                /**
+                 * On animation start, check the values we expect to see here
+                 */
+                onAnimationStart: () => {
+                    matchOpacity(document.getElementById("box"), 0.25)
+                },
+                [optimizedAppearDataAttribute]: "a",
+            })
+
+            // Emulate server rendering of element
+            root.innerHTML = ReactDOMServer.renderToString(Component)
+
+            // Start Motion One animation
+            const animation = startOptimizedAppearAnimation(
+                document.getElementById("box"),
+                "opacity",
+                [0, 1],
+                {
+                    duration: duration * 1000,
+                    ease: "linear",
+                    delay: 250,
+                }
+            )
+
+            const ready = animation.ready
+                ? animation.ready.then
+                : requestAnimationFrame
+            ready(() => {
+                /**
+                 * Set currentTime to 500ms - because of the delay this will cut
+                 * into the animation at 0.25
+                 */
+                if (animation) {
+                    animation.currentTime = (duration * 1000) / 2
+                    animation.pause()
+                }
+
+                // Hydrate root mid-way through animation
+                ReactDOM.hydrateRoot(root, Component)
+
+                /**
+                 * Check the animation isn't in its initial state
+                 */
+                setTimeout(() => {
+                    const { opacity: initialOpacity } = window.getComputedStyle(
+                        document.getElementById("box")
+                    )
+
+                    if (initialOpacity === "0") {
+                        showError(
+                            document.getElementById("box"),
+                            `opacity should have animated`
+                        )
+                    }
+                }, 100)
+            })
+        </script>
+    </body>
+</html>
diff --git a/dev/optimized-appear/interrupt-delay-before.html b/dev/optimized-appear/interrupt-delay-before.html
@@ -0,0 +1,104 @@
+<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,
+                startOptimizedAppearAnimation,
+                optimizedAppearDataAttribute,
+                motionValue,
+            } = window.Motion
+            const { matchOpacity } = window.Assert
+            const root = document.getElementById("root")
+
+            const duration = 1
+            const opacity = motionValue(0)
+            let opacityHasChanged = false
+            opacity.onChange((v) => {
+                if (!opacityHasChanged) {
+                    if (v > 0.3) {
+                        showError(
+                            document.getElementById("box"),
+                            `opacity should not start animating beyond 0 (started at ${v})`
+                        )
+                    }
+                }
+                opacityHasChanged = true
+            })
+
+            // This is the tree to be rendered "server" and client-side.
+            const Component = React.createElement(motion.div, {
+                id: "box",
+                initial: { opacity: 0 },
+                animate: { opacity: 1 },
+                transition: { duration, ease: "linear", delay: 0.25 },
+                style: { opacity },
+                /**
+                 * On animation start, check the values we expect to see here
+                 */
+                onAnimationStart: () => {
+                    matchOpacity(document.getElementById("box"), 0)
+                },
+                [optimizedAppearDataAttribute]: "a",
+            })
+
+            // Emulate server rendering of element
+            root.innerHTML = ReactDOMServer.renderToString(Component)
+
+            // Start Motion One animation
+            const animation = startOptimizedAppearAnimation(
+                document.getElementById("box"),
+                "opacity",
+                [0, 1],
+                {
+                    duration: duration * 1000,
+                    ease: "linear",
+                    delay: 250,
+                }
+            )
+
+            const ready = animation.ready
+                ? animation.ready.then
+                : requestAnimationFrame
+            ready(() => {
+                /**
+                 * Set currentTime to 500ms - because of the delay this will cut
+                 * into the animation at 0.25
+                 */
+                if (animation) {
+                    animation.currentTime = 200
+                    animation.pause()
+                }
+
+                // Hydrate root mid-way through animation
+                ReactDOM.hydrateRoot(root, Component)
+            })
+        </script>
+    </body>
+</html>