motion 11.15.0 → 11.16.0

package/dist/cjs/react-mini.js

@@ -23,6 +23,17 @@ function useUnmountEffect(callback) {
     return react.useEffect(() => () => callback(), []);
 }
 
+const noop = (any) => any;
+
+let invariant = noop;
+if (process.env.NODE_ENV !== "production") {
+    invariant = (check, message) => {
+        if (!check) {
+            throw new Error(message);
+        }
+    };
+}
+
 function memo(callback) {
     let result;
     return () => {
@@ -32,16 +43,43 @@ function memo(callback) {
     };
 }
 
+/*
+  Progress within given range
+
+  Given a lower limit and an upper limit, we return the progress
+  (expressed as a number 0-1) represented by the given value, and
+  limit that progress to within 0-1.
+
+  @param [number]: Lower limit
+  @param [number]: Upper limit
+  @param [number]: Value to find progress within given range
+  @return [number]: Progress of value within range as expressed 0-1
+*/
+const progress = (from, to, value) => {
+    const toFromDifference = to - from;
+    return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
+};
+
+/**
+ * Converts seconds to milliseconds
+ *
+ * @param seconds - Time in seconds.
+ * @return milliseconds - Converted time in milliseconds.
+ */
+const secondsToMilliseconds = (seconds) => seconds * 1000;
+const millisecondsToSeconds = (milliseconds) => milliseconds / 1000;
+
 const supportsScrollTimeline = memo(() => window.ScrollTimeline !== undefined);
 
-class GroupPlaybackControls {
+class BaseGroupPlaybackControls {
     constructor(animations) {
         // Bound to accomodate common `return animation.stop` pattern
         this.stop = () => this.runAll("stop");
         this.animations = animations.filter(Boolean);
     }
-    then(onResolve, onReject) {
-        return Promise.all(this.animations).then(onResolve).catch(onReject);
+    get finished() {
+        // Support for new finished Promise and legacy thennable API
+        return Promise.all(this.animations.map((animation) => "finished" in animation ? animation.finished : animation));
     }
     /**
      * TODO: Filter out cancelled or stopped animations before returning
@@ -112,46 +150,15 @@ class GroupPlaybackControls {
     }
 }
 
-function resolveElements(elementOrSelector, scope, selectorCache) {
-    var _a;
-    if (elementOrSelector instanceof Element) {
-        return [elementOrSelector];
-    }
-    else if (typeof elementOrSelector === "string") {
-        let root = document;
-        if (scope) {
-            // TODO: Refactor to utils package
-            // invariant(
-            //     Boolean(scope.current),
-            //     "Scope provided, but no element detected."
-            // )
-            root = scope.current;
-        }
-        const elements = (_a = selectorCache === null || selectorCache === void 0 ? void 0 : selectorCache[elementOrSelector]) !== null && _a !== void 0 ? _a : root.querySelectorAll(elementOrSelector);
-        return elements ? Array.from(elements) : [];
-    }
-    return Array.from(elementOrSelector);
-}
-
-const noop = (any) => any;
-
-let invariant = noop;
-if (process.env.NODE_ENV !== "production") {
-    invariant = (check, message) => {
-        if (!check) {
-            throw new Error(message);
-        }
-    };
-}
-
 /**
- * Converts seconds to milliseconds
- *
- * @param seconds - Time in seconds.
- * @return milliseconds - Converted time in milliseconds.
+ * TODO: This is a temporary class to support the legacy
+ * thennable API
  */
-const secondsToMilliseconds = (seconds) => seconds * 1000;
-const millisecondsToSeconds = (milliseconds) => milliseconds / 1000;
+class GroupPlaybackControls extends BaseGroupPlaybackControls {
+    then(onResolve, onReject) {
+        return Promise.all(this.animations).then(onResolve).catch(onReject);
+    }
+}
 
 function getValueTransition(transition, key) {
     return transition
@@ -161,35 +168,126 @@ function getValueTransition(transition, key) {
         : undefined;
 }
 
-const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
+/**
+ * Implement a practical max duration for keyframe generation
+ * to prevent infinite loops
+ */
+const maxGeneratorDuration = 20000;
+function calcGeneratorDuration(generator) {
+    let duration = 0;
+    const timeStep = 50;
+    let state = generator.next(duration);
+    while (!state.done && duration < maxGeneratorDuration) {
+        duration += timeStep;
+        state = generator.next(duration);
+    }
+    return duration >= maxGeneratorDuration ? Infinity : duration;
+}
 
-/*
-  Progress within given range
+/**
+ * Create a progress => progress easing function from a generator.
+ */
+function createGeneratorEasing(options, scale = 100, createGenerator) {
+    const generator = createGenerator({ ...options, keyframes: [0, scale] });
+    const duration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
+    return {
+        type: "keyframes",
+        ease: (progress) => {
+            return generator.next(duration * progress).value / scale;
+        },
+        duration: millisecondsToSeconds(duration),
+    };
+}
 
-  Given a lower limit and an upper limit, we return the progress
-  (expressed as a number 0-1) represented by the given value, and
-  limit that progress to within 0-1.
+function isGenerator(type) {
+    return typeof type === "function";
+}
 
-  @param [number]: Lower limit
-  @param [number]: Upper limit
-  @param [number]: Value to find progress within given range
-  @return [number]: Progress of value within range as expressed 0-1
-*/
-const progress = (from, to, value) => {
-    const toFromDifference = to - from;
-    return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
-};
+function attachTimeline(animation, timeline) {
+    animation.timeline = timeline;
+    animation.onfinish = null;
+}
 
-const generateLinearEasing = (easing, duration, // as milliseconds
-resolution = 10 // as milliseconds
-) => {
-    let points = "";
-    const numPoints = Math.max(Math.round(duration / resolution), 2);
-    for (let i = 0; i < numPoints; i++) {
-        points += easing(progress(0, numPoints - 1, i)) + ", ";
+class NativeAnimationControls {
+    constructor(animation) {
+        this.animation = animation;
     }
-    return `linear(${points.substring(0, points.length - 2)})`;
-};
+    get duration() {
+        var _a, _b, _c;
+        const durationInMs = ((_b = (_a = this.animation) === null || _a === void 0 ? void 0 : _a.effect) === null || _b === void 0 ? void 0 : _b.getComputedTiming().duration) ||
+            ((_c = this.options) === null || _c === void 0 ? void 0 : _c.duration) ||
+            300;
+        return millisecondsToSeconds(Number(durationInMs));
+    }
+    get time() {
+        var _a;
+        if (this.animation) {
+            return millisecondsToSeconds(((_a = this.animation) === null || _a === void 0 ? void 0 : _a.currentTime) || 0);
+        }
+        return 0;
+    }
+    set time(newTime) {
+        if (this.animation) {
+            this.animation.currentTime = secondsToMilliseconds(newTime);
+        }
+    }
+    get speed() {
+        return this.animation ? this.animation.playbackRate : 1;
+    }
+    set speed(newSpeed) {
+        if (this.animation) {
+            this.animation.playbackRate = newSpeed;
+        }
+    }
+    get state() {
+        return this.animation ? this.animation.playState : "finished";
+    }
+    get startTime() {
+        return this.animation ? this.animation.startTime : null;
+    }
+    get finished() {
+        return this.animation ? this.animation.finished : Promise.resolve();
+    }
+    play() {
+        this.animation && this.animation.play();
+    }
+    pause() {
+        this.animation && this.animation.pause();
+    }
+    stop() {
+        if (!this.animation ||
+            this.state === "idle" ||
+            this.state === "finished") {
+            return;
+        }
+        if (this.animation.commitStyles) {
+            this.animation.commitStyles();
+        }
+        this.cancel();
+    }
+    flatten() {
+        var _a;
+        if (!this.animation)
+            return;
+        (_a = this.animation.effect) === null || _a === void 0 ? void 0 : _a.updateTiming({ easing: "linear" });
+    }
+    attachTimeline(timeline) {
+        if (this.animation)
+            attachTimeline(this.animation, timeline);
+        return noop;
+    }
+    complete() {
+        this.animation && this.animation.finish();
+    }
+    cancel() {
+        try {
+            this.animation && this.animation.cancel();
+        }
+        catch (e) { }
+    }
+}
+
+const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
 
 /**
  * Add the ability for test suites to manually set support flags
@@ -216,6 +314,17 @@ const supportsLinearEasing = /*@__PURE__*/ memoSupports(() => {
     return true;
 }, "linearEasing");
 
+const generateLinearEasing = (easing, duration, // as milliseconds
+resolution = 10 // as milliseconds
+) => {
+    let points = "";
+    const numPoints = Math.max(Math.round(duration / resolution), 2);
+    for (let i = 0; i < numPoints; i++) {
+        points += easing(progress(0, numPoints - 1, i)) + ", ";
+    }
+    return `linear(${points.substring(0, points.length - 2)})`;
+};
+
 const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
 const supportedWaapiEasing = {
     linear: "linear",
@@ -247,6 +356,27 @@ function mapEasingToNativeEasing(easing, duration) {
     }
 }
 
+function resolveElements(elementOrSelector, scope, selectorCache) {
+    var _a;
+    if (elementOrSelector instanceof Element) {
+        return [elementOrSelector];
+    }
+    else if (typeof elementOrSelector === "string") {
+        let root = document;
+        if (scope) {
+            // TODO: Refactor to utils package
+            // invariant(
+            //     Boolean(scope.current),
+            //     "Scope provided, but no element detected."
+            // )
+            root = scope.current;
+        }
+        const elements = (_a = selectorCache === null || selectorCache === void 0 ? void 0 : selectorCache[elementOrSelector]) !== null && _a !== void 0 ? _a : root.querySelectorAll(elementOrSelector);
+        return elements ? Array.from(elements) : [];
+    }
+    return Array.from(elementOrSelector);
+}
+
 function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = "loop", ease = "easeInOut", times, } = {}) {
     const keyframeOptions = { [valueName]: keyframes };
     if (times)
@@ -267,35 +397,6 @@ function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duratio
     });
 }
 
-/**
- * Implement a practical max duration for keyframe generation
- * to prevent infinite loops
- */
-const maxGeneratorDuration = 20000;
-function calcGeneratorDuration(generator) {
-    let duration = 0;
-    const timeStep = 50;
-    let state = generator.next(duration);
-    while (!state.done && duration < maxGeneratorDuration) {
-        duration += timeStep;
-        state = generator.next(duration);
-    }
-    return duration >= maxGeneratorDuration ? Infinity : duration;
-}
-
-/**
- * Create a progress => progress easing function from a generator.
- */
-function createGeneratorEasing(options, scale = 100, createGenerator) {
-    const generator = createGenerator({ ...options, keyframes: [0, scale] });
-    const duration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
-    return {
-        type: "keyframes",
-        ease: (progress) => generator.next(duration * progress).value / scale,
-        duration: millisecondsToSeconds(duration),
-    };
-}
-
 const createUnitType = (unit) => ({
     test: (v) => typeof v === "string" && v.endsWith(unit) && v.split(" ").length === 1,
     parse: parseFloat,
@@ -341,15 +442,6 @@ const browserNumberValueTypes = {
     backgroundPositionY: px,
 };
 
-function isGenerator(type) {
-    return typeof type === "function";
-}
-
-function attachTimeline(animation, timeline) {
-    animation.timeline = timeline;
-    animation.onfinish = null;
-}
-
 const isNotNull = (value) => value !== null;
 function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe) {
     const resolvedKeyframes = keyframes.filter(isNotNull);
@@ -401,12 +493,9 @@ function getElementAnimationState(element) {
     state.set(element, animationState);
     return state.get(element);
 }
-class NativeAnimation {
+class NativeAnimation extends NativeAnimationControls {
     constructor(element, valueName, valueKeyframes, options) {
         const isCSSVar = valueName.startsWith("--");
-        this.setValue = isCSSVar ? setCSSVar : setStyle;
-        this.options = options;
-        this.updateFinishedPromise();
         invariant(typeof options.type !== "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "framer-motion"?`);
         const existingAnimation = getElementAnimationState(element).get(valueName);
         existingAnimation && existingAnimation.stop();
@@ -431,92 +520,32 @@ class NativeAnimation {
         else {
             options.ease = options.ease || defaultEasing;
         }
-        this.removeAnimation = () => { var _a; return (_a = state.get(element)) === null || _a === void 0 ? void 0 : _a.delete(valueName); };
         const onFinish = () => {
-            this.setValue(element, valueName, getFinalKeyframe(valueKeyframes, this.options));
+            this.setValue(element, valueName, getFinalKeyframe(valueKeyframes, options));
             this.cancel();
             this.resolveFinishedPromise();
         };
+        const init = () => {
+            this.setValue = isCSSVar ? setCSSVar : setStyle;
+            this.options = options;
+            this.updateFinishedPromise();
+            this.removeAnimation = () => { var _a; return (_a = state.get(element)) === null || _a === void 0 ? void 0 : _a.delete(valueName); };
+        };
         if (!supportsWaapi()) {
+            super();
+            init();
             onFinish();
         }
         else {
-            this.animation = startWaapiAnimation(element, valueName, valueKeyframes, options);
+            super(startWaapiAnimation(element, valueName, valueKeyframes, options));
+            init();
             if (options.autoplay === false) {
                 this.animation.pause();
             }
             this.animation.onfinish = onFinish;
-            if (this.pendingTimeline) {
-                attachTimeline(this.animation, this.pendingTimeline);
-            }
             getElementAnimationState(element).set(valueName, this);
         }
     }
-    get duration() {
-        return millisecondsToSeconds(this.options.duration || 300);
-    }
-    get time() {
-        var _a;
-        if (this.animation) {
-            return millisecondsToSeconds(((_a = this.animation) === null || _a === void 0 ? void 0 : _a.currentTime) || 0);
-        }
-        return 0;
-    }
-    set time(newTime) {
-        if (this.animation) {
-            this.animation.currentTime = secondsToMilliseconds(newTime);
-        }
-    }
-    get speed() {
-        return this.animation ? this.animation.playbackRate : 1;
-    }
-    set speed(newSpeed) {
-        if (this.animation) {
-            this.animation.playbackRate = newSpeed;
-        }
-    }
-    get state() {
-        return this.animation ? this.animation.playState : "finished";
-    }
-    get startTime() {
-        return this.animation ? this.animation.startTime : null;
-    }
-    flatten() {
-        var _a;
-        if (!this.animation)
-            return;
-        (_a = this.animation.effect) === null || _a === void 0 ? void 0 : _a.updateTiming({ easing: "linear" });
-    }
-    play() {
-        if (this.state === "finished") {
-            this.updateFinishedPromise();
-        }
-        this.animation && this.animation.play();
-    }
-    pause() {
-        this.animation && this.animation.pause();
-    }
-    stop() {
-        if (!this.animation ||
-            this.state === "idle" ||
-            this.state === "finished") {
-            return;
-        }
-        if (this.animation.commitStyles) {
-            this.animation.commitStyles();
-        }
-        this.cancel();
-    }
-    complete() {
-        this.animation && this.animation.finish();
-    }
-    cancel() {
-        this.removeAnimation();
-        try {
-            this.animation && this.animation.cancel();
-        }
-        catch (e) { }
-    }
     /**
      * Allows the returned animation to be awaited or promise-chained. Currently
      * resolves when the animation finishes at all but in a future update could/should
@@ -530,14 +559,15 @@ class NativeAnimation {
             this.resolveFinishedPromise = resolve;
         });
     }
-    attachTimeline(timeline) {
-        if (!this.animation) {
-            this.pendingTimeline = timeline;
-        }
-        else {
-            attachTimeline(this.animation, timeline);
+    play() {
+        if (this.state === "finished") {
+            this.updateFinishedPromise();
         }
-        return noop;
+        super.play();
+    }
+    cancel() {
+        this.removeAnimation();
+        super.cancel();
     }
 }
 

package/dist/es/framer-motion/dist/es/animation/animate/index.mjs

@@ -1,4 +1,5 @@
-import { GroupPlaybackControls } from '../GroupPlaybackControls.mjs';
+import { GroupPlaybackControls } from '../../../../../motion-dom/dist/es/animation/controls/Group.mjs';
+import '../../../../../motion-utils/dist/es/errors.mjs';
 import { animateSequence } from './sequence.mjs';
 import { animateSubject } from './subject.mjs';
 

package/dist/es/framer-motion/dist/es/animation/animate/resolve-subjects.mjs

@@ -1,3 +1,4 @@
+import '../../../../../motion-utils/dist/es/errors.mjs';
 import { resolveElements } from '../../../../../motion-dom/dist/es/utils/resolve-elements.mjs';
 import { isDOMKeyframes } from '../utils/is-dom-keyframes.mjs';
 

package/dist/es/framer-motion/dist/es/animation/animate/single-value.mjs

@@ -1,6 +1,6 @@
-import { animateMotionValue } from '../interfaces/motion-value.mjs';
 import { motionValue } from '../../value/index.mjs';
 import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
+import { animateMotionValue } from '../interfaces/motion-value.mjs';
 
 function animateSingleValue(value, keyframes, options) {
     const motionValue$1 = isMotionValue(value) ? value : motionValue(value);

package/dist/es/framer-motion/dist/es/animation/animators/AcceleratedAnimation.mjs

@@ -1,19 +1,19 @@
+import '../../../../../motion-utils/dist/es/errors.mjs';
+import { noop } from '../../../../../motion-utils/dist/es/noop.mjs';
+import { millisecondsToSeconds, secondsToMilliseconds } from '../../../../../motion-utils/dist/es/time-conversion.mjs';
+import { isGenerator } from '../../../../../motion-dom/dist/es/animation/generators/utils/is-generator.mjs';
+import { attachTimeline } from '../../../../../motion-dom/dist/es/animation/waapi/utils/attach-timeline.mjs';
+import { isWaapiSupportedEasing } from '../../../../../motion-dom/dist/es/animation/waapi/utils/easing.mjs';
+import { supportsLinearEasing } from '../../../../../motion-dom/dist/es/utils/supports/linear-easing.mjs';
 import { anticipate } from '../../easing/anticipate.mjs';
 import { backInOut } from '../../easing/back.mjs';
 import { circInOut } from '../../easing/circ.mjs';
 import { DOMKeyframesResolver } from '../../render/dom/DOMKeyframesResolver.mjs';
-import '../../../../../motion-utils/dist/es/errors.mjs';
-import { noop } from '../../../../../motion-utils/dist/es/noop.mjs';
-import { millisecondsToSeconds, secondsToMilliseconds } from '../../utils/time-conversion.mjs';
-import { isGenerator } from '../generators/utils/is-generator.mjs';
 import { BaseAnimation } from './BaseAnimation.mjs';
 import { MainThreadAnimation } from './MainThreadAnimation.mjs';
 import { acceleratedValues } from './utils/accelerated-values.mjs';
 import { startWaapiAnimation } from './waapi/index.mjs';
-import { isWaapiSupportedEasing } from './waapi/easing.mjs';
-import { attachTimeline } from './waapi/utils/attach-timeline.mjs';
 import { getFinalKeyframe } from './waapi/utils/get-final-keyframe.mjs';
-import { supportsLinearEasing } from './waapi/utils/supports-linear-easing.mjs';
 import { supportsWaapi } from './waapi/utils/supports-waapi.mjs';
 
 /**

package/dist/es/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs

@@ -1,17 +1,17 @@
+import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
+import { millisecondsToSeconds, secondsToMilliseconds } from '../../../../../motion-utils/dist/es/time-conversion.mjs';
+import { calcGeneratorDuration } from '../../../../../motion-dom/dist/es/animation/generators/utils/calc-duration.mjs';
+import { isGenerator } from '../../../../../motion-dom/dist/es/animation/generators/utils/is-generator.mjs';
 import { KeyframeResolver } from '../../render/utils/KeyframesResolver.mjs';
-import { spring } from '../generators/spring/index.mjs';
+import { clamp } from '../../utils/clamp.mjs';
+import { mix } from '../../utils/mix/index.mjs';
+import { pipe } from '../../utils/pipe.mjs';
 import { inertia } from '../generators/inertia.mjs';
 import { keyframes } from '../generators/keyframes.mjs';
+import { spring } from '../generators/spring/index.mjs';
 import { BaseAnimation } from './BaseAnimation.mjs';
-import { pipe } from '../../utils/pipe.mjs';
-import { mix } from '../../utils/mix/index.mjs';
-import { calcGeneratorDuration } from '../generators/utils/calc-duration.mjs';
-import { millisecondsToSeconds, secondsToMilliseconds } from '../../utils/time-conversion.mjs';
-import { clamp } from '../../utils/clamp.mjs';
-import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
 import { frameloopDriver } from './drivers/driver-frameloop.mjs';
 import { getFinalKeyframe } from './waapi/utils/get-final-keyframe.mjs';
-import { isGenerator } from '../generators/utils/is-generator.mjs';
 
 const generators = {
     decay: inertia,

package/dist/es/framer-motion/dist/es/animation/animators/utils/can-animate.mjs

@@ -1,5 +1,5 @@
 import { warning } from '../../../../../../motion-utils/dist/es/errors.mjs';
-import { isGenerator } from '../../generators/utils/is-generator.mjs';
+import { isGenerator } from '../../../../../../motion-dom/dist/es/animation/generators/utils/is-generator.mjs';
 import { isAnimatable } from '../../utils/is-animatable.mjs';
 
 function hasKeyframesChanged(keyframes) {