motion 10.2.1 → 10.3.0

package/dist/targets/dom/animate.es.js

@@ -1,26 +1,37 @@
 import { animateStyle } from './animate-style.es.js';
 import { getOptions } from './utils/options.es.js';
 import { resolveElements } from './utils/resolve-elements.es.js';
-import { createAnimationControls } from './utils/controls.es.js';
+import { createAnimations } from './utils/controls.es.js';
 import { resolveOption } from '../../utils/stagger.es.js';
 import { defaults } from './utils/defaults.es.js';
 
 function animate(elements, keyframes, options = {}) {
     var _a;
     elements = resolveElements(elements);
-    const animations = [];
     const numElements = elements.length;
+    /**
+     * Create and start new animations
+     */
+    const animationFactories = [];
     for (let i = 0; i < numElements; i++) {
         const element = elements[i];
         for (const key in keyframes) {
             const valueOptions = getOptions(options, key);
             valueOptions.delay = resolveOption(valueOptions.delay, i, numElements);
             const animation = animateStyle(element, key, keyframes[key], valueOptions);
-            animation && animations.push(animation);
+            animationFactories.push(animation);
         }
     }
-    return createAnimationControls(animations, 
-    // TODO: Remove this in case duration is dynamically generated
+    return createAnimations(animationFactories, 
+    /**
+     * TODO:
+     * If easing is set to spring or glide, duration will be dynamically
+     * generated. Ideally we would dynamically generate this from
+     * animation.effect.getComputedTiming().duration but this isn't
+     * supported in iOS13 or our number polyfill. Perhaps it's possible
+     * to Proxy animations returned from animateStyle that has duration
+     * as a getter.
+     */
     (_a = options.duration) !== null && _a !== void 0 ? _a : defaults.duration);
 }
 

package/dist/targets/dom/data.cjs.js

@@ -6,9 +6,10 @@ const data = new WeakMap();
 function getAnimationData(element) {
     if (!data.has(element)) {
         data.set(element, {
-            activeTransforms: [],
-            activeAnimations: {},
-            activeGenerators: {},
+            transforms: [],
+            animations: {},
+            generators: {},
+            prevGeneratorState: {},
         });
     }
     return data.get(element);

package/dist/targets/dom/data.es.js

@@ -2,9 +2,10 @@ const data = new WeakMap();
 function getAnimationData(element) {
     if (!data.has(element)) {
         data.set(element, {
-            activeTransforms: [],
-            activeAnimations: {},
-            activeGenerators: {},
+            transforms: [],
+            animations: {},
+            generators: {},
+            prevGeneratorState: {},
         });
     }
     return data.get(element);

package/dist/targets/dom/style.cjs.js

@@ -11,7 +11,7 @@ const style = {
             ? element.style.getPropertyValue(name)
             : getComputedStyle(element)[name];
         if (!value && value !== 0) {
-            const definition = transforms.transformPropertyDefinitions.get(name);
+            const definition = transforms.transformDefinitions.get(name);
             if (definition)
                 value = definition.initialValue;
         }

package/dist/targets/dom/style.es.js

@@ -1,5 +1,5 @@
 import { isCssVar } from './utils/css-var.es.js';
-import { transformPropertyDefinitions } from './utils/transforms.es.js';
+import { transformDefinitions } from './utils/transforms.es.js';
 
 const style = {
     get: (element, name) => {
@@ -7,7 +7,7 @@ const style = {
             ? element.style.getPropertyValue(name)
             : getComputedStyle(element)[name];
         if (!value && value !== 0) {
-            const definition = transformPropertyDefinitions.get(name);
+            const definition = transformDefinitions.get(name);
             if (definition)
                 value = definition.initialValue;
         }

package/dist/targets/dom/timeline/index.cjs.js

@@ -18,13 +18,14 @@ var sort = require('./utils/sort.cjs.js');
 
 function timeline(definition, options = {}) {
     var _a, _b;
-    const animations = [];
     const animationDefinitions = createAnimationsFromTimeline(definition, options);
-    for (let i = 0; i < animationDefinitions.length; i++) {
-        const animation = animateStyle.animateStyle(...animationDefinitions[i]);
-        animation && animations.push(animation);
-    }
-    return controls.createAnimationControls(animations, 
+    /**
+     * Create and start animations
+     */
+    const animationFactories = animationDefinitions
+        .map((definition) => animateStyle.animateStyle(...definition))
+        .filter(Boolean);
+    return controls.createAnimations(animationFactories, 
     // Get the duration from the first animation definition
     (_b = (_a = animationDefinitions[0]) === null || _a === void 0 ? void 0 : _a[3].duration) !== null && _b !== void 0 ? _b : defaults.defaults.duration);
 }

package/dist/targets/dom/timeline/index.es.js

@@ -3,7 +3,7 @@ import { progress } from '../../../utils/progress.es.js';
 import { resolveOption } from '../../../utils/stagger.es.js';
 import { defaultOffset, fillOffset } from '../../js/utils/offset.es.js';
 import { animateStyle } from '../animate-style.es.js';
-import { createAnimationControls } from '../utils/controls.es.js';
+import { createAnimations } from '../utils/controls.es.js';
 import { defaults } from '../utils/defaults.es.js';
 import { keyframesList } from '../utils/keyframes.es.js';
 import { getOptions } from '../utils/options.es.js';
@@ -14,13 +14,14 @@ import { compareByTime } from './utils/sort.es.js';
 
 function timeline(definition, options = {}) {
     var _a, _b;
-    const animations = [];
     const animationDefinitions = createAnimationsFromTimeline(definition, options);
-    for (let i = 0; i < animationDefinitions.length; i++) {
-        const animation = animateStyle(...animationDefinitions[i]);
-        animation && animations.push(animation);
-    }
-    return createAnimationControls(animations, 
+    /**
+     * Create and start animations
+     */
+    const animationFactories = animationDefinitions
+        .map((definition) => animateStyle(...definition))
+        .filter(Boolean);
+    return createAnimations(animationFactories, 
     // Get the duration from the first animation definition
     (_b = (_a = animationDefinitions[0]) === null || _a === void 0 ? void 0 : _a[3].duration) !== null && _b !== void 0 ? _b : defaults.duration);
 }

package/dist/targets/dom/timeline/utils/calc-time.cjs.js

@@ -2,9 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var isNumber = require('../../../../utils/is-number.cjs.js');
+
 function calcNextTime(current, next, prev, labels) {
     var _a;
-    if (typeof next === "number") {
+    if (isNumber.isNumber(next)) {
         return next;
     }
     else if (next.startsWith("-") || next.startsWith("+")) {

package/dist/targets/dom/timeline/utils/calc-time.es.js

@@ -1,6 +1,8 @@
+import { isNumber } from '../../../../utils/is-number.es.js';
+
 function calcNextTime(current, next, prev, labels) {
     var _a;
-    if (typeof next === "number") {
+    if (isNumber(next)) {
         return next;
     }
     else if (next.startsWith("-") || next.startsWith("+")) {

package/dist/targets/dom/utils/apply.cjs.js

@@ -2,12 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const createCssVariableRenderer = (element, name) => {
-    return (latest) => element.style.setProperty(name, latest);
-};
-const createStyleRenderer = (element, name) => {
-    return (latest) => (element.style[name] = latest);
-};
+const cssVariableRenderer = (element, name) => (latest) => element.style.setProperty(name, latest);
+const styleRenderer = (element, name) => (latest) => (element.style[name] = latest);
 
-exports.createCssVariableRenderer = createCssVariableRenderer;
-exports.createStyleRenderer = createStyleRenderer;
+exports.cssVariableRenderer = cssVariableRenderer;
+exports.styleRenderer = styleRenderer;

package/dist/targets/dom/utils/apply.es.js

@@ -1,8 +1,4 @@
-const createCssVariableRenderer = (element, name) => {
-    return (latest) => element.style.setProperty(name, latest);
-};
-const createStyleRenderer = (element, name) => {
-    return (latest) => (element.style[name] = latest);
-};
+const cssVariableRenderer = (element, name) => (latest) => element.style.setProperty(name, latest);
+const styleRenderer = (element, name) => (latest) => (element.style[name] = latest);
 
-export { createCssVariableRenderer, createStyleRenderer };
+export { cssVariableRenderer, styleRenderer };

package/dist/targets/dom/utils/controls.cjs.js

@@ -6,7 +6,11 @@ var noop = require('../../../utils/noop.cjs.js');
 var stopAnimation = require('./stop-animation.cjs.js');
 var time = require('./time.cjs.js');
 
-const createAnimationControls = (animations, duration) => new Proxy({ animations, duration }, controls);
+const createAnimation = (factory) => factory();
+const createAnimations = (animationFactory, duration) => new Proxy({
+    animations: animationFactory.map(createAnimation).filter(Boolean),
+    duration,
+}, controls);
 /**
  * TODO:
  * Currently this returns the first animation, ideally it would return
@@ -52,4 +56,4 @@ const controls = {
 const selectFinished = (animation) => animation.finished;
 
 exports.controls = controls;
-exports.createAnimationControls = createAnimationControls;
+exports.createAnimations = createAnimations;

package/dist/targets/dom/utils/controls.es.js

@@ -2,7 +2,11 @@ import { noop } from '../../../utils/noop.es.js';
 import { stopAnimation } from './stop-animation.es.js';
 import { ms } from './time.es.js';
 
-const createAnimationControls = (animations, duration) => new Proxy({ animations, duration }, controls);
+const createAnimation = (factory) => factory();
+const createAnimations = (animationFactory, duration) => new Proxy({
+    animations: animationFactory.map(createAnimation).filter(Boolean),
+    duration,
+}, controls);
 /**
  * TODO:
  * Currently this returns the first animation, ideally it would return
@@ -47,4 +51,4 @@ const controls = {
 };
 const selectFinished = (animation) => animation.finished;
 
-export { controls, createAnimationControls };
+export { controls, createAnimations };

package/dist/targets/dom/utils/css-var.cjs.js

@@ -11,8 +11,8 @@ function registerCssVariable(name) {
         return;
     registeredProperties.add(name);
     try {
-        const { syntax, initialValue } = transforms.transformPropertyDefinitions.has(name)
-            ? transforms.transformPropertyDefinitions.get(name)
+        const { syntax, initialValue } = transforms.transformDefinitions.has(name)
+            ? transforms.transformDefinitions.get(name)
             : {};
         CSS.registerProperty({
             name,

package/dist/targets/dom/utils/css-var.es.js

@@ -1,4 +1,4 @@
-import { transformPropertyDefinitions } from './transforms.es.js';
+import { transformDefinitions } from './transforms.es.js';
 
 const isCssVar = (name) => name.startsWith("--");
 const registeredProperties = new Set();
@@ -7,8 +7,8 @@ function registerCssVariable(name) {
         return;
     registeredProperties.add(name);
     try {
-        const { syntax, initialValue } = transformPropertyDefinitions.has(name)
-            ? transformPropertyDefinitions.get(name)
+        const { syntax, initialValue } = transformDefinitions.has(name)
+            ? transformDefinitions.get(name)
             : {};
         CSS.registerProperty({
             name,

package/dist/targets/dom/utils/easing.cjs.js

@@ -2,8 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const isCubicBezier = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
-const isEasingList = (easing) => Array.isArray(easing) && typeof easing[0] !== "number";
+var isNumber = require('../../../utils/is-number.cjs.js');
+
+const isCubicBezier = (easing) => Array.isArray(easing) && isNumber.isNumber(easing[0]);
+const isEasingList = (easing) => Array.isArray(easing) && !isNumber.isNumber(easing[0]);
 const isCustomEasing = (easing) => typeof easing === "object" &&
     Boolean(easing.createAnimation);
 const convertEasing = (easing) => isCubicBezier(easing) ? cubicBezierAsString(easing) : easing;

package/dist/targets/dom/utils/easing.es.js

@@ -1,5 +1,7 @@
-const isCubicBezier = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
-const isEasingList = (easing) => Array.isArray(easing) && typeof easing[0] !== "number";
+import { isNumber } from '../../../utils/is-number.es.js';
+
+const isCubicBezier = (easing) => Array.isArray(easing) && isNumber(easing[0]);
+const isEasingList = (easing) => Array.isArray(easing) && !isNumber(easing[0]);
 const isCustomEasing = (easing) => typeof easing === "object" &&
     Boolean(easing.createAnimation);
 const convertEasing = (easing) => isCubicBezier(easing) ? cubicBezierAsString(easing) : easing;

package/dist/targets/dom/utils/feature-detection.cjs.js

@@ -19,13 +19,13 @@ const featureTests = {
     finished: () => Boolean(testAnimation({ opacity: [0, 1] }).finished),
 };
 const results = {};
-const supports = Object.keys(featureTests).reduce((acc, key) => {
-    acc[key] = () => {
+const supports = {};
+for (const key in featureTests) {
+    supports[key] = () => {
         if (results[key] === undefined)
             results[key] = featureTests[key]();
         return results[key];
     };
-    return acc;
-}, {});
+}
 
 exports.supports = supports;

package/dist/targets/dom/utils/feature-detection.es.js

@@ -15,13 +15,13 @@ const featureTests = {
     finished: () => Boolean(testAnimation({ opacity: [0, 1] }).finished),
 };
 const results = {};
-const supports = Object.keys(featureTests).reduce((acc, key) => {
-    acc[key] = () => {
+const supports = {};
+for (const key in featureTests) {
+    supports[key] = () => {
         if (results[key] === undefined)
             results[key] = featureTests[key]();
         return results[key];
     };
-    return acc;
-}, {});
+}
 
 export { supports };

package/dist/targets/dom/utils/get-style-name.cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var transforms = require('./transforms.cjs.js');
+
+function getStyleName(key) {
+    if (transforms.transformAlias[key])
+        key = transforms.transformAlias[key];
+    return transforms.isTransform(key) ? transforms.asTransformCssVar(key) : key;
+}
+
+exports.getStyleName = getStyleName;

package/dist/targets/dom/utils/get-style-name.es.js

@@ -0,0 +1,9 @@
+import { isTransform, asTransformCssVar, transformAlias } from './transforms.es.js';
+
+function getStyleName(key) {
+    if (transformAlias[key])
+        key = transformAlias[key];
+    return isTransform(key) ? asTransformCssVar(key) : key;
+}
+
+export { getStyleName };

package/dist/targets/dom/utils/keyframes.cjs.js

@@ -2,12 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var style = require('../style.cjs.js');
-
-function hydrateKeyframes(keyframes, element, name) {
+function hydrateKeyframes(keyframes, readInitialValue) {
     for (let i = 0; i < keyframes.length; i++) {
         if (keyframes[i] === null) {
-            keyframes[i] = i ? keyframes[i - 1] : style.style.get(element, name);
+            keyframes[i] = i ? keyframes[i - 1] : readInitialValue();
         }
     }
     return keyframes;

package/dist/targets/dom/utils/keyframes.es.js

@@ -1,9 +1,7 @@
-import { style } from '../style.es.js';
-
-function hydrateKeyframes(keyframes, element, name) {
+function hydrateKeyframes(keyframes, readInitialValue) {
     for (let i = 0; i < keyframes.length; i++) {
         if (keyframes[i] === null) {
-            keyframes[i] = i ? keyframes[i - 1] : style.get(element, name);
+            keyframes[i] = i ? keyframes[i - 1] : readInitialValue();
         }
     }
     return keyframes;

package/dist/targets/dom/utils/options.cjs.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const getOptions = (options, key) => options[key] ? Object.assign(Object.assign({}, options), options[key]) : Object.assign({}, options);
+const getOptions = (options, key) => options[key] ? Object.assign(Object.assign({}, options), options[key]) : options;
 
 exports.getOptions = getOptions;

package/dist/targets/dom/utils/options.es.js

@@ -1,3 +1,3 @@
-const getOptions = (options, key) => options[key] ? Object.assign(Object.assign({}, options), options[key]) : Object.assign({}, options);
+const getOptions = (options, key) => options[key] ? Object.assign(Object.assign({}, options), options[key]) : options;
 
 export { getOptions };

package/dist/targets/dom/utils/stop-animation.cjs.js

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 function stopAnimation(animation) {
+    if (!animation)
+        return;
     // Suppress error thrown by WAAPI
     try {
         /**

package/dist/targets/dom/utils/stop-animation.es.js

@@ -1,4 +1,6 @@
 function stopAnimation(animation) {
+    if (!animation)
+        return;
     // Suppress error thrown by WAAPI
     try {
         /**

package/dist/targets/dom/utils/transforms.cjs.js

@@ -40,7 +40,7 @@ const baseTransformProperties = {
     },
     skew: rotation,
 };
-const transformPropertyDefinitions = new Map();
+const transformDefinitions = new Map();
 const asTransformCssVar = (name) => `--motion-${name}`;
 /**
  * Generate a list of every possible transform key
@@ -49,7 +49,7 @@ const transforms = ["x", "y", "z"];
 order.forEach((name) => {
     axes.forEach((axis) => {
         transforms.push(name + axis);
-        transformPropertyDefinitions.set(asTransformCssVar(name + axis), baseTransformProperties[name]);
+        transformDefinitions.set(asTransformCssVar(name + axis), baseTransformProperties[name]);
     });
 });
 /**
@@ -62,11 +62,14 @@ const compareTransformOrder = (a, b) => transforms.indexOf(a) - transforms.index
 const transformLookup = new Set(transforms);
 const isTransform = (name) => transformLookup.has(name);
 const addTransformToElement = (element, name) => {
-    const { activeTransforms } = data.getAnimationData(element);
-    array.addUniqueItem(activeTransforms, name);
-    element.style.transform = buildTransformTemplate(activeTransforms);
+    // Map x to translateX etc
+    if (transformAlias[name])
+        name = transformAlias[name];
+    const { transforms } = data.getAnimationData(element);
+    array.addUniqueItem(transforms, name);
+    element.style.transform = buildTransformTemplate(transforms);
 };
-const buildTransformTemplate = (activeTransforms) => activeTransforms
+const buildTransformTemplate = (transforms) => transforms
     .sort(compareTransformOrder)
     .reduce(transformListToString, "")
     .trim();
@@ -79,4 +82,4 @@ exports.buildTransformTemplate = buildTransformTemplate;
 exports.compareTransformOrder = compareTransformOrder;
 exports.isTransform = isTransform;
 exports.transformAlias = transformAlias;
-exports.transformPropertyDefinitions = transformPropertyDefinitions;
+exports.transformDefinitions = transformDefinitions;

package/dist/targets/dom/utils/transforms.es.js

@@ -36,7 +36,7 @@ const baseTransformProperties = {
     },
     skew: rotation,
 };
-const transformPropertyDefinitions = new Map();
+const transformDefinitions = new Map();
 const asTransformCssVar = (name) => `--motion-${name}`;
 /**
  * Generate a list of every possible transform key
@@ -45,7 +45,7 @@ const transforms = ["x", "y", "z"];
 order.forEach((name) => {
     axes.forEach((axis) => {
         transforms.push(name + axis);
-        transformPropertyDefinitions.set(asTransformCssVar(name + axis), baseTransformProperties[name]);
+        transformDefinitions.set(asTransformCssVar(name + axis), baseTransformProperties[name]);
     });
 });
 /**
@@ -58,14 +58,17 @@ const compareTransformOrder = (a, b) => transforms.indexOf(a) - transforms.index
 const transformLookup = new Set(transforms);
 const isTransform = (name) => transformLookup.has(name);
 const addTransformToElement = (element, name) => {
-    const { activeTransforms } = getAnimationData(element);
-    addUniqueItem(activeTransforms, name);
-    element.style.transform = buildTransformTemplate(activeTransforms);
+    // Map x to translateX etc
+    if (transformAlias[name])
+        name = transformAlias[name];
+    const { transforms } = getAnimationData(element);
+    addUniqueItem(transforms, name);
+    element.style.transform = buildTransformTemplate(transforms);
 };
-const buildTransformTemplate = (activeTransforms) => activeTransforms
+const buildTransformTemplate = (transforms) => transforms
     .sort(compareTransformOrder)
     .reduce(transformListToString, "")
     .trim();
 const transformListToString = (template, name) => `${template} ${name}(var(${asTransformCssVar(name)}))`;
 
-export { addTransformToElement, asTransformCssVar, axes, buildTransformTemplate, compareTransformOrder, isTransform, transformAlias, transformPropertyDefinitions };
+export { addTransformToElement, asTransformCssVar, axes, buildTransformTemplate, compareTransformOrder, isTransform, transformAlias, transformDefinitions };

package/dist/targets/js/{animate-number.cjs.js → NumberAnimation.cjs.js}

@@ -7,8 +7,8 @@ var easing = require('../dom/utils/easing.cjs.js');
 var getFunction = require('./easing/utils/get-function.cjs.js');
 var interpolate = require('./utils/interpolate.cjs.js');
 
-class Animation {
-    constructor(output, keyframes, { easing: easing$1 = defaults.defaults.easing, duration = defaults.defaults.duration, delay = defaults.defaults.delay, endDelay = defaults.defaults.endDelay, repeat = defaults.defaults.repeat, offset, direction = "normal", }) {
+class NumberAnimation {
+    constructor(output, keyframes = [0, 1], { easing: easing$1 = defaults.defaults.easing, duration = defaults.defaults.duration, delay = defaults.defaults.delay, endDelay = defaults.defaults.endDelay, repeat = defaults.defaults.repeat, offset, direction = "normal", } = {}) {
         this.startTime = 0;
         this.rate = 1;
         this.t = 0;
@@ -19,54 +19,69 @@ class Animation {
             this.reject = reject;
         });
         const totalDuration = duration * (repeat + 1);
-        // TODO: This isn't currently supported but keeps TypeScript happy
-        if (easing.isCustomEasing(easing$1)) {
+        /**
+         * We don't currently support custom easing (spring, glide etc) in NumberAnimation
+         * (although this is completely possible), so this will have been hydrated by
+         * animateStyle.
+         */
+        if (easing.isCustomEasing(easing$1))
             easing$1 = "ease";
-        }
         const interpolate$1 = interpolate.slowInterpolateNumbers(keyframes, offset, easing.isEasingList(easing$1)
             ? easing$1.map(getFunction.getEasingFunction)
             : getFunction.getEasingFunction(easing$1));
         this.tick = (timestamp) => {
-            if (this.playState === "finished") {
-                const latest = interpolate$1(1);
-                output(latest);
-                this.resolve(latest);
-                return;
-            }
-            if (this.pauseTime) {
+            if (this.pauseTime)
                 timestamp = this.pauseTime;
-            }
             let t = (timestamp - this.startTime) * this.rate;
             this.t = t;
             // Convert to seconds
             t /= 1000;
             // Rebase on delay
             t = Math.max(t - delay, 0);
+            /**
+             * If this animation has finished, set the current time
+             * to the total duration.
+             */
+            if (this.playState === "finished")
+                t = totalDuration;
+            /**
+             * Get the current progress (0-1) of the animation. If t is >
+             * than duration we'll get values like 2.5 (midway through the
+             * third iteration)
+             */
             const progress = t / duration;
             // TODO progress += iterationStart
+            /**
+             * Get the current iteration (0 indexed). For instance the floor of
+             * 2.5 is 2.
+             */
             let currentIteration = Math.floor(progress);
+            /**
+             * Get the current progress of the iteration by taking the remainder
+             * so 2.5 is 0.5 through iteration 2
+             */
             let iterationProgress = progress % 1.0;
             if (!iterationProgress && progress >= 1) {
                 iterationProgress = 1;
             }
-            if (iterationProgress === 1) {
-                currentIteration--;
-            }
-            // Reverse progress
+            /**
+             * If iteration progress is 1 we count that as the end
+             * of the previous iteration.
+             */
+            iterationProgress === 1 && currentIteration--;
+            /**
+             * Reverse progress if we're not running in "normal" direction
+             */
             const iterationIsOdd = currentIteration % 2;
             if (direction === "reverse" ||
                 (direction === "alternate" && iterationIsOdd) ||
                 (direction === "alternate-reverse" && !iterationIsOdd)) {
                 iterationProgress = 1 - iterationProgress;
             }
-            const interpolationIsFinished = t >= totalDuration;
-            const interpolationProgress = interpolationIsFinished
-                ? 1
-                : Math.min(iterationProgress, 1);
-            const latest = interpolate$1(interpolationProgress);
+            const latest = interpolate$1(t >= totalDuration ? 1 : Math.min(iterationProgress, 1));
             output(latest);
-            const isFinished = t >= totalDuration + endDelay;
-            if (isFinished) {
+            const isAnimationFinished = this.playState === "finished" || t >= totalDuration + endDelay;
+            if (isAnimationFinished) {
                 this.playState = "finished";
                 this.resolve(latest);
             }
@@ -125,9 +140,5 @@ class Animation {
         this.rate = rate;
     }
 }
-function animateNumber(output, keyframes = [0, 1], options = {}) {
-    return new Animation(output, keyframes, options);
-}
 
-exports.Animation = Animation;
-exports.animateNumber = animateNumber;
+exports.NumberAnimation = NumberAnimation;