framer-motion 11.3.25-alpha.9 → 11.3.26

package/dist/cjs/dom-entry.js

@@ -96,6 +96,7 @@ const stepsOrder = [
     "render", // Write
     "postRender", // Compute
 ];
+const maxElapsed$1 = 40;
 function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
     let runNextFrame = false;
     let useDefaultElapsed = true;
@@ -115,7 +116,7 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
         runNextFrame = false;
         state.delta = useDefaultElapsed
             ? 1000 / 60
-            : Math.max(timestamp - state.timestamp, 1);
+            : Math.max(Math.min(timestamp - state.timestamp, maxElapsed$1), 1);
         state.timestamp = timestamp;
         state.isProcessing = true;
         // Unrolled render loop for better per-frame performance
@@ -278,7 +279,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "11.3.25-alpha.9";
+        this.version = "11.3.26";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -677,9 +678,6 @@ class GroupPlaybackControls {
     set speed(speed) {
         this.setAll("speed", speed);
     }
-    get startTime() {
-        return this.getAll("startTime");
-    }
     get duration() {
         let max = 0;
         for (let i = 0; i < this.animations.length; i++) {
@@ -2645,6 +2643,10 @@ class MainThreadAnimation extends BaseAnimation {
          * The time at which the animation was paused.
          */
         this.holdTime = null;
+        /**
+         * The time at which the animation was started.
+         */
+        this.startTime = null;
         /**
          * The time at which the animation was cancelled.
          */
@@ -2663,11 +2665,6 @@ class MainThreadAnimation extends BaseAnimation {
          * without us having to resolve it first.
          */
         this.pendingPlayState = "running";
-        /**
-         * The time at which the animation was started.
-         */
-        this.startTime = null;
-        this.log = false;
         this.state = "idle";
         /**
          * This method is bound to the instance to fix a pattern where
@@ -2682,17 +2679,10 @@ class MainThreadAnimation extends BaseAnimation {
             const { onStop } = this.options;
             onStop && onStop();
         };
-        const { name, motionValue, element, keyframes, isGenerator } = this.options;
+        const { name, motionValue, element, keyframes } = this.options;
         const KeyframeResolver$1 = (element === null || element === void 0 ? void 0 : element.KeyframeResolver) || KeyframeResolver;
         const onResolved = (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe);
-        const urlParams = new URLSearchParams(window.location.search);
-        const logId = urlParams.get("log-id");
-        if (element &&
-            logId &&
-            element.getProps()["data-framer-appear-id"] === logId) {
-            this.log = true;
-        }
-        this.resolver = new KeyframeResolver$1(keyframes, onResolved, name, motionValue, element, !isGenerator);
+        this.resolver = new KeyframeResolver$1(keyframes, onResolved, name, motionValue, element);
         this.resolver.scheduleResolve();
     }
     initPlayback(keyframes$1) {
@@ -2874,9 +2864,6 @@ class MainThreadAnimation extends BaseAnimation {
         if (isAnimationFinished && finalKeyframe !== undefined) {
             state.value = getFinalKeyframe(keyframes, this.options, finalKeyframe);
         }
-        if (this.log) {
-            console.log("startTime", this.startTime, "elapsed", elapsed, "value", state.value);
-        }
         if (onUpdate) {
             onUpdate(state.value);
         }
@@ -2922,20 +2909,16 @@ class MainThreadAnimation extends BaseAnimation {
         }
         if (this.isStopped)
             return;
-        const { driver = frameloopDriver, onPlay, startTime } = this.options;
+        const { driver = frameloopDriver, onPlay } = this.options;
         if (!this.driver) {
             this.driver = driver((timestamp) => this.tick(timestamp));
         }
         onPlay && onPlay();
-        const now = this.driver.now();
         if (this.holdTime !== null) {
-            this.startTime = now - this.holdTime;
-        }
-        else if (!this.startTime) {
-            this.startTime = startTime !== null && startTime !== void 0 ? startTime : this.calcStartTime();
+            this.startTime = this.driver.now() - this.holdTime;
         }
-        else if (this.state === "finished") {
-            this.startTime = now;
+        else if (!this.startTime || this.state === "finished") {
+            this.startTime = this.calcStartTime();
         }
         if (this.state === "finished") {
             this.updateFinishedPromise();
@@ -3131,7 +3114,7 @@ class AcceleratedAnimation extends BaseAnimation {
     }
     initPlayback(keyframes, finalKeyframe) {
         var _a;
-        let { duration = 300, times, ease, type, motionValue, name, startTime, } = this.options;
+        let { duration = 300, times, ease, type, motionValue, name, } = this.options;
         /**
          * If element has since been unmounted, return false to indicate
          * the animation failed to initialised.
@@ -3160,7 +3143,7 @@ class AcceleratedAnimation extends BaseAnimation {
         const animation = animateStyle(motionValue.owner.current, name, keyframes, { ...this.options, duration, times, ease });
         // Override the browser calculated startTime with one synchronised to other JS
         // and WAAPI animations starting this event loop.
-        animation.startTime = startTime !== null && startTime !== void 0 ? startTime : this.calcStartTime();
+        animation.startTime = this.calcStartTime();
         if (this.pendingTimeline) {
             animation.timeline = this.pendingTimeline;
             this.pendingTimeline = undefined;
@@ -3233,15 +3216,6 @@ class AcceleratedAnimation extends BaseAnimation {
         const { animation } = resolved;
         return animation.playState;
     }
-    get startTime() {
-        const { resolved } = this;
-        if (!resolved)
-            return null;
-        const { animation } = resolved;
-        // Coerce to number as TypeScript incorrectly types this
-        // as CSSNumberish
-        return animation.startTime;
-    }
     /**
      * Replace the default DocumentTimeline with another AnimationTimeline.
      * Currently used for scroll animations.
@@ -3352,7 +3326,7 @@ class AcceleratedAnimation extends BaseAnimation {
     }
 }
 
-const animateMotionValue = (name, value, target, transition = {}, element, 
+const animateMotionValue = (name, value, target, transition = {}, element, isHandoff, 
 /**
  * Currently used to remove values from will-change when an animation ends.
  * Preferably this would be handled by event listeners on the MotionValue
@@ -3371,7 +3345,7 @@ onEnd) => (onComplete) => {
      * Elapsed isn't a public transition option but can be passed through from
      * optimized appear effects in milliseconds.
      */
-    let { elapsed = 0, isHandoff } = transition;
+    let { elapsed = 0 } = transition;
     elapsed = elapsed - secondsToMilliseconds(delay);
     let options = {
         keyframes: Array.isArray(target) ? target : [null, target],
@@ -3645,7 +3619,7 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
                 shouldBlockAnimation(animationTypeState, key))) {
             continue;
         }
-        let valueTransition = {
+        const valueTransition = {
             delay,
             elapsed: 0,
             ...getValueTransition$1(transition || {}, key),
@@ -3654,22 +3628,20 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
          * If this is the first time a value is being animated, check
          * to see if we're handling off from an existing animation.
          */
+        let isHandoff = false;
         if (window.MotionHandoffAnimation) {
             const appearId = getOptimisedAppearId(visualElement);
             if (appearId) {
-                const info = window.MotionHandoffAnimation(appearId, key, frame);
-                if (info !== null) {
-                    valueTransition = {
-                        ...valueTransition,
-                        ...info,
-                        isHandoff: true,
-                    };
+                const elapsed = window.MotionHandoffAnimation(appearId, key, frame);
+                if (elapsed !== null) {
+                    valueTransition.elapsed = elapsed;
+                    isHandoff = true;
                 }
             }
         }
         value.start(animateMotionValue(key, value, valueTarget, visualElement.shouldReduceMotion && transformProps.has(key)
             ? { type: false }
-            : valueTransition, visualElement, addValueToWillChange(visualElement, key)));
+            : valueTransition, visualElement, isHandoff, addValueToWillChange(visualElement, key)));
         const animation = value.animation;
         if (animation) {
             animations.push(animation);
@@ -3803,7 +3775,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.3.25-alpha.9", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.3.25-alpha.9 may not work as expected.`);
+                warnOnce(nextValue.version === "11.3.26", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.3.26 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/cjs/index.js

@@ -146,6 +146,7 @@ const stepsOrder = [
     "render", // Write
     "postRender", // Compute
 ];
+const maxElapsed$1 = 40;
 function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
     let runNextFrame = false;
     let useDefaultElapsed = true;
@@ -167,7 +168,7 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
         runNextFrame = false;
         state.delta = useDefaultElapsed
             ? 1000 / 60
-            : Math.max(timestamp - state.timestamp, 1);
+            : Math.max(Math.min(timestamp - state.timestamp, maxElapsed$1), 1);
         state.timestamp = timestamp;
         state.isProcessing = true;
         // Unrolled render loop for better per-frame performance
@@ -3892,6 +3893,10 @@ class MainThreadAnimation extends BaseAnimation {
          * The time at which the animation was paused.
          */
         this.holdTime = null;
+        /**
+         * The time at which the animation was started.
+         */
+        this.startTime = null;
         /**
          * The time at which the animation was cancelled.
          */
@@ -3910,11 +3915,6 @@ class MainThreadAnimation extends BaseAnimation {
          * without us having to resolve it first.
          */
         this.pendingPlayState = "running";
-        /**
-         * The time at which the animation was started.
-         */
-        this.startTime = null;
-        this.log = false;
         this.state = "idle";
         /**
          * This method is bound to the instance to fix a pattern where
@@ -3929,17 +3929,10 @@ class MainThreadAnimation extends BaseAnimation {
             const { onStop } = this.options;
             onStop && onStop();
         };
-        const { name, motionValue, element, keyframes, isGenerator } = this.options;
+        const { name, motionValue, element, keyframes } = this.options;
         const KeyframeResolver$1 = (element === null || element === void 0 ? void 0 : element.KeyframeResolver) || KeyframeResolver;
         const onResolved = (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe);
-        const urlParams = new URLSearchParams(window.location.search);
-        const logId = urlParams.get("log-id");
-        if (element &&
-            logId &&
-            element.getProps()["data-framer-appear-id"] === logId) {
-            this.log = true;
-        }
-        this.resolver = new KeyframeResolver$1(keyframes, onResolved, name, motionValue, element, !isGenerator);
+        this.resolver = new KeyframeResolver$1(keyframes, onResolved, name, motionValue, element);
         this.resolver.scheduleResolve();
     }
     initPlayback(keyframes$1) {
@@ -4121,9 +4114,6 @@ class MainThreadAnimation extends BaseAnimation {
         if (isAnimationFinished && finalKeyframe !== undefined) {
             state.value = getFinalKeyframe(keyframes, this.options, finalKeyframe);
         }
-        if (this.log) {
-            console.log("startTime", this.startTime, "elapsed", elapsed, "value", state.value);
-        }
         if (onUpdate) {
             onUpdate(state.value);
         }
@@ -4169,20 +4159,16 @@ class MainThreadAnimation extends BaseAnimation {
         }
         if (this.isStopped)
             return;
-        const { driver = frameloopDriver, onPlay, startTime } = this.options;
+        const { driver = frameloopDriver, onPlay } = this.options;
         if (!this.driver) {
             this.driver = driver((timestamp) => this.tick(timestamp));
         }
         onPlay && onPlay();
-        const now = this.driver.now();
         if (this.holdTime !== null) {
-            this.startTime = now - this.holdTime;
-        }
-        else if (!this.startTime) {
-            this.startTime = startTime !== null && startTime !== void 0 ? startTime : this.calcStartTime();
+            this.startTime = this.driver.now() - this.holdTime;
         }
-        else if (this.state === "finished") {
-            this.startTime = now;
+        else if (!this.startTime || this.state === "finished") {
+            this.startTime = this.calcStartTime();
         }
         if (this.state === "finished") {
             this.updateFinishedPromise();
@@ -4369,7 +4355,7 @@ class AcceleratedAnimation extends BaseAnimation {
     }
     initPlayback(keyframes, finalKeyframe) {
         var _a;
-        let { duration = 300, times, ease, type, motionValue, name, startTime, } = this.options;
+        let { duration = 300, times, ease, type, motionValue, name, } = this.options;
         /**
          * If element has since been unmounted, return false to indicate
          * the animation failed to initialised.
@@ -4398,7 +4384,7 @@ class AcceleratedAnimation extends BaseAnimation {
         const animation = animateStyle(motionValue.owner.current, name, keyframes, { ...this.options, duration, times, ease });
         // Override the browser calculated startTime with one synchronised to other JS
         // and WAAPI animations starting this event loop.
-        animation.startTime = startTime !== null && startTime !== void 0 ? startTime : this.calcStartTime();
+        animation.startTime = this.calcStartTime();
         if (this.pendingTimeline) {
             animation.timeline = this.pendingTimeline;
             this.pendingTimeline = undefined;
@@ -4471,15 +4457,6 @@ class AcceleratedAnimation extends BaseAnimation {
         const { animation } = resolved;
         return animation.playState;
     }
-    get startTime() {
-        const { resolved } = this;
-        if (!resolved)
-            return null;
-        const { animation } = resolved;
-        // Coerce to number as TypeScript incorrectly types this
-        // as CSSNumberish
-        return animation.startTime;
-    }
     /**
      * Replace the default DocumentTimeline with another AnimationTimeline.
      * Currently used for scroll animations.
@@ -4659,9 +4636,6 @@ class GroupPlaybackControls {
     set speed(speed) {
         this.setAll("speed", speed);
     }
-    get startTime() {
-        return this.getAll("startTime");
-    }
     get duration() {
         let max = 0;
         for (let i = 0; i < this.animations.length; i++) {
@@ -4686,7 +4660,7 @@ class GroupPlaybackControls {
     }
 }
 
-const animateMotionValue = (name, value, target, transition = {}, element, 
+const animateMotionValue = (name, value, target, transition = {}, element, isHandoff, 
 /**
  * Currently used to remove values from will-change when an animation ends.
  * Preferably this would be handled by event listeners on the MotionValue
@@ -4705,7 +4679,7 @@ onEnd) => (onComplete) => {
      * Elapsed isn't a public transition option but can be passed through from
      * optimized appear effects in milliseconds.
      */
-    let { elapsed = 0, isHandoff } = transition;
+    let { elapsed = 0 } = transition;
     elapsed = elapsed - secondsToMilliseconds(delay);
     let options = {
         keyframes: Array.isArray(target) ? target : [null, target],
@@ -4872,7 +4846,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "11.3.25-alpha.9";
+        this.version = "11.3.26";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -5276,7 +5250,7 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
                 shouldBlockAnimation(animationTypeState, key))) {
             continue;
         }
-        let valueTransition = {
+        const valueTransition = {
             delay,
             elapsed: 0,
             ...getValueTransition$1(transition || {}, key),
@@ -5285,22 +5259,20 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
          * If this is the first time a value is being animated, check
          * to see if we're handling off from an existing animation.
          */
+        let isHandoff = false;
         if (window.MotionHandoffAnimation) {
             const appearId = getOptimisedAppearId(visualElement);
             if (appearId) {
-                const info = window.MotionHandoffAnimation(appearId, key, frame);
-                if (info !== null) {
-                    valueTransition = {
-                        ...valueTransition,
-                        ...info,
-                        isHandoff: true,
-                    };
+                const elapsed = window.MotionHandoffAnimation(appearId, key, frame);
+                if (elapsed !== null) {
+                    valueTransition.elapsed = elapsed;
+                    isHandoff = true;
                 }
             }
         }
         value.start(animateMotionValue(key, value, valueTarget, visualElement.shouldReduceMotion && transformProps.has(key)
             ? { type: false }
-            : valueTransition, visualElement, addValueToWillChange(visualElement, key)));
+            : valueTransition, visualElement, isHandoff, addValueToWillChange(visualElement, key)));
         const animation = value.animation;
         if (animation) {
             animations.push(animation);
@@ -6612,7 +6584,7 @@ class VisualElementDragControls {
     }
     startAxisValueAnimation(axis, transition) {
         const axisValue = this.getAxisMotionValue(axis);
-        return axisValue.start(animateMotionValue(axis, axisValue, 0, transition, this.visualElement, addValueToWillChange(this.visualElement, axis)));
+        return axisValue.start(animateMotionValue(axis, axisValue, 0, transition, this.visualElement, false, addValueToWillChange(this.visualElement, axis)));
     }
     stopAnimation() {
         eachAxis((axis) => this.getAxisMotionValue(axis).stop());
@@ -7336,7 +7308,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.3.25-alpha.9", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.3.25-alpha.9 may not work as expected.`);
+                warnOnce(nextValue.version === "11.3.26", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.3.26 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -8971,30 +8943,23 @@ function resetDistortingTransform(key, visualElement, values, sharedAnimationVal
         }
     }
 }
-function cancelTreeOptimisedTransformAnimations(projectionNode) {
+function isOptimisedTransformAnimationInTree(projectionNode) {
     projectionNode.hasCheckedOptimisedAppear = true;
     if (projectionNode.root === projectionNode)
-        return;
+        return false;
     const { visualElement } = projectionNode.options;
-    if (!visualElement)
-        return;
-    const appearId = getOptimisedAppearId(visualElement);
-    if (window.MotionHasOptimisedTransformAnimation(appearId)) {
-        const now = performance.now();
-        console.log(now, time.now());
-        frameData.delta = 8;
-        frameData.timestamp = now;
-        frameData.isProcessing = true;
-        flushKeyframeResolvers();
-        steps.update.process(frameData);
-        steps.preRender.process(frameData);
-        steps.render.process(frameData);
-        frameData.isProcessing = false;
-        window.MotionCancelOptimisedTransform(appearId);
-    }
-    const { parent } = projectionNode;
-    if (parent && !parent.hasCheckedOptimisedAppear) {
-        cancelTreeOptimisedTransformAnimations(parent);
+    if (!visualElement) {
+        return false;
+    }
+    else if (window.MotionHasOptimisedTransformAnimation(getOptimisedAppearId(visualElement))) {
+        return true;
+    }
+    else if (projectionNode.parent &&
+        !projectionNode.parent.hasCheckedOptimisedAppear) {
+        return isOptimisedTransformAnimationInTree(projectionNode.parent);
+    }
+    else {
+        return false;
     }
 }
 function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
@@ -9318,9 +9283,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              * snapshots in startUpdate(), but we only want to cancel optimised animations
              * if a layout animation measurement is actually going to be affected by them.
              */
-            if (window.MotionCancelOptimisedTransform &&
-                !this.hasCheckedOptimisedAppear) {
-                cancelTreeOptimisedTransformAnimations(this);
+            if (window.MotionHandoffCancelAll &&
+                isOptimisedTransformAnimationInTree(this)) {
+                window.MotionHandoffCancelAll();
             }
             !this.root.isUpdating && this.root.startUpdate();
             if (this.isLayoutDirty)
@@ -12251,10 +12216,7 @@ function handoffOptimizedAppearAnimation(elementId, valueName, frame) {
          * an updated value for several frames, even as the animation plays smoothly via
          * the GPU.
          */
-        return {
-            elapsed: handoffFrameTime - startTime || 0,
-            startTime: handoffFrameTime,
-        };
+        return handoffFrameTime - startTime || 0;
     }
 }
 
@@ -12298,24 +12260,19 @@ function startOptimizedAppearAnimation(element, name, keyframes, options, onRead
          * of handoff animations.
          */
         window.MotionHandoffAnimation = handoffOptimizedAppearAnimation;
-        window.MotionHasOptimisedTransformAnimation = (elementId) => {
-            if (!elementId)
-                return false;
-            const animationId = appearStoreId(elementId, "transform");
-            return Boolean(appearAnimationStore.get(animationId));
-        };
         /**
          * We only need to cancel transform animations as
          * they're the ones that will interfere with the
          * layout animation measurements.
          */
-        window.MotionCancelOptimisedTransform = (elementId) => {
-            const animationId = appearStoreId(elementId, "transform");
-            const data = appearAnimationStore.get(animationId);
-            if (data) {
-                data.animation.cancel();
-                appearAnimationStore.delete(animationId);
-            }
+        window.MotionHandoffCancelAll = () => {
+            appearAnimationStore.forEach(({ animation }, animationId) => {
+                if (animationId.endsWith("transform")) {
+                    animation.cancel();
+                    appearAnimationStore.delete(animationId);
+                }
+            });
+            window.MotionHandoffCancelAll = undefined;
         };
         /**
          * Keep a map of elementIds that have started animating. We check
@@ -12327,6 +12284,8 @@ function startOptimizedAppearAnimation(element, name, keyframes, options, onRead
          * breakpoint.
          */
         window.MotionHasOptimisedAnimation = (elementId) => Boolean(elementId && elementsWithAppearAnimations.has(elementId));
+        window.MotionHasOptimisedTransformAnimation = (elementId) => Boolean(elementId &&
+            appearAnimationStore.has(appearStoreId(elementId, "transform")));
     }
     const startAnimation = () => {
         readyAnimation.cancel();

package/dist/dom-entry.d.ts

@@ -310,10 +310,8 @@ interface Transition extends AnimationPlaybackOptions, Omit<SpringOptions, "keyf
     type?: "decay" | "spring" | "keyframes" | "tween" | "inertia";
     duration?: number;
     autoplay?: boolean;
-    startTime?: number;
 }
 interface ValueAnimationTransition<V = any> extends Transition, AnimationPlaybackLifecycles<V> {
-    isHandoff?: boolean;
 }
 interface AnimationScope<T = any> {
     readonly current: T;
@@ -342,7 +340,6 @@ type ElementOrSelector = Element | Element[] | NodeListOf<Element> | string;
 interface AnimationPlaybackControls {
     time: number;
     speed: number;
-    startTime: number | null;
     state?: AnimationPlayState;
     duration: number;
     stop: () => void;
@@ -705,7 +702,6 @@ declare class GroupPlaybackControls implements AnimationPlaybackControls {
     set time(time: number);
     get speed(): number;
     set speed(speed: number);
-    get startTime(): any;
     get duration(): number;
     private runAll;
     play(): void;
@@ -856,11 +852,7 @@ interface FrameData {
     isProcessing: boolean;
 }
 
-interface HandoffInfo {
-    elapsed: number;
-    startTime: number;
-}
-type HandoffFunction = (storeId: string, valueName: string, frame: Batcher) => null | HandoffInfo;
+type HandoffFunction = (storeId: string, valueName: string, frame: Batcher) => null | number;
 /**
  * The window global object acts as a bridge between our inline script
  * triggering the optimized appear animations, and Framer Motion.
@@ -869,9 +861,9 @@ declare global {
     interface Window {
         MotionHandoffAnimation?: HandoffFunction;
         MotionHandoffIsComplete?: boolean;
-        MotionCancelOptimisedTransform?: (id?: string) => void;
-        MotionHasOptimisedTransformAnimation?: (id?: string) => boolean;
+        MotionHandoffCancelAll?: VoidFunction;
         MotionHasOptimisedAnimation?: (id?: string) => boolean;
+        MotionHasOptimisedTransformAnimation?: (id?: string) => boolean;
     }
 }