Resume optimised animations where possible (#2774)

* Ensure values cancelled on scroll

* Fixing

* Latest

* Remove logging

* Resume selected optimised animations

* Updating

* Latest

* Fixing

dev/html/public/optimized-appear/defer-handoff-block.html

@@ -36,7 +36,7 @@
             const { matchViewportBox } = window.Assert
             const root = document.getElementById("root")
 
-            const duration = 4
+            const duration = 1
             const x = motionValue(0)
             const xTarget = 500
 
@@ -85,7 +85,7 @@
                             )
 
                             const startTime = performance.now()
-                            while (performance.now() - startTime < 1000) {}
+                            while (performance.now() - startTime < 200) {}
                         })
 
                         /**

dev/html/public/optimized-appear/defer-handoff-layout-ancestor-suspend.html

@@ -64,18 +64,12 @@
                             // Cypress browser doesn't support getAnimations
                             if (!optimisedBox.getAnimations) return
 
-                            console.log(
-                                optimisedBox.getAnimations().length,
-                                layoutBox.getAnimations().length
-                            )
-
-                            // TODO: Uncomment with follow up PR to resume cancelled WAAPI animations
-                            // if (optimisedBox.getAnimations().length !== 1) {
-                            //     showError(
-                            //         optimisedBox,
-                            //         `Optimised parent should have resumed WAAPI animation`
-                            //     )
-                            // }
+                            if (optimisedBox.getAnimations().length !== 1) {
+                                showError(
+                                    optimisedBox,
+                                    `Optimised parent should have resumed WAAPI animation`
+                                )
+                            }
 
                             if (layoutBox.getAnimations().length !== 0) {
                                 showError(

packages/framer-motion/src/animation/optimized-appear/handoff.ts

@@ -16,6 +16,19 @@ export function handoffOptimizedAppearAnimation(
 
     const { animation, startTime } = optimisedAnimation
 
+    function cancelAnimation() {
+        window.MotionCancelOptimisedAnimation?.(elementId, valueName, frame)
+    }
+
+    /**
+     * We can cancel the animation once it's finished now that we've synced
+     * with Motion.
+     *
+     * Prefer onfinish over finished as onfinish is backwards compatible with
+     * older browsers.
+     */
+    animation.onfinish = cancelAnimation
+
     if (startTime === null || window.MotionHandoffIsComplete) {
         /**
          * If the startTime is null, this animation is the Paint Ready detection animation
@@ -24,16 +37,7 @@ export function handoffOptimizedAppearAnimation(
          * Or if we've already handed off the animation then we're now interrupting it.
          * In which case we need to cancel it.
          */
-        appearAnimationStore.delete(storeId)
-
-        frame.render(() =>
-            frame.render(() => {
-                try {
-                    animation.cancel()
-                } catch (error) {}
-            })
-        )
-
+        cancelAnimation()
         return null
     } else {
         return startTime

packages/framer-motion/src/animation/optimized-appear/start.ts

@@ -3,12 +3,17 @@ import { animateStyle } from "../animators/waapi"
 import { NativeAnimationOptions } from "../animators/waapi/types"
 import { optimizedAppearDataId } from "./data-id"
 import { handoffOptimizedAppearAnimation } from "./handoff"
-import { appearAnimationStore, elementsWithAppearAnimations } from "./store"
+import {
+    appearAnimationStore,
+    AppearStoreEntry,
+    elementsWithAppearAnimations,
+} from "./store"
 import { noop } from "../../utils/noop"
 import "./types"
 import { getOptimisedAppearId } from "./get-appear-id"
 import { MotionValue } from "../../value"
 import type { WithAppearProps } from "./types"
+import { Batcher } from "../../frameloop/types"
 
 /**
  * A single time to use across all animations to manually set startTime
@@ -25,6 +30,20 @@ let startFrameTime: number
  */
 let readyAnimation: Animation
 
+/**
+ * Keep track of animations that were suspended vs cancelled so we
+ * can easily resume them when we're done measuring layout.
+ */
+const suspendedAnimations = new Set<AppearStoreEntry>()
+
+function resumeSuspendedAnimations() {
+    suspendedAnimations.forEach((data) => {
+        data.animation.play()
+        data.animation.startTime = data.startTime
+    })
+    suspendedAnimations.clear()
+}
+
 export function startOptimizedAppearAnimation(
     element: HTMLElement,
     name: string,
@@ -98,14 +117,43 @@ export function startOptimizedAppearAnimation(
          */
         window.MotionCancelOptimisedAnimation = (
             elementId: string,
-            valueName: string
+            valueName: string,
+            frame?: Batcher,
+            canResume?: boolean
         ) => {
             const animationId = appearStoreId(elementId, valueName)
             const data = appearAnimationStore.get(animationId)
 
-            if (data) {
+            if (!data) return
+
+            if (frame && canResume === undefined) {
+                /**
+                 * Wait until the end of the subsequent frame to cancel the animation
+                 * to ensure we don't remove the animation before the main thread has
+                 * had a chance to resolve keyframes and render.
+                 */
+                frame.postRender(() => {
+                    frame.postRender(() => {
+                        data.animation.cancel()
+                    })
+                })
+            } else {
                 data.animation.cancel()
+            }
+
+            if (frame && canResume) {
+                suspendedAnimations.add(data)
+                frame.render(resumeSuspendedAnimations)
+            } else {
                 appearAnimationStore.delete(animationId)
+
+                /**
+                 * If there are no more animations left, we can remove the cancel function.
+                 * This will let us know when we can stop checking for conflicting layout animations.
+                 */
+                if (!appearAnimationStore.size) {
+                    window.MotionCancelOptimisedAnimation = undefined
+                }
             }
         }
 

packages/framer-motion/src/animation/optimized-appear/types.ts

@@ -35,7 +35,9 @@ declare global {
         ) => boolean
         MotionCancelOptimisedAnimation?: (
             elementId?: string,
-            valueName?: string
+            valueName?: string,
+            frame?: Batcher,
+            canResume?: boolean
         ) => void
         MotionCheckAppearSync?: (
             visualElement: WithAppearProps,

packages/framer-motion/src/projection/node/create-projection-node.ts

@@ -121,7 +121,13 @@ function cancelTreeOptimisedTransformAnimations(
     const appearId = getOptimisedAppearId(visualElement)
 
     if (window.MotionHasOptimisedAnimation!(appearId, "transform")) {
-        window.MotionCancelOptimisedAnimation!(appearId, "transform")
+        const { layout, layoutId } = projectionNode.options
+        window.MotionCancelOptimisedAnimation!(
+            appearId,
+            "transform",
+            frame,
+            !(layout || layoutId)
+        )
     }
 
     const { parent } = projectionNode