motion 10.3.2 → 10.5.0-alpha.3

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

@@ -1,182 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var data = require('./data.cjs.js');
-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 easing = require('./utils/easing.cjs.js');
-var featureDetection = require('./utils/feature-detection.cjs.js');
-var apply = require('./utils/apply.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, 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(key);
-    /**
-     * If this is an individual transform, we need to map its
-     * key to a CSS variable and update the element's transform style
-     */
-    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.transformDefinitions.get(name);
-    /**
-     * 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,
-     */
-    stopAnimation.stopAnimation(data$1.animations[name]);
-    /**
-     * Batchable factory function containing all DOM reads.
-     */
-    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; };
-        /**
-         * Replace null values with the previous keyframe value, or read
-         * it from the DOM if it's the first keyframe.
-         */
-        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;
-        }
-        /**
-         * 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.cssVariableRenderer(element, name);
-            if (featureDetection.supports.cssRegisterProperty()) {
-                cssVar.registerCssVariable(name);
-            }
-            else {
-                canAnimateNatively = false;
-            }
-        }
-        else {
-            render = apply.styleRenderer(element, name);
-        }
-        /**
-         * If we can animate this value with WAAPI, do so. Currently this only
-         * feature detects CSS.registerProperty but could check WAAPI too.
-         */
-        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;
-        /**
-         * When an animation finishes, delete the reference to the previous animation.
-         */
-        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;
-    };
-}
-
-exports.animateStyle = animateStyle;

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

@@ -1,178 +0,0 @@
-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, 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 { 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, 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(key);
-    /**
-     * If this is an individual transform, we need to map its
-     * key to a CSS variable and update the element's transform style
-     */
-    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 = transformDefinitions.get(name);
-    /**
-     * 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,
-     */
-    stopAnimation(data.animations[name]);
-    /**
-     * Batchable factory function containing all DOM reads.
-     */
-    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; };
-        /**
-         * Replace null values with the previous keyframe value, or read
-         * it from the DOM if it's the first keyframe.
-         */
-        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;
-        }
-        /**
-         * 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 = cssVariableRenderer(element, name);
-            if (supports.cssRegisterProperty()) {
-                registerCssVariable(name);
-            }
-            else {
-                canAnimateNatively = false;
-            }
-        }
-        else {
-            render = styleRenderer(element, name);
-        }
-        /**
-         * If we can animate this value with WAAPI, do so. Currently this only
-         * feature detects CSS.registerProperty but could check WAAPI too.
-         */
-        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;
-        /**
-         * When an animation finishes, delete the reference to the previous animation.
-         */
-        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;
-    };
-}
-
-export { animateStyle };

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

@@ -1,42 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var animateStyle = require('./animate-style.cjs.js');
-var options = require('./utils/options.cjs.js');
-var resolveElements = require('./utils/resolve-elements.cjs.js');
-var controls = require('./utils/controls.cjs.js');
-var stagger = require('../../utils/stagger.cjs.js');
-var defaults = require('./utils/defaults.cjs.js');
-
-function animate(elements, keyframes, options$1 = {}) {
-    var _a;
-    elements = resolveElements.resolveElements(elements);
-    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);
-            animationFactories.push(animation);
-        }
-    }
-    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);
-}
-
-exports.animate = animate;

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

@@ -1,38 +0,0 @@
-import { animateStyle } from './animate-style.es.js';
-import { getOptions } from './utils/options.es.js';
-import { resolveElements } from './utils/resolve-elements.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 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);
-            animationFactories.push(animation);
-        }
-    }
-    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);
-}
-
-export { animate };

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

@@ -1,18 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const data = new WeakMap();
-function getAnimationData(element) {
-    if (!data.has(element)) {
-        data.set(element, {
-            transforms: [],
-            animations: {},
-            generators: {},
-            prevGeneratorState: {},
-        });
-    }
-    return data.get(element);
-}
-
-exports.getAnimationData = getAnimationData;

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

@@ -1,14 +0,0 @@
-const data = new WeakMap();
-function getAnimationData(element) {
-    if (!data.has(element)) {
-        data.set(element, {
-            transforms: [],
-            animations: {},
-            generators: {},
-            prevGeneratorState: {},
-        });
-    }
-    return data.get(element);
-}
-
-export { getAnimationData };

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

@@ -1,22 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var cssVar = require('./utils/css-var.cjs.js');
-var transforms = require('./utils/transforms.cjs.js');
-
-const style = {
-    get: (element, name) => {
-        let value = cssVar.isCssVar(name)
-            ? element.style.getPropertyValue(name)
-            : getComputedStyle(element)[name];
-        if (!value && value !== 0) {
-            const definition = transforms.transformDefinitions.get(name);
-            if (definition)
-                value = definition.initialValue;
-        }
-        return value;
-    },
-};
-
-exports.style = style;

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

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