motiondivision · mergetron · Mar 12, 2024 · Dec 13, 2023 · Dec 14, 2023 · Dec 14, 2023
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,15 @@ Framer Motion adheres to [Semantic Versioning](http://semver.org/).
 
 Undocumented APIs should be considered internal and may change without warning.
 
+## [11.0.11] 2024-03-12
+
+### Changed
+
+-   Keyframes now resolved asynchronously.
+-   External event handlers now fired synchronously.
+-   CSS variables and unit conversion now supported with >2 keyframe animations.
+-   Removed WAAPI animation of `background-color`.
+
 ## [11.0.10] 2024-03-12
 
 ### Fixed

diff --git a/dev/benchmarks/cold-start-anime.html b/dev/benchmarks/cold-start-anime.html
@@ -28,15 +28,15 @@
             }
 
             .box {
-                width: 10px;
+                width: 10%;
                 height: 100px;
                 background-color: #fff;
             }
         </style>
     </head>
     <body>
         <div class="container"></div>
-        <script src="../../node_modules/animejs/lib/anime.min.js"></script>
+        <script src="../../node_modules/animejs/lib/anime.js"></script>
         <script>
             // Create boxes
             const numBoxes = 100
@@ -45,16 +45,34 @@
                 html += `<div><div class="box"></div></div>`
             }
             document.querySelector(".container").innerHTML = html
+            const boxes = document.querySelectorAll(".box")
 
             setTimeout(() => {
-                anime({
-                    targets: ".box",
-                    rotate: 360,
-                    backgroundColor: "#f00",
-                    width: "100%",
-                    duration: 1000,
-                    easing: "linear",
-                })
+                // Cold start (read from DOM)
+                boxes.forEach((box) =>
+                    anime({
+                        targets: box,
+                        rotate: Math.random() * 360,
+                        backgroundColor: "#f00",
+                        width: Math.random() * 100 + "%",
+                        translateX: 5,
+                        duration: 1000,
+                        easing: "linear",
+                    })
+                )
+
+                setTimeout(() => {
+                    // Unit conversion
+                    boxes.forEach((box) =>
+                        anime({
+                            targets: box,
+                            width: Math.random() * 100 + "px",
+                            translateX: "50%",
+                            duration: 1000,
+                            easing: "linear",
+                        })
+                    )
+                }, 1500)
             }, 1000)
         </script>
     </body>

diff --git a/dev/benchmarks/cold-start-framer-motion.html b/dev/benchmarks/cold-start-framer-motion.html
@@ -62,7 +62,7 @@
                             x: 5,
                         },
                         {
-                            easing: "linear",
+                            ease: "linear",
                             duration: 1,
                         }
                     )
@@ -78,7 +78,7 @@
                                 x: "10%",
                             },
                             {
-                                easing: "linear",
+                                ease: "linear",
                                 duration: 1,
                             }
                         )

diff --git a/dev/benchmarks/cold-start-waapi.html b/dev/benchmarks/cold-start-waapi.html
@@ -44,20 +44,51 @@
                 html += `<div><div class="box"></div></div>`
             }
             document.querySelector(".container").innerHTML = html
+            const boxes = document.querySelectorAll(".box")
 
