motion 10.2.1 → 10.3.0

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

@@ -7,175 +7,176 @@ var cssVar = require('./utils/css-var.cjs.js');
 var noop = require('../../utils/noop.cjs.js');
 var time = require('./utils/time.cjs.js');
 var transforms = require('./utils/transforms.cjs.js');
-var stopAnimation = require('./utils/stop-animation.cjs.js');
 var easing = require('./utils/easing.cjs.js');
 var featureDetection = require('./utils/feature-detection.cjs.js');
 var apply = require('./utils/apply.cjs.js');
-var animateNumber = require('../js/animate-number.cjs.js');
+var NumberAnimation = require('../js/NumberAnimation.cjs.js');
 var keyframes = require('./utils/keyframes.cjs.js');
 var style = require('./style.cjs.js');
 var defaults = require('./utils/defaults.cjs.js');
+var getStyleName = require('./utils/get-style-name.cjs.js');
+var isNumber = require('../../utils/is-number.cjs.js');
+var stopAnimation = require('./utils/stop-animation.cjs.js');
 
-function animateStyle(element, name, keyframesDefinition, options = {}) {
+function animateStyle(element, key, keyframesDefinition, options = {}) {
     let animation;
     let { duration = defaults.defaults.duration, delay = defaults.defaults.delay, endDelay = defaults.defaults.endDelay, repeat = defaults.defaults.repeat, easing: easing$1 = defaults.defaults.easing, direction, offset, allowWebkitAcceleration = false, } = options;
     const data$1 = data.getAnimationData(element);
     let canAnimateNatively = featureDetection.supports.waapi();
     let render = noop.noop;
-    const valueIsTransform = transforms.isTransform(name);
+    const valueIsTransform = transforms.isTransform(key);
     /**
      * If this is an individual transform, we need to map its
      * key to a CSS variable and update the element's transform style
      */
-    if (valueIsTransform) {
-        if (transforms.transformAlias[name])
-            name = transforms.transformAlias[name];
-        transforms.addTransformToElement(element, name);
-        name = transforms.asTransformCssVar(name);
-    }
+    valueIsTransform && transforms.addTransformToElement(element, key);
+    const name = getStyleName.getStyleName(key);
     /**
      * Get definition of value, this will be used to convert numerical
      * keyframes into the default value type.
      */
-    const definition = transforms.transformPropertyDefinitions.get(name);
-    /**
-     * Replace null values with the previous keyframe value, or read
-     * it from the DOM if it's the first keyframe.
-     *
-     * TODO: This needs to come after the valueIsTransform
-     * check so it can correctly read the underlying value.
-     * Should make a test for this.
-     */
-    let keyframes$1 = keyframes.hydrateKeyframes(keyframes.keyframesList(keyframesDefinition), element, name);
-    if (easing.isCustomEasing(easing$1)) {
-        const custom = easing$1.createAnimation(keyframes$1, () => style.style.get(element, name), valueIsTransform, name, data$1);
-        easing$1 = custom.easing;
-        if (custom.keyframes)
-            keyframes$1 = custom.keyframes;
-        if (custom.duration)
-            duration = custom.duration;
-    }
-    /**
-     * If this is a CSS variable we need to register it with the browser
-     * before it can be animated natively. We also set it with setProperty
-     * rather than directly onto the element.style object.
-     */
-    if (cssVar.isCssVar(name)) {
-        render = apply.createCssVariableRenderer(element, name);
-        if (featureDetection.supports.cssRegisterProperty()) {
-            cssVar.registerCssVariable(name);
-        }
-        else {
-            canAnimateNatively = false;
-        }
-    }
-    else {
-        render = apply.createStyleRenderer(element, name);
-    }
+    const definition = transforms.transformDefinitions.get(name);
     /**
-     * Stop the current animation, if any, after we have the
-     * opportunity to use its data to generate velocity for
-     * the subsequent animation.
+     * Stop the current animation, if any. Because this will trigger
+     * commitStyles (DOM writes) and we might later trigger DOM reads,
+     * this is fired now and we return a factory function to create
+     * the actual animation that can get called in batch,
      */
-    stopCurrentAnimation(data$1, name);
+    stopAnimation.stopAnimation(data$1.animations[name]);
     /**
-     * If we can animate this value with WAAPI, do so. Currently this only
-     * feature detects CSS.registerProperty but could check WAAPI too.
+     * Batchable factory function containing all DOM reads.
      */
-    if (canAnimateNatively) {
+    return () => {
+        const readInitialValue = () => { var _a, _b; return (_b = (_a = style.style.get(element, name)) !== null && _a !== void 0 ? _a : definition === null || definition === void 0 ? void 0 : definition.initialValue) !== null && _b !== void 0 ? _b : 0; };
         /**
-         * Convert numbers to default value types. Currently this only supports
-         * transforms but it could also support other value types.
+         * Replace null values with the previous keyframe value, or read
+         * it from the DOM if it's the first keyframe.
          */
-        if (definition) {
-            keyframes$1 = keyframes$1.map((value) => typeof value === "number" ? definition.toDefaultUnit(value) : value);
-        }
-        if (!featureDetection.supports.partialKeyframes() && keyframes$1.length === 1) {
-            keyframes$1.unshift(style.style.get(element, name));
+        let keyframes$1 = keyframes.hydrateKeyframes(keyframes.keyframesList(keyframesDefinition), readInitialValue);
+        if (easing.isCustomEasing(easing$1)) {
+            const custom = easing$1.createAnimation(keyframes$1, readInitialValue, valueIsTransform, name, data$1);
+            easing$1 = custom.easing;
+            if (custom.keyframes !== undefined)
+                keyframes$1 = custom.keyframes;
+            if (custom.duration !== undefined)
+                duration = custom.duration;
         }
-        const animationOptions = {
-            delay: time.ms(delay),
-            duration: time.ms(duration),
-            endDelay: time.ms(endDelay),
-            easing: !easing.isEasingList(easing$1) ? easing.convertEasing(easing$1) : undefined,
-            direction,
-            iterations: repeat + 1,
-            fill: "both",
-        };
-        animation = element.animate({
-            [name]: keyframes$1,
-            offset,
-            easing: easing.isEasingList(easing$1) ? easing$1.map(easing.convertEasing) : undefined,
-        }, animationOptions);
         /**
-         * Polyfill finished Promise in browsers that don't support it
+         * If this is a CSS variable we need to register it with the browser
+         * before it can be animated natively. We also set it with setProperty
+         * rather than directly onto the element.style object.
          */
-        if (!animation.finished) {
-            animation.finished = new Promise((resolve, reject) => {
-                animation.onfinish = resolve;
-                animation.oncancel = reject;
-            });
+        if (cssVar.isCssVar(name)) {
+            render = apply.cssVariableRenderer(element, name);
+            if (featureDetection.supports.cssRegisterProperty()) {
+                cssVar.registerCssVariable(name);
+            }
+            else {
+                canAnimateNatively = false;
+            }
+        }
+        else {
+            render = apply.styleRenderer(element, name);
         }
-        const target = keyframes$1[keyframes$1.length - 1];
-        animation.finished
-            .then(() => {
-            // Apply styles to target
-            render(target);
-            // Ensure fill modes don't persist
-            animation.cancel();
-        })
-            .catch(noop.noop);
         /**
-         * This forces Webkit to run animations on the main thread by exploiting
-         * this condition:
-         * https://trac.webkit.org/browser/webkit/trunk/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp?rev=281238#L1099
-         *
-         * This fixes Webkit's timing bugs, like accelerated animations falling
-         * out of sync with main thread animations and massive delays in starting
-         * accelerated animations in WKWebView.
+         * If we can animate this value with WAAPI, do so. Currently this only
+         * feature detects CSS.registerProperty but could check WAAPI too.
          */
-        if (!allowWebkitAcceleration)
-            animation.playbackRate = 1.000001;
-    }
-    else if (valueIsTransform && keyframes$1.every(isNumber)) {
-        if (keyframes$1.length === 1) {
-            keyframes$1.unshift(style.style.get(element, name) || (definition === null || definition === void 0 ? void 0 : definition.initialValue) || 0);
+        if (canAnimateNatively) {
+            /**
+             * Convert numbers to default value types. Currently this only supports
+             * transforms but it could also support other value types.
+             */
+            if (definition) {
+                keyframes$1 = keyframes$1.map((value) => isNumber.isNumber(value) ? definition.toDefaultUnit(value) : value);
+            }
+            /**
+             * If this browser doesn't support partial/implicit keyframes we need to
+             * explicitly provide one.
+             */
+            if (!featureDetection.supports.partialKeyframes() && keyframes$1.length === 1) {
+                keyframes$1.unshift(readInitialValue());
+            }
+            const animationOptions = {
+                delay: time.ms(delay),
+                duration: time.ms(duration),
+                endDelay: time.ms(endDelay),
+                easing: !easing.isEasingList(easing$1) ? easing.convertEasing(easing$1) : undefined,
+                direction,
+                iterations: repeat + 1,
+                fill: "both",
+            };
+            animation = element.animate({
+                [name]: keyframes$1,
+                offset,
+                easing: easing.isEasingList(easing$1) ? easing$1.map(easing.convertEasing) : undefined,
+            }, animationOptions);
+            /**
+             * Polyfill finished Promise in browsers that don't support it
+             */
+            if (!animation.finished) {
+                animation.finished = new Promise((resolve, reject) => {
+                    animation.onfinish = resolve;
+                    animation.oncancel = reject;
+                });
+            }
+            const target = keyframes$1[keyframes$1.length - 1];
+            animation.finished
+                .then(() => {
+                // Apply styles to target
+                render(target);
+                // Ensure fill modes don't persist
+                animation.cancel();
+            })
+                .catch(noop.noop);
+            /**
+             * This forces Webkit to run animations on the main thread by exploiting
+             * this condition:
+             * https://trac.webkit.org/browser/webkit/trunk/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp?rev=281238#L1099
+             *
+             * This fixes Webkit's timing bugs, like accelerated animations falling
+             * out of sync with main thread animations and massive delays in starting
+             * accelerated animations in WKWebView.
+             */
+            if (!allowWebkitAcceleration)
+                animation.playbackRate = 1.000001;
+            /**
+             * If we can't animate the value natively then we can fallback to the numbers-only
+             * polyfill for transforms. All keyframes must be numerical.
+             */
+        }
+        else if (valueIsTransform && keyframes$1.every(isNumber.isNumber)) {
+            /**
+             * If we only have a single keyframe, we need to create an initial keyframe by reading
+             * the current value from the DOM.
+             */
+            if (keyframes$1.length === 1) {
+                keyframes$1.unshift(parseFloat(readInitialValue()));
+            }
+            if (definition) {
+                const applyStyle = render;
+                render = (v) => applyStyle(definition.toDefaultUnit(v));
+            }
+            animation = new NumberAnimation.NumberAnimation(render, keyframes$1, Object.assign(Object.assign({}, options), { duration,
+                easing: easing$1 }));
+        }
+        else {
+            const target = keyframes$1[keyframes$1.length - 1];
+            render(definition && isNumber.isNumber(target)
+                ? definition.toDefaultUnit(target)
+                : target);
         }
+        data$1.animations[name] = animation;
         /**
-         * Transform styles are currently only accepted as numbers of
-         * their default value type, so here we loop through and map
-         * them to numbers.
+         * When an animation finishes, delete the reference to the previous animation.
          */
-        keyframes$1 = keyframes$1.map((value) => typeof value === "string" ? parseFloat(value) : value);
-        if (definition) {
-            const applyStyle = render;
-            render = (v) => applyStyle(definition.toDefaultUnit(v));
-        }
-        animation = animateNumber.animateNumber(render, keyframes$1, Object.assign(Object.assign({}, options), { duration,
-            easing: easing$1 }));
-    }
-    else {
-        const target = keyframes$1[keyframes$1.length - 1];
-        render(definition && typeof target === "number"
-            ? definition.toDefaultUnit(target)
-            : target);
-    }
-    data$1.activeAnimations[name] = animation;
-    /**
-     * When an animation finishes, delete the reference to the previous animation.
-     */
-    animation === null || animation === void 0 ? void 0 : animation.finished.then(() => clearData(data$1, name)).catch(noop.noop);
-    return animation;
-}
-function stopCurrentAnimation(data, name) {
-    if (data.activeAnimations[name]) {
-        stopAnimation.stopAnimation(data.activeAnimations[name]);
-        clearData(data, name);
-    }
-}
-function clearData(data, name) {
-    data.activeGenerators[name] = data.activeAnimations[name] = undefined;
+        animation === null || animation === void 0 ? void 0 : animation.finished.then(() => {
+            data$1.animations[name] = undefined;
+            data$1.generators[name] = undefined;
+            data$1.prevGeneratorState[name] = undefined;
+        }).catch(noop.noop);
+        return animation;
+    };
 }
-const isNumber = (value) => typeof value === "number";
 
 exports.animateStyle = animateStyle;

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

@@ -2,176 +2,177 @@ import { getAnimationData } from './data.es.js';
 import { isCssVar, registerCssVariable } from './utils/css-var.es.js';
 import { noop } from '../../utils/noop.es.js';
 import { ms } from './utils/time.es.js';
-import { isTransform, transformAlias, addTransformToElement, asTransformCssVar, transformPropertyDefinitions } from './utils/transforms.es.js';
-import { stopAnimation } from './utils/stop-animation.es.js';
+import { isTransform, addTransformToElement, transformDefinitions } from './utils/transforms.es.js';
 import { isCustomEasing, isEasingList, convertEasing } from './utils/easing.es.js';
 import { supports } from './utils/feature-detection.es.js';
-import { createCssVariableRenderer, createStyleRenderer } from './utils/apply.es.js';
-import { animateNumber } from '../js/animate-number.es.js';
+import { cssVariableRenderer, styleRenderer } from './utils/apply.es.js';
+import { NumberAnimation } from '../js/NumberAnimation.es.js';
 import { hydrateKeyframes, keyframesList } from './utils/keyframes.es.js';
 import { style } from './style.es.js';
 import { defaults } from './utils/defaults.es.js';
+import { getStyleName } from './utils/get-style-name.es.js';
+import { isNumber } from '../../utils/is-number.es.js';
+import { stopAnimation } from './utils/stop-animation.es.js';
 
-function animateStyle(element, name, keyframesDefinition, options = {}) {
+function animateStyle(element, key, keyframesDefinition, options = {}) {
     let animation;
     let { duration = defaults.duration, delay = defaults.delay, endDelay = defaults.endDelay, repeat = defaults.repeat, easing = defaults.easing, direction, offset, allowWebkitAcceleration = false, } = options;
     const data = getAnimationData(element);
     let canAnimateNatively = supports.waapi();
     let render = noop;
-    const valueIsTransform = isTransform(name);
+    const valueIsTransform = isTransform(key);
     /**
      * If this is an individual transform, we need to map its
      * key to a CSS variable and update the element's transform style
      */
-    if (valueIsTransform) {
-        if (transformAlias[name])
-            name = transformAlias[name];
-        addTransformToElement(element, name);
-        name = asTransformCssVar(name);
-    }
+    valueIsTransform && addTransformToElement(element, key);
+    const name = getStyleName(key);
     /**
      * Get definition of value, this will be used to convert numerical
      * keyframes into the default value type.
      */
-    const definition = transformPropertyDefinitions.get(name);
-    /**
-     * Replace null values with the previous keyframe value, or read
-     * it from the DOM if it's the first keyframe.
-     *
-     * TODO: This needs to come after the valueIsTransform
-     * check so it can correctly read the underlying value.
-     * Should make a test for this.
-     */
-    let keyframes = hydrateKeyframes(keyframesList(keyframesDefinition), element, name);
-    if (isCustomEasing(easing)) {
-        const custom = easing.createAnimation(keyframes, () => style.get(element, name), valueIsTransform, name, data);
-        easing = custom.easing;
-        if (custom.keyframes)
-            keyframes = custom.keyframes;
-        if (custom.duration)
-            duration = custom.duration;
-    }
-    /**
-     * If this is a CSS variable we need to register it with the browser
-     * before it can be animated natively. We also set it with setProperty
-     * rather than directly onto the element.style object.
-     */
-    if (isCssVar(name)) {
-        render = createCssVariableRenderer(element, name);
-        if (supports.cssRegisterProperty()) {
-            registerCssVariable(name);
-        }
-        else {
-            canAnimateNatively = false;
-        }
-    }
-    else {
-        render = createStyleRenderer(element, name);
-    }
+    const definition = transformDefinitions.get(name);
     /**
-     * Stop the current animation, if any, after we have the
-     * opportunity to use its data to generate velocity for
-     * the subsequent animation.
+     * Stop the current animation, if any. Because this will trigger
+     * commitStyles (DOM writes) and we might later trigger DOM reads,
+     * this is fired now and we return a factory function to create
+     * the actual animation that can get called in batch,
      */
-    stopCurrentAnimation(data, name);
+    stopAnimation(data.animations[name]);
     /**
-     * If we can animate this value with WAAPI, do so. Currently this only
-     * feature detects CSS.registerProperty but could check WAAPI too.
+     * Batchable factory function containing all DOM reads.
      */
-    if (canAnimateNatively) {
+    return () => {
+        const readInitialValue = () => { var _a, _b; return (_b = (_a = style.get(element, name)) !== null && _a !== void 0 ? _a : definition === null || definition === void 0 ? void 0 : definition.initialValue) !== null && _b !== void 0 ? _b : 0; };
         /**
-         * Convert numbers to default value types. Currently this only supports
-         * transforms but it could also support other value types.
+         * Replace null values with the previous keyframe value, or read
+         * it from the DOM if it's the first keyframe.
          */
-        if (definition) {
-            keyframes = keyframes.map((value) => typeof value === "number" ? definition.toDefaultUnit(value) : value);
-        }
-        if (!supports.partialKeyframes() && keyframes.length === 1) {
-            keyframes.unshift(style.get(element, name));
+        let keyframes = hydrateKeyframes(keyframesList(keyframesDefinition), readInitialValue);
+        if (isCustomEasing(easing)) {
+            const custom = easing.createAnimation(keyframes, readInitialValue, valueIsTransform, name, data);
+            easing = custom.easing;
+            if (custom.keyframes !== undefined)
+                keyframes = custom.keyframes;
+            if (custom.duration !== undefined)
+                duration = custom.duration;
         }
-        const animationOptions = {
-            delay: ms(delay),
-            duration: ms(duration),
-            endDelay: ms(endDelay),
-            easing: !isEasingList(easing) ? convertEasing(easing) : undefined,
-            direction,
-            iterations: repeat + 1,
-            fill: "both",
-        };
-        animation = element.animate({
-            [name]: keyframes,
-            offset,
-            easing: isEasingList(easing) ? easing.map(convertEasing) : undefined,
-        }, animationOptions);
         /**
-         * Polyfill finished Promise in browsers that don't support it
+         * If this is a CSS variable we need to register it with the browser
+         * before it can be animated natively. We also set it with setProperty
+         * rather than directly onto the element.style object.
          */
-        if (!animation.finished) {
-            animation.finished = new Promise((resolve, reject) => {
-                animation.onfinish = resolve;
-                animation.oncancel = reject;
-            });
+        if (isCssVar(name)) {
+            render = cssVariableRenderer(element, name);
+            if (supports.cssRegisterProperty()) {
+                registerCssVariable(name);
+            }
+            else {
+                canAnimateNatively = false;
+            }
+        }
+        else {
+            render = styleRenderer(element, name);
         }
-        const target = keyframes[keyframes.length - 1];
-        animation.finished
-            .then(() => {
-            // Apply styles to target
-            render(target);
-            // Ensure fill modes don't persist
-            animation.cancel();
-        })
-            .catch(noop);
         /**
-         * This forces Webkit to run animations on the main thread by exploiting
-         * this condition:
-         * https://trac.webkit.org/browser/webkit/trunk/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp?rev=281238#L1099
-         *
-         * This fixes Webkit's timing bugs, like accelerated animations falling
-         * out of sync with main thread animations and massive delays in starting
-         * accelerated animations in WKWebView.
+         * If we can animate this value with WAAPI, do so. Currently this only
+         * feature detects CSS.registerProperty but could check WAAPI too.
          */
-        if (!allowWebkitAcceleration)
-            animation.playbackRate = 1.000001;
-    }
-    else if (valueIsTransform && keyframes.every(isNumber)) {
-        if (keyframes.length === 1) {
-            keyframes.unshift(style.get(element, name) || (definition === null || definition === void 0 ? void 0 : definition.initialValue) || 0);
+        if (canAnimateNatively) {
+            /**
+             * Convert numbers to default value types. Currently this only supports
+             * transforms but it could also support other value types.
+             */
+            if (definition) {
+                keyframes = keyframes.map((value) => isNumber(value) ? definition.toDefaultUnit(value) : value);
+            }
+            /**
+             * If this browser doesn't support partial/implicit keyframes we need to
+             * explicitly provide one.
+             */
+            if (!supports.partialKeyframes() && keyframes.length === 1) {
+                keyframes.unshift(readInitialValue());
+            }
+            const animationOptions = {
+                delay: ms(delay),
+                duration: ms(duration),
+                endDelay: ms(endDelay),
+                easing: !isEasingList(easing) ? convertEasing(easing) : undefined,
+                direction,
+                iterations: repeat + 1,
+                fill: "both",
+            };
+            animation = element.animate({
+                [name]: keyframes,
+                offset,
+                easing: isEasingList(easing) ? easing.map(convertEasing) : undefined,
+            }, animationOptions);
+            /**
+             * Polyfill finished Promise in browsers that don't support it
+             */
+            if (!animation.finished) {
+                animation.finished = new Promise((resolve, reject) => {
+                    animation.onfinish = resolve;
+                    animation.oncancel = reject;
+                });
+            }
+            const target = keyframes[keyframes.length - 1];
+            animation.finished
+                .then(() => {
+                // Apply styles to target
+                render(target);
+                // Ensure fill modes don't persist
+                animation.cancel();
+            })
+                .catch(noop);
+            /**
+             * This forces Webkit to run animations on the main thread by exploiting
+             * this condition:
+             * https://trac.webkit.org/browser/webkit/trunk/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp?rev=281238#L1099
+             *
+             * This fixes Webkit's timing bugs, like accelerated animations falling
+             * out of sync with main thread animations and massive delays in starting
+             * accelerated animations in WKWebView.
+             */
+            if (!allowWebkitAcceleration)
+                animation.playbackRate = 1.000001;
+            /**
+             * If we can't animate the value natively then we can fallback to the numbers-only
+             * polyfill for transforms. All keyframes must be numerical.
+             */
+        }
+        else if (valueIsTransform && keyframes.every(isNumber)) {
+            /**
+             * If we only have a single keyframe, we need to create an initial keyframe by reading
+             * the current value from the DOM.
+             */
+            if (keyframes.length === 1) {
+                keyframes.unshift(parseFloat(readInitialValue()));
+            }
+            if (definition) {
+                const applyStyle = render;
+                render = (v) => applyStyle(definition.toDefaultUnit(v));
+            }
+            animation = new NumberAnimation(render, keyframes, Object.assign(Object.assign({}, options), { duration,
+                easing }));
+        }
+        else {
+            const target = keyframes[keyframes.length - 1];
+            render(definition && isNumber(target)
+                ? definition.toDefaultUnit(target)
+                : target);
         }
+        data.animations[name] = animation;
         /**
-         * Transform styles are currently only accepted as numbers of
-         * their default value type, so here we loop through and map
-         * them to numbers.
+         * When an animation finishes, delete the reference to the previous animation.
          */
-        keyframes = keyframes.map((value) => typeof value === "string" ? parseFloat(value) : value);
-        if (definition) {
-            const applyStyle = render;
-            render = (v) => applyStyle(definition.toDefaultUnit(v));
-        }
-        animation = animateNumber(render, keyframes, Object.assign(Object.assign({}, options), { duration,
-            easing }));
-    }
-    else {
-        const target = keyframes[keyframes.length - 1];
-        render(definition && typeof target === "number"
-            ? definition.toDefaultUnit(target)
-            : target);
-    }
-    data.activeAnimations[name] = animation;
-    /**
-     * When an animation finishes, delete the reference to the previous animation.
-     */
-    animation === null || animation === void 0 ? void 0 : animation.finished.then(() => clearData(data, name)).catch(noop);
-    return animation;
-}
-function stopCurrentAnimation(data, name) {
-    if (data.activeAnimations[name]) {
-        stopAnimation(data.activeAnimations[name]);
-        clearData(data, name);
-    }
-}
-function clearData(data, name) {
-    data.activeGenerators[name] = data.activeAnimations[name] = undefined;
+        animation === null || animation === void 0 ? void 0 : animation.finished.then(() => {
+            data.animations[name] = undefined;
+            data.generators[name] = undefined;
+            data.prevGeneratorState[name] = undefined;
+        }).catch(noop);
+        return animation;
+    };
 }
-const isNumber = (value) => typeof value === "number";
 
 export { animateStyle };

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

@@ -12,19 +12,30 @@ var defaults = require('./utils/defaults.cjs.js');
 function animate(elements, keyframes, options$1 = {}) {
     var _a;
     elements = resolveElements.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 = options.getOptions(options$1, key);
             valueOptions.delay = stagger.resolveOption(valueOptions.delay, i, numElements);
             const animation = animateStyle.animateStyle(element, key, keyframes[key], valueOptions);
-            animation && animations.push(animation);
+            animationFactories.push(animation);
         }
     }
-    return controls.createAnimationControls(animations, 
-    // TODO: Remove this in case duration is dynamically generated
+    return controls.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$1.duration) !== null && _a !== void 0 ? _a : defaults.defaults.duration);
 }