motion 10.4.0 → 10.5.0-alpha.1

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 };

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

@@ -1,190 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib = require('tslib');
-var heyListen = require('hey-listen');
-var progress = require('../../../utils/progress.cjs.js');
-var stagger = require('../../../utils/stagger.cjs.js');
-var offset = require('../../js/utils/offset.cjs.js');
-var animateStyle = require('../animate-style.cjs.js');
-var controls = require('../utils/controls.cjs.js');
-var defaults = require('../utils/defaults.cjs.js');
-var easing = require('../utils/easing.cjs.js');
-var keyframes = require('../utils/keyframes.cjs.js');
-var options = require('../utils/options.cjs.js');
-var resolveElements = require('../utils/resolve-elements.cjs.js');
-var transforms = require('../utils/transforms.cjs.js');
-var calcTime = require('./utils/calc-time.cjs.js');
-var edit = require('./utils/edit.cjs.js');
-var sort = require('./utils/sort.cjs.js');
-
-function timeline(definition, options = {}) {
-    var _a, _b;
-    const animationDefinitions = createAnimationsFromTimeline(definition, options);
-    /**
-     * 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);
-}
-function createAnimationsFromTimeline(definition, _a = {}) {
-    var { defaultOptions = {} } = _a, timelineOptions = tslib.__rest(_a, ["defaultOptions"]);
-    const animationDefinitions = [];
-    const elementSequences = new Map();
-    const elementCache = {};
-    const timeLabels = new Map();
-    let prevTime = 0;
-    let currentTime = 0;
-    let totalDuration = 0;
-    /**
-     * Build the timeline by mapping over the definition array and converting
-     * the definitions into keyframes and offsets with absolute time values.
-     * These will later get converted into relative offsets in a second pass.
-     */
-    for (let i = 0; i < definition.length; i++) {
-        const [elementDefinition, keyframes$1, options$1 = {}] = definition[i];
-        /**
-         * If a relative or absolute time value has been specified we need to resolve
-         * it in relation to the currentTime.
-         */
-        if (options$1.at !== undefined) {
-            currentTime = calcTime.calcNextTime(currentTime, options$1.at, prevTime, timeLabels);
-        }
-        /**
-         * Keep track of the maximum duration in this definition. This will be
-         * applied to currentTime once the definition has been parsed.
-         */
-        let maxDuration = 0;
-        /**
-         * Find all the elements specified in the definition and parse value
-         * keyframes from their timeline definitions.
-         */
-        const elements = resolveElements.resolveElements(elementDefinition, elementCache);
-        const numElements = elements.length;
-        for (let elementIndex = 0; elementIndex < numElements; elementIndex++) {
-            const element = elements[elementIndex];
-            const elementSequence = getElementSequence(element, elementSequences);
-            for (const key in keyframes$1) {
-                const valueSequence = getValueSequence(key, elementSequence);
-                let valueKeyframes = keyframes.keyframesList(keyframes$1[key]);
-                const valueOptions = options.getOptions(options$1, key);
-                let { duration = defaultOptions.duration || defaults.defaults.duration, easing: easing$1 = defaultOptions.easing || defaults.defaults.easing, } = valueOptions;
-                if (easing.isCustomEasing(easing$1)) {
-                    const valueIsTransform = transforms.isTransform(key);
-                    heyListen.invariant(valueKeyframes.length === 2 || !valueIsTransform, "spring must be provided 2 keyframes within timeline");
-                    const custom = easing$1.createAnimation(valueKeyframes, 
-                    // TODO We currently only support explicit keyframes
-                    // so this doesn't currently read from the DOM
-                    () => "0", valueIsTransform);
-                    easing$1 = custom.easing;
-                    if (custom.keyframes !== undefined)
-                        valueKeyframes = custom.keyframes;
-                    if (custom.duration !== undefined)
-                        duration = custom.duration;
-                }
-                const delay = stagger.resolveOption(options$1.delay, elementIndex, numElements) || 0;
-                const startTime = currentTime + delay;
-                const targetTime = startTime + duration;
-                /**
-                 *
-                 */
-                let { offset: offset$1 = offset.defaultOffset(valueKeyframes.length) } = valueOptions;
-                /**
-                 * If there's only one offset of 0, fill in a second with length 1
-                 *
-                 * TODO: Ensure there's a test that covers this removal
-                 */
-                if (offset$1.length === 1 && offset$1[0] === 0) {
-                    offset$1[1] = 1;
-                }
-                /**
-                 * Fill out if offset if fewer offsets than keyframes
-                 */
-                const remainder = length - valueKeyframes.length;
-                remainder > 0 && offset.fillOffset(offset$1, remainder);
-                /**
-                 * If only one value has been set, ie [1], push a null to the start of
-                 * the keyframe array. This will let us mark a keyframe at this point
-                 * that will later be hydrated with the previous value.
-                 */
-                valueKeyframes.length === 1 && valueKeyframes.unshift(null);
-                /**
-                 * Add keyframes, mapping offsets to absolute time.
-                 */
-                edit.addKeyframes(valueSequence, valueKeyframes, easing$1, offset$1, startTime, targetTime);
-                maxDuration = Math.max(delay + duration, maxDuration);
-                totalDuration = Math.max(targetTime, totalDuration);
-            }
-        }
-        prevTime = currentTime;
-        currentTime += maxDuration;
-    }
-    /**
-     * For every element and value combination create a new animation.
-     */
-    elementSequences.forEach((valueSequences, element) => {
-        for (const key in valueSequences) {
-            const valueSequence = valueSequences[key];
-            /**
-             * Arrange all the keyframes in ascending time order.
-             */
-            valueSequence.sort(sort.compareByTime);
-            const keyframes = [];
-            const valueOffset = [];
-            const valueEasing = [];
-            /**
-             * For each keyframe, translate absolute times into
-             * relative offsets based on the total duration of the timeline.
-             */
-            for (let i = 0; i < valueSequence.length; i++) {
-                const { at, value, easing } = valueSequence[i];
-                keyframes.push(value);
-                valueOffset.push(progress.progress(0, totalDuration, at));
-                valueEasing.push(easing || defaults.defaults.easing);
-            }
-            /**
-             * If the first keyframe doesn't land on offset: 0
-             * provide one by duplicating the initial keyframe. This ensures
-             * it snaps to the first keyframe when the animation starts.
-             */
-            if (valueOffset[0] !== 0) {
-                valueOffset.unshift(0);
-                keyframes.unshift(keyframes[0]);
-                valueEasing.unshift("linear");
-            }
-            /**
-             * If the last keyframe doesn't land on offset: 1
-             * provide one with a null wildcard value. This will ensure it
-             * stays static until the end of the animation.
-             */
-            if (valueOffset[valueOffset.length - 1] !== 1) {
-                valueOffset.push(1);
-                keyframes.push(null);
-            }
-            animationDefinitions.push([
-                element,
-                key,
-                keyframes,
-                Object.assign(Object.assign(Object.assign({}, defaultOptions), { duration: totalDuration, easing: valueEasing, offset: valueOffset }), timelineOptions),
-            ]);
-        }
-    });
-    return animationDefinitions;
-}
-function getElementSequence(element, sequences) {
-    !sequences.has(element) && sequences.set(element, {});
-    return sequences.get(element);
-}
-function getValueSequence(name, sequences) {
-    if (!sequences[name])
-        sequences[name] = [];
-    return sequences[name];
-}
-
-exports.createAnimationsFromTimeline = createAnimationsFromTimeline;
-exports.timeline = timeline;