-            boxes.forEach((box) =>
-                box.animate(
-                    {
-                        rotate: "360deg",
-                        backgroundColor: "#f00",
-                        width: "100%",
-                    },
-                    {
-                        duration: 1000,
-                        fill: "forwards",
+            setTimeout(() => {
+                boxes.forEach((box) => {
+                    const animation = box.animate(
+                        {
+                            rotate: Math.random() * 360 + "deg",
+                            backgroundColor: "#f00",
+                            width: Math.random() * 100 + "%",
+                            translate: "5px 0",
+                        },
+                        {
+                            duration: 1000,
+                            fill: "both",
+                        }
+                    )
+                    animation.onfinish = () => {
+                        requestAnimationFrame(() => {
+                            animation.commitStyles()
+                            animation.cancel()
+                        })
                     }
-                )
-            )
+                })
+
+                setTimeout(() => {
+                    boxes.forEach((box) => {
+                        const animation = box.animate(
+                            {
+                                width: Math.random() * 100 + "px",
+                                translate: "50% 0",
+                            },
+                            {
+                                duration: 1000,
+                                fill: "both",
+                            }
+                        )
+                        animation.onfinish = () => {
+                            requestAnimationFrame(() => {
+                                animation.commitStyles()
+                                animation.cancel()
+                            })
+                        }
+                    })
+                }, 1500)
+            }, 1000)
         </script>
     </body>
 </html>
diff --git a/dev/benchmarks/warm-start-framer-motion.html b/dev/benchmarks/warm-start-framer-motion.html
@@ -0,0 +1,73 @@
+<html>
+    <!--
+    Warm Start: Framer Motion
+
+    This benchmarks warm start - when an animation library already
+    knows the initial animating values.
+
+    Run in private browsing mode to avoid browser plugins interfering with
+    benchmark.
+  -->
+    <head>
+        <style>
+            body {
+                padding: 0;
+                margin: 0;
+            }
+
+            .container {
+                padding: 100px;
+                width: 100%;
+                display: flex;
+                flex-wrap: wrap;
+            }
+
+            .container > div {
+                width: 100px;
+                height: 100px;
+            }
+
+            .box {
+                width: 10%;
+                height: 100px;
+                background-color: #fff;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="container"></div>
+
+        <script src="../../packages/framer-motion/dist/dom.js"></script>
+        <script>
+            // Create boxes
+            const numBoxes = 100
+            let html = ``
+            for (let i = 0; i < numBoxes; i++) {
+                html += `<div><div class="box"></div></div>`
+            }
+            document.querySelector(".container").innerHTML = html
+
+            const { animate } = Motion
+            const boxes = document.querySelectorAll(".box")
+
+            setTimeout(() => {
+                // Warm start
+                boxes.forEach((box) =>
+                    animate(
+                        box,
+                        {
+                            rotate: [0, Math.random() * 360],
+                            backgroundColor: ["#fff", "#f00"],
+                            width: ["0%", Math.random() * 100 + "%"],
+                            x: [0, 5],
+                        },
+                        {
+                            easing: "linear",
+                            duration: 1,
+                        }
+                    )
+                )
+            }, 1000)
+        </script>
+    </body>
+</html>
diff --git a/dev/benchmarks/warm-start-gsap.html b/dev/benchmarks/warm-start-gsap.html
@@ -0,0 +1,84 @@
+<html>
+    <!--
+    Warm Start: GSAP
+
+    This benchmarks warm start - when an animation library already knows
+    the initial values to animate.
+
+    Run in private browsing mode to avoid browser plugins interfering with
+    benchmark.
+  -->
+    <head>
+        <style>
+            body {
+                padding: 0;
+                margin: 0;
+            }
+
+            .container {
+                padding: 100px;
+                width: 100%;
+                display: flex;
+                flex-wrap: wrap;
+            }
+
+            .container > div {
+                width: 100px;
+                height: 100px;
+            }
+
+            .box {
+                width: 10px;
+                height: 100px;
+                background-color: #fff;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="container"></div>
+        <script src="../../node_modules/gsap/dist/gsap.min.js"></script>
+        <script>
+            // Create boxes
+            const numBoxes = 100
+            let html = ``
+            for (let i = 0; i < numBoxes; i++) {
+                html += `<div><div class="box"></div></div>`
+            }
+            document.querySelector(".container").innerHTML = html
+
+            const boxes = document.querySelectorAll(".box")
+
+            gsap.set(boxes, {
+                rotate: 0,
+                backgroundColor: "#fff",
+                width: "0%",
+                x: 0,
+            })
+
+            setTimeout(() => {
+                // Warm start
+                boxes.forEach((box) =>
+                    gsap.to(box, {
+                        rotate: Math.random() * 360,
+                        backgroundColor: "#f00",
+                        width: Math.random() * 100 + "%",
+                        x: 5,
+                        duration: 1,
+                    })
+                )
+
+                // setTimeout(() => {
+                //     // Unit conversion
+                //     boxes.forEach((box) =>
+                //         gsap.to(box, {
+                //             width: Math.random() * 100 + "px",
+                //             x: "50%",
+                //             duration: 1,
+                //             easing: "linear",
+                //         })
+                //     )
+                // }, 1500)
+            }, 1000)
+        </script>
+    </body>
+</html>
diff --git a/dev/tests/animate-presence-pop.tsx b/dev/tests/animate-presence-pop.tsx
@@ -1,6 +1,6 @@
-import { AnimatePresence, motion } from "framer-motion"
+import { AnimatePresence, motion, animate } from "framer-motion"
 import * as React from "react"
-import { useState } from "react"
+import { useState, useRef, useEffect } from "react"
 import styled from "styled-components"
 
 const Container = styled.section`
@@ -23,6 +23,15 @@ export const App = () => {
     const itemStyle =
         position === "relative" ? { position, top: 100, left: 100 } : {}
 
+    const ref = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        if (!ref.current) return
+
+        animate(ref.current, { opacity: [0, 1] }, { duration: 1 })
+        animate(ref.current, { opacity: [1, 0.5] }, { duration: 1 })
+    }, [])
+
     return (
         <Container onClick={() => setState(!state)}>
             <AnimatePresence mode="popLayout">
@@ -54,6 +63,10 @@ export const App = () => {
                     style={{ ...itemStyle, backgroundColor: "blue" }}
                 />
             </AnimatePresence>
+            <div
+                ref={ref}
+                style={{ ...itemStyle, backgroundColor: "purple" }}
+            />
         </Container>
     )
 }
diff --git a/dev/tests/drag-ref-constraints.tsx b/dev/tests/drag-ref-constraints.tsx
@@ -14,6 +14,7 @@ export const App = () => {
         window.scrollTo(0, 100)
     }, [])
     const x = useMotionValue("100%")
+
     return (
         <div style={{ height: 2000, paddingTop: 100 }}>
             <motion.div

diff --git a/dev/tests/scroll-animate-window.tsx b/dev/tests/scroll-animate-window.tsx
@@ -5,7 +5,7 @@ import { useEffect } from "react"
 export const App = () => {
     useEffect(() => {
         /**
-         * Animate both background-color (WAAPI-driven) and color (sync)
+         * Animate both transform (WAAPI) and colors (JS)
          */
         return scroll(
             animate(