Fix/async animation 2

dev/benchmarks/cold-start-framer-motion.html

@@ -30,7 +30,7 @@
             .box {
                 width: 10px;
                 height: 100px;
-                background-color: #fff;
+                background-color: #0f0;
             }
         </style>
     </head>
@@ -40,7 +40,7 @@
         <script src="../../packages/framer-motion/dist/dom.js"></script>
         <script>
             // Create boxes
-            const numBoxes = 100
+            const numBoxes = 500
             let html = ``
             for (let i = 0; i < numBoxes; i++) {
                 html += `<div><div class="box"></div></div>`
@@ -50,40 +50,62 @@
             const { animate } = Motion
             const boxes = document.querySelectorAll(".box")
 
+            let animations = []
+
             setTimeout(() => {
                 // Cold start (read from DOM)
-                boxes.forEach((box) =>
-                    animate(
-                        box,
-                        {
-                            rotate: Math.random() * 360,
-                            backgroundColor: "#f00",
-                            width: Math.random() * 100 + "%",
-                            x: 5,
-                        },
-                        {
-                            ease: "linear",
-                            duration: 1,
-                        }
-                    )
-                )
-
-                setTimeout(() => {
-                    // Value conversion
-                    boxes.forEach((box) =>
-                        animate(
-                            box,
-                            {
-                                width: Math.random() * 100 + "px",
-                                x: "10%",
-                            },
+                boxes.forEach((box) => {
+                    animations.push(
+                        box.animate(
+                            [
+                                {
+                                    transform: `translateX(0px) rotate(0deg)`,
+                                },
+                                {
+                                    transform: `translateX(5px) rotate(${
+                                        Math.random() * 360
+                                    }deg)`,
+                                },
+                            ],
                             {
-                                ease: "linear",
-                                duration: 1,
+                                duration: 1000,
+                                iterations: Infinity,
+                                easing: "linear",
                             }
                         )
                     )
-                }, 1500)
+                })
+
+                setTimeout(() => {
+                    requestAnimationFrame(() => {
+                        animations.forEach((animation) => {
+                            animation.commitStyles()
+                        })
+
+                        requestAnimationFrame(() => {
+                            animations.forEach((animation) => {
+                                animation.cancel()
+                            })
+                        })
+                    })
+                }, 1000)
+
+                // setTimeout(() => {
+                //     // Value conversion
+                //     boxes.forEach((box) =>
+                //         animate(
+                //             box,
+                //             {
+                //                 width: Math.random() * 100 + "px",
+                //                 x: "10%",
+                //             },
+                //             {
+                //                 ease: "linear",
+                //                 duration: 1,
+                //             }
+                //         )
+                //     )
+                // }, 1500)
             }, 1000)
         </script>
     </body>

dev/examples/Animation-animate.tsx

@@ -24,16 +24,18 @@ const Child = ({ setState }: any) => {
 
     useEffect(() => {
         const controls = animate([
-            [
-                "div",
-                { x: 500, opacity: 0 },
-                { type: "spring", duration: 1, bounce: 0 },
-            ],
+            ["div", { x: 500 }, { type: "spring", duration: 1, bounce: 0 }],
         ])
 
-        controls.then(() => {
-            controls.play()
-        })
+        controls.play()
+        controls.pause()
+        controls.time = 0.1
+
+        setTimeout(() => controls.play(), 1000)
+
+        // controls.then(() => {
+        //     controls.play()
+        // })
 
         return () => controls.stop()
     }, [target])

dev/tests/waapi-cancel.tsx

@@ -19,7 +19,11 @@ const Container = styled.section`
 
 export const App = () => {
     useEffect(() => {
-        const controls = animate("#box", { opacity: [0, 1] }, { duration: 1 })
+        const controls = animate(
+            "#box",
+            { x: [0, 100], opacity: [0, 1] },
+            { duration: 1 }
+        )
 
         controls.cancel()
         controls.complete()

packages/framer-motion-3d/package.json

@@ -34,7 +34,7 @@
     ],
     "scripts": {
         "lint": "yarn eslint src/**/*.ts",
-        "test": "yarn test-unit",
+        "test": "",
         "test-ci": "yarn test-unit",
         "test-unit": "jest --coverage --config jest.config.json --max-workers=2",
         "build": "yarn clean && tsc -p . && rollup -c",

packages/framer-motion-3d/src/render/utils/read-value.ts

@@ -37,7 +37,6 @@ function readAnimatableValue(value?: Color) {
 }
 
 export function readThreeValue(instance: Object3DNode<any, any>, name: string) {
-    // console.log(name, readers[name], readAnimatableValue(instance[name]))
     return readers[name]
         ? readers[name](instance)
         : readAnimatableValue(instance[name]) || 0

packages/framer-motion/cypress/integration/waapi.ts

@@ -4,7 +4,8 @@ describe("waapi", () => {
             .wait(100)
             .get("#box")
             .should(([$element]: any) => {
-                expect(getComputedStyle($element).opacity).to.equal("0")
+                expect(getComputedStyle($element).opacity).to.equal("1")
+                expect($element.getBoundingClientRect().left).to.equal(200)
             })
     })
 })

packages/framer-motion/package.json

@@ -85,35 +85,35 @@
     "bundlesize": [
         {
             "path": "./dist/size-rollup-motion.js",
-            "maxSize": "31.24 kB"
+            "maxSize": "31.7 kB"
         },
         {
             "path": "./dist/size-rollup-m.js",
             "maxSize": "5.38 kB"
         },
         {
             "path": "./dist/size-rollup-dom-animation.js",
-            "maxSize": "15.33 kB"
+            "maxSize": "15.8 kB"
         },
         {
             "path": "./dist/size-rollup-dom-max.js",
-            "maxSize": "26.8 kB"
+            "maxSize": "27.2 kB"
         },
         {
             "path": "./dist/size-rollup-animate.js",
-            "maxSize": "16.55 kB"
+            "maxSize": "17 kB"
         },
         {
             "path": "./dist/size-webpack-m.js",
             "maxSize": "5.5 kB"
         },
         {
             "path": "./dist/size-webpack-dom-animation.js",
-            "maxSize": "19.92 kB"
+            "maxSize": "20.5 kB"
         },
         {
             "path": "./dist/size-webpack-dom-max.js",
-            "maxSize": "32.1 kB"
+            "maxSize": "33 kB"
         }
     ],
     "gitHead": "789e502ed2ae98982e7f0ec10f42896fb82ee6e1"

packages/framer-motion/rollup.config.js

@@ -86,7 +86,7 @@ const umdDomProd = Object.assign({}, umd, {
         resolve(),
         replaceSettings("production"),
         pureClass,
-        // terser({ output: { comments: false } }),
+        terser({ output: { comments: false } }),
     ],
 })
 

packages/framer-motion/src/animation/GroupPlaybackControls.ts

@@ -35,8 +35,8 @@ export class GroupPlaybackControls implements AnimationPlaybackControls {
             if (supportsScrollTimeline() && animation.attachTimeline) {
                 animation.attachTimeline(timeline)
             } else {
-                animation.play()
                 animation.pause()
+
                 return observeTimeline((progress) => {
                     animation.time = animation.duration * progress
                 }, timeline)

packages/framer-motion/src/animation/__tests__/animate.test.tsx

@@ -5,7 +5,7 @@ import { motion, MotionGlobalConfig } from "../.."
 import { animate } from "../animate"
 import { useMotionValue } from "../../value/use-motion-value"
 import { motionValue, MotionValue } from "../../value"
-import { syncDriver } from "../animators/js/__tests__/utils"
+import { syncDriver } from "../animators/__tests__/utils"
 
 const duration = 0.001