motion 12.0.0-alpha.2 → 12.0.0

package/dist/cjs/react-mini.js

@@ -23,6 +23,19 @@ function useUnmountEffect(callback) {
     return react.useEffect(() => () => callback(), []);
 }
 
+/*#__NO_SIDE_EFFECTS__*/
+const noop = (any) => any;
+
+let invariant = noop;
+if (process.env.NODE_ENV !== "production") {
+    invariant = (check, message) => {
+        if (!check) {
+            throw new Error(message);
+        }
+    };
+}
+
+/*#__NO_SIDE_EFFECTS__*/
 function memo(callback) {
     let result;
     return () => {
@@ -32,16 +45,46 @@ 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
+*/
+/*#__NO_SIDE_EFFECTS__*/
+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.
+ */
+/*#__NO_SIDE_EFFECTS__*/
+const secondsToMilliseconds = (seconds) => seconds * 1000;
+/*#__NO_SIDE_EFFECTS__*/
+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
@@ -59,7 +102,7 @@ class GroupPlaybackControls {
             if (supportsScrollTimeline() && animation.attachTimeline) {
                 return animation.attachTimeline(timeline);
             }
-            else {
+            else if (typeof fallback === "function") {
                 return fallback(animation);
             }
         });
@@ -112,50 +155,15 @@ class GroupPlaybackControls {
     }
 }
 
-const noop = (any) => any;
-
-let invariant = noop;
-if (process.env.NODE_ENV !== "production") {
-    invariant = (check, message) => {
-        if (!check) {
-            throw new Error(message);
-        }
-    };
-}
-
-function resolveElements(elements, scope, selectorCache) {
-    var _a;
-    if (typeof elements === "string") {
-        let root = document;
-        if (scope) {
-            invariant(Boolean(scope.current), "Scope provided, but no element detected.");
-            root = scope.current;
-        }
-        if (selectorCache) {
-            (_a = selectorCache[elements]) !== null && _a !== void 0 ? _a : (selectorCache[elements] = root.querySelectorAll(elements));
-            elements = selectorCache[elements];
-        }
-        else {
-            elements = root.querySelectorAll(elements);
-        }
-    }
-    else if (elements instanceof Element) {
-        elements = [elements];
-    }
-    /**
-     * Return an empty array
-     */
-    return Array.from(elements || []);
-}
-
 /**
- * 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
@@ -165,36 +173,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;
+}
 
-// Create a linear easing point for every 10 ms
-const resolution = 10;
-const generateLinearEasing = (easing, duration // 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
@@ -221,6 +319,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",
@@ -252,6 +361,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)
@@ -272,35 +402,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,
@@ -346,15 +447,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);
@@ -406,12 +498,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();
@@ -424,6 +513,7 @@ class NativeAnimation {
             valueKeyframes = [valueKeyframes];
         }
         hydrateKeyframes(valueName, valueKeyframes, readInitialKeyframe);
+        // TODO: Replace this with toString()?
         if (isGenerator(options.type)) {
             const generatorOptions = createGeneratorEasing(options, 100, options.type);
             options.ease = supportsLinearEasing()
@@ -435,92 +525,35 @@ 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 = () => {
+                const elementState = state.get(element);
+                elementState && elementState.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
@@ -534,14 +567,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,9 +1,10 @@
-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';
 
 function isSequence(value) {
-    return Array.isArray(value) && Array.isArray(value[0]);
+    return Array.isArray(value) && value.some(Array.isArray);
 }
 /**
  * Creates an animation function that is optionally scoped

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

@@ -1,4 +1,5 @@
-import { resolveElements } from '../../render/dom/utils/resolve-element.mjs';
+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';
 
 function resolveSubjects(subject, keyframes, scope, selectorCache) {

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/animate/subject.mjs

@@ -1,5 +1,5 @@
+import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
 import { visualElementStore } from '../../render/store.mjs';
-import { invariant } from '../../utils/errors.mjs';
 import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
 import { animateTarget } from '../interfaces/visual-element-target.mjs';
 import { createDOMVisualElement, createObjectVisualElement } from '../utils/create-visual-element.mjs';

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

@@ -1,18 +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 { noop } from '../../utils/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';
 
 /**
@@ -84,13 +85,12 @@ class AcceleratedAnimation extends BaseAnimation {
         this.resolver.scheduleResolve();
     }
     initPlayback(keyframes, finalKeyframe) {
-        var _a;
         let { duration = 300, times, ease, type, motionValue, name, startTime, } = this.options;
         /**
          * If element has since been unmounted, return false to indicate
          * the animation failed to initialised.
          */
-        if (!((_a = motionValue.owner) === null || _a === void 0 ? void 0 : _a.current)) {
+        if (!motionValue.owner || !motionValue.owner.current) {
             return false;
         }
         /**
@@ -297,17 +297,21 @@ class AcceleratedAnimation extends BaseAnimation {
     }
     static supports(options) {
         const { motionValue, name, repeatDelay, repeatType, damping, type } = options;
+        if (!motionValue ||
+            !motionValue.owner ||
+            !(motionValue.owner.current instanceof HTMLElement)) {
+            return false;
+        }
+        const { onUpdate, transformTemplate } = motionValue.owner.getProps();
         return (supportsWaapi() &&
             name &&
             acceleratedValues.has(name) &&
-            motionValue &&
-            motionValue.owner &&
-            motionValue.owner.current instanceof HTMLElement &&
             /**
              * If we're outputting values to onUpdate then we can't use WAAPI as there's
              * no way to read the value from WAAPI every frame.
              */
-            !motionValue.owner.getProps().onUpdate &&
+            !onUpdate &&
+            !transformTemplate &&
             !repeatDelay &&
             repeatType !== "mirror" &&
             damping !== 0 &&

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

@@ -74,8 +74,9 @@ class BaseAnimation {
         if (!isGenerator && !canAnimate(keyframes, name, type, velocity)) {
             // Finish immediately
             if (instantAnimationState.current || !delay) {
-                onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(getFinalKeyframe(keyframes, this.options, finalKeyframe));
-                onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+                onUpdate &&
+                    onUpdate(getFinalKeyframe(keyframes, this.options, finalKeyframe));
+                onComplete && onComplete();
                 this.resolveFinishedPromise();
                 return;
             }