motion - npm Package Compare versions

Comparing version 11.15.0 to 11.16.0

dist/cjs/mini.js

@@ -5,2 +5,13 @@ 'use strict';
 
+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) {
@@ -15,5 +26,31 @@ let result;
 
+/*
+  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) {
@@ -24,4 +61,5 @@ // Bound to accomodate common `return animation.stop` pattern
     }
-    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));
     }
@@ -97,43 +135,12 @@ /**
 
-function resolveElements(elementOrSelector, scope, selectorCache) {
-    var _a;
-    if (elementOrSelector instanceof Element) {
-        return [elementOrSelector];
+/**
+ * TODO: This is a temporary class to support the legacy
+ * thennable API
+ */
+class GroupPlaybackControls extends BaseGroupPlaybackControls {
+    then(onResolve, onReject) {
+        return Promise.all(this.animations).then(onResolve).catch(onReject);
     }
-    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.
- */
-const secondsToMilliseconds = (seconds) => seconds * 1000;
-const millisecondsToSeconds = (milliseconds) => milliseconds / 1000;
-
 function getValueTransition(transition, key) {
@@ -147,32 +154,123 @@ return transition
 
-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";
+
 /**
@@ -203,2 +301,13 @@ * Add the ability for test suites to manually set support flags
 
+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})`;
@@ -235,2 +344,23 @@ const supportedWaapiEasing = {
 
+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, } = {}) {
@@ -256,31 +386,2 @@ const keyframeOptions = { [valueName]: keyframes };
 
-/**
- * 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) => ({
@@ -331,11 +432,2 @@ test: (v) => typeof v === "string" && v.endsWith(unit) && v.split(" ").length === 1,
 
-function isGenerator(type) {
-    return typeof type === "function";
-}
-
-function attachTimeline(animation, timeline) {
-    animation.timeline = timeline;
-    animation.onfinish = null;
-}
-
 const isNotNull = (value) => value !== null;
@@ -392,8 +484,5 @@ function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe) {
 }
-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"?`);
@@ -423,13 +512,21 @@ const existingAnimation = getElementAnimationState(element).get(valueName);
         }
-        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) {
@@ -439,73 +536,5 @@ 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) { }
-    }
     /**
@@ -524,11 +553,12 @@ * Allows the returned animation to be awaited or promise-chained. Currently
     }
-    attachTimeline(timeline) {
-        if (!this.animation) {
-            this.pendingTimeline = timeline;
+    play() {
+        if (this.state === "finished") {
+            this.updateFinishedPromise();
         }
-        else {
-            attachTimeline(this.animation, timeline);
-        }
-        return noop;
+        super.play();
     }
+    cancel() {
+        this.removeAnimation();
+        super.cancel();
+    }
 }
@@ -535,0 +565,0 @@

dist/cjs/react-mini.js

@@ -26,2 +26,13 @@ 'use strict';
 
+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) {
@@ -36,5 +47,31 @@ let result;
 
+/*
+  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) {
@@ -45,4 +82,5 @@ // Bound to accomodate common `return animation.stop` pattern
     }
-    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));
     }
@@ -118,43 +156,12 @@ /**
 
-function resolveElements(elementOrSelector, scope, selectorCache) {
-    var _a;
-    if (elementOrSelector instanceof Element) {
-        return [elementOrSelector];
+/**
+ * TODO: This is a temporary class to support the legacy
+ * thennable API
+ */
+class GroupPlaybackControls extends BaseGroupPlaybackControls {
+    then(onResolve, onReject) {
+        return Promise.all(this.animations).then(onResolve).catch(onReject);
     }
-    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.
- */
-const secondsToMilliseconds = (seconds) => seconds * 1000;
-const millisecondsToSeconds = (milliseconds) => milliseconds / 1000;
-
 function getValueTransition(transition, key) {
@@ -168,32 +175,123 @@ return transition
 
-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";
+
 /**
@@ -224,2 +322,13 @@ * Add the ability for test suites to manually set support flags
 
+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})`;
@@ -256,2 +365,23 @@ const supportedWaapiEasing = {
 
+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, } = {}) {
@@ -277,31 +407,2 @@ const keyframeOptions = { [valueName]: keyframes };
 
-/**
- * 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) => ({
@@ -352,11 +453,2 @@ test: (v) => typeof v === "string" && v.endsWith(unit) && v.split(" ").length === 1,
 
-function isGenerator(type) {
-    return typeof type === "function";
-}
-
-function attachTimeline(animation, timeline) {
-    animation.timeline = timeline;
-    animation.onfinish = null;
-}
-
 const isNotNull = (value) => value !== null;
@@ -413,8 +505,5 @@ function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe) {
 }
-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"?`);
@@ -444,13 +533,21 @@ const existingAnimation = getElementAnimationState(element).get(valueName);
         }
-        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) {
@@ -460,73 +557,5 @@ 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) { }
-    }
     /**
@@ -545,11 +574,12 @@ * Allows the returned animation to be awaited or promise-chained. Currently
     }
-    attachTimeline(timeline) {
-        if (!this.animation) {
-            this.pendingTimeline = timeline;
+    play() {
+        if (this.state === "finished") {
+            this.updateFinishedPromise();
         }
-        else {
-            attachTimeline(this.animation, timeline);
-        }
-        return noop;
+        super.play();
     }
+    cancel() {
+        this.removeAnimation();
+        super.cancel();
+    }
 }
@@ -556,0 +586,0 @@

package.json

 {
     "name": "motion",
-    "version": "11.15.0",
+    "version": "11.16.0",
     "description": "An animation library for JavaScript and React.",
@@ -73,3 +73,3 @@ "main": "dist/cjs/index.js",
     "dependencies": {
-        "framer-motion": "^11.15.0",
+        "framer-motion": "^11.16.0",
         "tslib": "^2.4.0"
@@ -93,3 +93,3 @@ },
     },
-    "gitHead": "6ddb3e79685653f18a863f64f76c3fb5fade1903"
+    "gitHead": "0d6f15819d66d9e76f3b32bc79ceb001079da43e"
 }

README.md

@@ -95,28 +95,12 @@ <p align="center">
 
-<a href="https://tailwindcss.com"><img alt="Tailwind" src="https://github.com/user-attachments/assets/c0496f09-b8ee-4bc4-85ab-83a071bbbdec" width="300px" height="200px"></a>
+<a href="https://syntax.fm"><img alt="Syntax.fm" src="https://github.com/user-attachments/assets/ab852bfe-b36c-490b-b98d-4061158c4863" width="300px" height="200px"></a> <a href="https://tailwindcss.com"><img alt="Tailwind" src="https://github.com/user-attachments/assets/c0496f09-b8ee-4bc4-85ab-83a071bbbdec" width="300px" height="200px"></a> <a href="https://emilkowal.ski"><img alt="Emil Kowalski" src="https://github.com/user-attachments/assets/29f56b1a-37fb-4695-a6a6-151f6c24864f" width="300px" height="200px"></a> <a href="https://linear.app"><img alt="Linear" src="https://github.com/user-attachments/assets/a93710bb-d8ed-40e3-b0fb-1c5b3e2b16bb" width="300px" height="200px"></a>
 
-<a href="https://emilkowal.ski"><img alt="Emil Kowalski" src="https://github.com/user-attachments/assets/29f56b1a-37fb-4695-a6a6-151f6c24864f" width="300px" height="200px"></a>
-
-<a href="https://linear.app"><img alt="Linear" src="https://github.com/user-attachments/assets/a93710bb-d8ed-40e3-b0fb-1c5b3e2b16bb" width="300px" height="200px"></a>
-
 ### Gold
 
-<a href="https://liveblocks.io"><img alt="Liveblocks" src="https://github.com/user-attachments/assets/31436a47-951e-4eab-9a68-bdd54ccf9444" width="225px" height="150px"></a>
+<a href="https://vercel.com"><img alt="Vercel" src="https://github.com/user-attachments/assets/23cb1e37-fa67-49ad-8f77-7f4b8eaba325" width="225px" height="150px"></a> <a href="https://liveblocks.io"><img alt="Liveblocks" src="https://github.com/user-attachments/assets/31436a47-951e-4eab-9a68-bdd54ccf9444" width="225px" height="150px"></a> <a href="https://lu.ma"><img alt="Luma" src="https://github.com/user-attachments/assets/4fae0c9d-de0f-4042-9cd6-e07885d028a9" width="225px" height="150px"></a>
 
-<a href="https://lu.ma"><img alt="Luma" src="https://github.com/user-attachments/assets/4fae0c9d-de0f-4042-9cd6-e07885d028a9" width="225px" height="150px"></a>
-
 ### Silver
 
-<a href="https://www.frontend.fyi/?utm_source=motion"><img alt="Frontend.fyi" src="https://github.com/user-attachments/assets/07d23aa5-69db-44a0-849d-90177e6fc817" width="150px" height="100px"></a>
+<a href="https://www.frontend.fyi/?utm_source=motion"><img alt="Frontend.fyi" src="https://github.com/user-attachments/assets/07d23aa5-69db-44a0-849d-90177e6fc817" width="150px" height="100px"></a> <a href="https://statamic.com"><img alt="Statamic" src="https://github.com/user-attachments/assets/5d28f090-bdd9-4b31-b134-fb2b94ca636f" width="150px" height="100px"></a> <a href="https://firecrawl.dev"><img alt="Firecrawl" src="https://github.com/user-attachments/assets/cba90e54-1329-4353-8fba-85beef4d2ee9" width="150px" height="100px"></a> <a href="https://puzzmo.com"><img alt="Puzzmo" src="https://github.com/user-attachments/assets/aa2d5586-e5e2-43b9-8446-db456e4b0758" width="150px" height="100px"></a> <a href="https://buildui.com"><img alt="Build UI" src="https://github.com/user-attachments/assets/024bfcd5-50e8-4b3d-a115-d5c6d6030d1c" width="150px" height="100px"></a> <a href="https://hover.dev"><img alt="Hover" src="https://github.com/user-attachments/assets/4715b555-d2ac-4cb7-9f35-d36d708827b3" width="150px" height="100px"></a>
 
-<a href="https://statamic.com"><img alt="Statamic" src="https://github.com/user-attachments/assets/5d28f090-bdd9-4b31-b134-fb2b94ca636f" width="150px" height="100px"></a>
-
-<a href="https://firecrawl.dev"><img alt="Firecrawl" src="https://github.com/user-attachments/assets/cba90e54-1329-4353-8fba-85beef4d2ee9" width="150px" height="100px"></a>
-
-<a href="https://puzzmo.com"><img alt="Puzzmo" src="https://github.com/user-attachments/assets/aa2d5586-e5e2-43b9-8446-db456e4b0758" width="150px" height="100px"></a>
-
-<a href="https://buildui.com"><img alt="Build UI" src="https://github.com/user-attachments/assets/024bfcd5-50e8-4b3d-a115-d5c6d6030d1c" width="150px" height="100px"></a>
-
-<a href="https://hover.dev"><img alt="Hover" src="https://github.com/user-attachments/assets/4715b555-d2ac-4cb7-9f35-d36d708827b3" width="150px" height="100px"></a>
-
 ### Personal
@@ -123,0 +107,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1605948

increased by0.58%

Number of package files

372

increased by0.54%

Lines of code

39725

increased by0.48%

Worsened metrics

Number of lines in readme file

112

decreased by-12.5%

Dependency changes

• + Addedframer-motion@11.17.0(transitive)

• + Addedmotion-dom@11.16.4(transitive)

• + Addedmotion-utils@11.16.0(transitive)

• - Removedframer-motion@11.15.0(transitive)

• - Removedmotion-dom@11.14.3(transitive)

• - Removedmotion-utils@11.14.3(transitive)

• Updatedframer-motion@^11.16.0