framer-motion 10.13.2-alpha.3 → 10.14.0

package/dist/cjs/dom-entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var indexLegacy = require('./index-legacy-f5238c85.js');
+var indexLegacy = require('./index-legacy-767d8769.js');
 
 
 

package/dist/cjs/{index-legacy-f5238c85.js → index-legacy-767d8769.js}

@@ -1948,7 +1948,6 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
         return state;
     };
     const stopAnimationDriver = () => {
-        console.log("stopping animation");
         animationDriver && animationDriver.stop();
         animationDriver = undefined;
     };
@@ -2180,16 +2179,14 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
     /**
      * Animation interrupt callback.
      */
-    return {
+    const controls = {
         then(resolve, reject) {
             return currentFinishedPromise.then(resolve, reject);
         },
-        get timeline() {
-            return animation.timeline;
-        },
-        set timeline(timeline) {
+        attachTimeline(timeline) {
             animation.timeline = timeline;
             animation.onfinish = null;
+            return noop;
         },
         get time() {
             return millisecondsToSeconds(animation.currentTime || 0);
@@ -2241,6 +2238,7 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
         complete: () => animation.finish(),
         cancel: safeCancel,
     };
+    return controls;
 }
 
 function createInstantAnimation({ keyframes, delay, onUpdate, onComplete, }) {
@@ -2659,7 +2657,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 = "10.13.2-alpha.3";
+        this.version = "10.14.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -3418,6 +3416,23 @@ function resolveElements(elements, scope, selectorCache) {
 
 const visualElementStore = new WeakMap();
 
+function observeTimeline(update, timeline) {
+    let prevProgress;
+    const onFrame = () => {
+        const { currentTime } = timeline;
+        const percentage = currentTime === null ? 0 : currentTime.value;
+        const progress = percentage / 100;
+        if (prevProgress !== progress) {
+            update(progress);
+        }
+        prevProgress = progress;
+    };
+    frame.update(onFrame, true);
+    return () => cancelFrame(onFrame);
+}
+
+const supportsScrollTimeline = memo(() => window.ScrollTimeline !== undefined);
+
 class GroupPlaybackControls {
     constructor(animations) {
         this.animations = animations.filter(Boolean);
@@ -3436,11 +3451,25 @@ class GroupPlaybackControls {
             this.animations[i][propName] = newValue;
         }
     }
-    get timeline() {
-        return this.getAll("timeline");
-    }
-    set timeline(timeline) {
-        this.setAll("timeline", timeline);
+    attachTimeline(timeline) {
+        const cancelAll = this.animations.map((animation) => {
+            if (supportsScrollTimeline() && animation.attachTimeline) {
+                animation.attachTimeline(timeline);
+            }
+            else {
+                animation.pause();
+                return observeTimeline((progress) => {
+                    animation.time = animation.duration * progress;
+                }, timeline);
+            }
+        });
+        return () => {
+            cancelAll.forEach((cancelTimeline, i) => {
+                if (cancelTimeline)
+                    cancelTimeline();
+                this.animations[i].stop();
+            });
+        };
     }
     get time() {
         return this.getAll("time");
@@ -3842,7 +3871,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "10.13.2-alpha.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.13.2-alpha.3 may not work as expected.`);
+                warnOnce(nextValue.version === "10.14.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.14.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -5310,7 +5339,6 @@ function scrollInfo(onScroll, { container = document.documentElement, ...options
     };
 }
 
-const supportsScrollTimeline = memo(() => window.ScrollTimeline !== undefined);
 function scrollTimelineFallback({ source, axis = "y" }) {
     // ScrollTimeline records progress as a percentage CSSUnitValue
     const currentTime = { value: 0 };
@@ -5334,22 +5362,12 @@ function getTimeline({ source = document.documentElement, axis = "y", } = {}) {
 }
 function scroll(onScroll, options) {
     const timeline = getTimeline(options);
-    let prevProgress;
-    const onFrame = () => {
-        const { currentTime } = timeline;
-        const percentage = currentTime === null ? 0 : currentTime.value;
-        const progress = percentage / 100;
-        if (prevProgress !== progress) {
-            onScroll(progress);
-        }
-        prevProgress = progress;
-    };
-    frame.update(onFrame, true);
-    return () => {
-        cancelFrame(onFrame);
-        if (timeline.cancel)
-            timeline.cancel();
-    };
+    if (typeof onScroll === "function") {
+        return observeTimeline(onScroll, timeline);
+    }
+    else {
+        return onScroll.attachTimeline(timeline);
+    }
 }
 
 const thresholds = {

package/dist/cjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var indexLegacy = require('./index-legacy-f5238c85.js');
+var indexLegacy = require('./index-legacy-767d8769.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -5874,7 +5874,12 @@ const appearStoreId = (id, value) => `${id}: ${value}`;
 
 const appearAnimationStore = new Map();
 
-function handoffOptimizedAppearAnimation(id, name, _value, 
+function handoffOptimizedAppearAnimation(id, name, 
+/**
+ * Legacy argument. This function is inlined apart from framer-motion so
+ * will co-ordinate with Shuang with how best to remove this.
+ */
+_value, 
 /**
  * This function is loaded via window by startOptimisedAnimation.
  * By accepting `sync` as an argument, rather than using it via
@@ -5885,7 +5890,6 @@ function handoffOptimizedAppearAnimation(id, name, _value,
 frame) {
     const storeId = appearStoreId(id, indexLegacy.transformProps.has(name) ? "transform" : name);
     const appearAnimation = appearAnimationStore.get(storeId);
-    console.log("appear animation", storeId, appearAnimation);
     if (!appearAnimation)
         return 0;
     const { animation, startTime } = appearAnimation;
@@ -5896,38 +5900,10 @@ frame) {
          */
         try {
             animation.cancel();
-            console.log("cancelled at", performance.now());
         }
         catch (e) { }
     };
     if (startTime !== null) {
-        const sampledTime = performance.now();
-        console.log({ sampledTime });
-        /**
-         * Resync handoff animation with optimised animation.
-         *
-         * This step would be unnecessary if we triggered animateChanges() in useEffect,
-         * but due to potential hydration errors we currently fire them in useLayoutEffect.
-         *
-         * By the time we're safely ready to cancel the optimised WAAPI animation,
-         * the main thread might have been blocked and desynced the two animations.
-         *
-         * Here, we resync the two animations before the optimised WAAPI animation is cancelled.
-         */
-        // frame.preRender(() => {
-        //     if (value.animation) {
-        //         console.log("initial time", value.animation.time)
-        //         value.animation.time = millisecondsToSeconds(
-        //             performance.now() - sampledTime
-        //         )
-        //         console.log(
-        //             "value animation time",
-        //             value.animation.time,
-        //             performance.now(),
-        //             frameData.timestamp
-        //         )
-        //     }
-        // })
         /**
          * We allow the animation to persist until the next frame:
          *   1. So it continues to play until Framer Motion is ready to render
@@ -5942,8 +5918,7 @@ frame) {
          * an updated value for several frames, even as the animation plays smoothly via
          * the GPU.
          */
-        console.log("start animation at", sampledTime - startTime || 0);
-        return sampledTime - startTime || 0;
+        return performance.now() - startTime || 0;
     }
     else {
         cancelOptimisedAnimation();

package/dist/dom-entry.d.ts

@@ -309,6 +309,13 @@ interface SVGAttributes {
     zoomAndPan?: string | undefined;
 }
 
+interface ProgressTimeline {
+    currentTime: null | {
+        value: number;
+    };
+    cancel?: VoidFunction;
+}
+
 interface AnimationPlaybackLifecycles<V> {
     onUpdate?: (latest: V) => void;
     onPlay?: () => void;
@@ -360,7 +367,7 @@ interface AnimationPlaybackControls {
     complete: () => void;
     cancel: () => void;
     then: (onResolve: VoidFunction, onReject?: VoidFunction) => Promise<void>;
-    timeline?: AnimationTimeline | null;
+    attachTimeline?: (timeline: ProgressTimeline) => VoidFunction;
 }
 declare type DynamicOption<T> = (i: number, total: number) => T;
 interface CSSStyleDeclarationWithTransform extends Omit<CSSStyleDeclaration, "direction" | "transition"> {
@@ -674,7 +681,30 @@ interface ScrollInfoOptions {
     smooth?: number;
 }
 
-declare class ScrollTimeline {
+declare class GroupPlaybackControls implements AnimationPlaybackControls {
+    animations: AnimationPlaybackControls[];
+    constructor(animations: Array<AnimationPlaybackControls | undefined>);
+    then(onResolve: VoidFunction, onReject?: VoidFunction): Promise<void>;
+    /**
+     * TODO: Filter out cancelled or stopped animations before returning
+     */
+    private getAll;
+    private setAll;
+    attachTimeline(timeline: any): () => void;
+    get time(): number;
+    set time(time: number);
+    get speed(): number;
+    set speed(speed: number);
+    get duration(): number;
+    private runAll;
+    play(): void;
+    pause(): void;
+    stop(): void;
+    cancel(): void;
+    complete(): void;
+}
+
+declare class ScrollTimeline implements ProgressTimeline {
     constructor(options: ScrollOptions);
     currentTime: null | {
         value: number;
@@ -686,7 +716,7 @@ declare global {
         ScrollTimeline: ScrollTimeline;
     }
 }
-declare function scroll(onScroll: OnScroll, options?: ScrollOptions): () => void;
+declare function scroll(onScroll: OnScroll | GroupPlaybackControls, options?: ScrollOptions): VoidFunction;
 
 declare function scrollInfo(onScroll: OnScrollInfo, { container, ...options }?: ScrollInfoOptions): () => void;
 

package/dist/es/animation/GroupPlaybackControls.mjs

@@ -1,3 +1,6 @@
+import { observeTimeline } from '../render/dom/scroll/observe.mjs';
+import { supportsScrollTimeline } from '../render/dom/scroll/supports.mjs';
+
 class GroupPlaybackControls {
     constructor(animations) {
         this.animations = animations.filter(Boolean);
@@ -16,11 +19,25 @@ class GroupPlaybackControls {
             this.animations[i][propName] = newValue;
         }
     }
-    get timeline() {
-        return this.getAll("timeline");
-    }
-    set timeline(timeline) {
-        this.setAll("timeline", timeline);
+    attachTimeline(timeline) {
+        const cancelAll = this.animations.map((animation) => {
+            if (supportsScrollTimeline() && animation.attachTimeline) {
+                animation.attachTimeline(timeline);
+            }
+            else {
+                animation.pause();
+                return observeTimeline((progress) => {
+                    animation.time = animation.duration * progress;
+                }, timeline);
+            }
+        });
+        return () => {
+            cancelAll.forEach((cancelTimeline, i) => {
+                if (cancelTimeline)
+                    cancelTimeline();
+                this.animations[i].stop();
+            });
+        };
     }
     get time() {
         return this.getAll("time");

package/dist/es/animation/animators/js/index.mjs

@@ -192,7 +192,6 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
         return state;
     };
     const stopAnimationDriver = () => {
-        console.log("stopping animation");
         animationDriver && animationDriver.stop();
         animationDriver = undefined;
     };

package/dist/es/animation/animators/waapi/create-accelerated-animation.mjs

@@ -4,7 +4,8 @@ import { getFinalKeyframe } from './utils/get-final-keyframe.mjs';
 import { animateValue } from '../js/index.mjs';
 import { millisecondsToSeconds, secondsToMilliseconds } from '../../../utils/time-conversion.mjs';
 import { memo } from '../../../utils/memo.mjs';
-import { cancelFrame, frame } from '../../../frameloop/frame.mjs';
+import { noop } from '../../../utils/noop.mjs';
+import { frame, cancelFrame } from '../../../frameloop/frame.mjs';
 
 const supportsWaapi = memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
 /**
@@ -120,16 +121,14 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
     /**
      * Animation interrupt callback.
      */
-    return {
+    const controls = {
         then(resolve, reject) {
             return currentFinishedPromise.then(resolve, reject);
         },
-        get timeline() {
-            return animation.timeline;
-        },
-        set timeline(timeline) {
+        attachTimeline(timeline) {
             animation.timeline = timeline;
             animation.onfinish = null;
+            return noop;
         },
         get time() {
             return millisecondsToSeconds(animation.currentTime || 0);
@@ -181,6 +180,7 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
         complete: () => animation.finish(),
         cancel: safeCancel,
     };
+    return controls;
 }
 
 export { createAcceleratedAnimation };

package/dist/es/animation/optimized-appear/handoff.mjs

@@ -2,7 +2,12 @@ import { transformProps } from '../../render/html/utils/transform.mjs';
 import { appearAnimationStore } from './store.mjs';
 import { appearStoreId } from './store-id.mjs';
 
-function handoffOptimizedAppearAnimation(id, name, _value, 
+function handoffOptimizedAppearAnimation(id, name, 
+/**
+ * Legacy argument. This function is inlined apart from framer-motion so
+ * will co-ordinate with Shuang with how best to remove this.
+ */
+_value, 
 /**
  * This function is loaded via window by startOptimisedAnimation.
  * By accepting `sync` as an argument, rather than using it via
@@ -13,7 +18,6 @@ function handoffOptimizedAppearAnimation(id, name, _value,
 frame) {
     const storeId = appearStoreId(id, transformProps.has(name) ? "transform" : name);
     const appearAnimation = appearAnimationStore.get(storeId);
-    console.log("appear animation", storeId, appearAnimation);
     if (!appearAnimation)
         return 0;
     const { animation, startTime } = appearAnimation;
@@ -24,38 +28,10 @@ frame) {
          */
         try {
             animation.cancel();
-            console.log("cancelled at", performance.now());
         }
         catch (e) { }
     };
     if (startTime !== null) {
-        const sampledTime = performance.now();
-        console.log({ sampledTime });
-        /**
-         * Resync handoff animation with optimised animation.
-         *
-         * This step would be unnecessary if we triggered animateChanges() in useEffect,
-         * but due to potential hydration errors we currently fire them in useLayoutEffect.
-         *
-         * By the time we're safely ready to cancel the optimised WAAPI animation,
-         * the main thread might have been blocked and desynced the two animations.
-         *
-         * Here, we resync the two animations before the optimised WAAPI animation is cancelled.
-         */
-        // frame.preRender(() => {
-        //     if (value.animation) {
-        //         console.log("initial time", value.animation.time)
-        //         value.animation.time = millisecondsToSeconds(
-        //             performance.now() - sampledTime
-        //         )
-        //         console.log(
-        //             "value animation time",
-        //             value.animation.time,
-        //             performance.now(),
-        //             frameData.timestamp
-        //         )
-        //     }
-        // })
         /**
          * We allow the animation to persist until the next frame:
          *   1. So it continues to play until Framer Motion is ready to render
@@ -70,8 +46,7 @@ frame) {
          * an updated value for several frames, even as the animation plays smoothly via
          * the GPU.
          */
-        console.log("start animation at", sampledTime - startTime || 0);
-        return sampledTime - startTime || 0;
+        return performance.now() - startTime || 0;
     }
     else {
         cancelOptimisedAnimation();

package/dist/es/index.mjs

@@ -71,6 +71,7 @@ export { mix } from './utils/mix.mjs';
 export { pipe } from './utils/pipe.mjs';
 export { progress } from './utils/progress.mjs';
 export { wrap } from './utils/wrap.mjs';
+export { cancelSync, sync } from './frameloop/index-legacy.mjs';
 export { anticipate } from './easing/anticipate.mjs';
 export { backIn, backInOut, backOut } from './easing/back.mjs';
 export { circIn, circInOut, circOut } from './easing/circ.mjs';
@@ -83,7 +84,6 @@ export { distance, distance2D } from './utils/distance.mjs';
 export { invariant, warning } from './utils/errors.mjs';
 export { interpolate } from './utils/interpolate.mjs';
 export { cancelFrame, frame, frameData, steps } from './frameloop/frame.mjs';
-export { cancelSync, sync } from './frameloop/index-legacy.mjs';
 export { animations } from './motion/features/animations.mjs';
 export { checkTargetForNewValues } from './render/utils/setters.mjs';
 export { createBox } from './projection/geometry/models.mjs';

package/dist/es/render/dom/scroll/index.mjs

@@ -1,8 +1,7 @@
-import { memo } from '../../../utils/memo.mjs';
 import { scrollInfo } from './track.mjs';
-import { frame, cancelFrame } from '../../../frameloop/frame.mjs';
+import { observeTimeline } from './observe.mjs';
+import { supportsScrollTimeline } from './supports.mjs';
 
-const supportsScrollTimeline = memo(() => window.ScrollTimeline !== undefined);
 function scrollTimelineFallback({ source, axis = "y" }) {
     // ScrollTimeline records progress as a percentage CSSUnitValue
     const currentTime = { value: 0 };
@@ -26,22 +25,12 @@ function getTimeline({ source = document.documentElement, axis = "y", } = {}) {
 }
 function scroll(onScroll, options) {
     const timeline = getTimeline(options);
-    let prevProgress;
-    const onFrame = () => {
-        const { currentTime } = timeline;
-        const percentage = currentTime === null ? 0 : currentTime.value;
-        const progress = percentage / 100;
-        if (prevProgress !== progress) {
-            onScroll(progress);
-        }
-        prevProgress = progress;
-    };
-    frame.update(onFrame, true);
-    return () => {
-        cancelFrame(onFrame);
-        if (timeline.cancel)
-            timeline.cancel();
-    };
+    if (typeof onScroll === "function") {
+        return observeTimeline(onScroll, timeline);
+    }
+    else {
+        return onScroll.attachTimeline(timeline);
+    }
 }
 
 export { scroll };

package/dist/es/render/dom/scroll/observe.mjs

@@ -0,0 +1,18 @@
+import { frame, cancelFrame } from '../../../frameloop/frame.mjs';
+
+function observeTimeline(update, timeline) {
+    let prevProgress;
+    const onFrame = () => {
+        const { currentTime } = timeline;
+        const percentage = currentTime === null ? 0 : currentTime.value;
+        const progress = percentage / 100;
+        if (prevProgress !== progress) {
+            update(progress);
+        }
+        prevProgress = progress;
+    };
+    frame.update(onFrame, true);
+    return () => cancelFrame(onFrame);
+}
+
+export { observeTimeline };

package/dist/es/render/dom/scroll/supports.mjs

@@ -0,0 +1,5 @@
+import { memo } from '../../../utils/memo.mjs';
+
+const supportsScrollTimeline = memo(() => window.ScrollTimeline !== undefined);
+
+export { supportsScrollTimeline };

package/dist/es/render/utils/motion-values.mjs

@@ -22,7 +22,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "10.13.2-alpha.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.13.2-alpha.3 may not work as expected.`);
+                warnOnce(nextValue.version === "10.14.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.14.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/value/index.mjs

@@ -25,7 +25,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 = "10.13.2-alpha.3";
+        this.version = "10.14.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *