motion 10.4.0 → 10.5.0-alpha.1

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

@@ -1,185 +0,0 @@
-import { __rest } from 'tslib';
-import { invariant } from 'hey-listen';
-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 { createAnimations } from '../utils/controls.es.js';
-import { defaults } from '../utils/defaults.es.js';
-import { isCustomEasing } from '../utils/easing.es.js';
-import { keyframesList } from '../utils/keyframes.es.js';
-import { getOptions } from '../utils/options.es.js';
-import { resolveElements } from '../utils/resolve-elements.es.js';
-import { isTransform } from '../utils/transforms.es.js';
-import { calcNextTime } from './utils/calc-time.es.js';
-import { addKeyframes } from './utils/edit.es.js';
-import { compareByTime } from './utils/sort.es.js';
-
-function timeline(definition, options = {}) {
-    var _a, _b;
-    const animationDefinitions = createAnimationsFromTimeline(definition, options);
-    /**
-     * 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);
-}
-function createAnimationsFromTimeline(definition, _a = {}) {
-    var { defaultOptions = {} } = _a, timelineOptions = __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, options = {}] = definition[i];
-        /**
-         * If a relative or absolute time value has been specified we need to resolve
-         * it in relation to the currentTime.
-         */
-        if (options.at !== undefined) {
-            currentTime = calcNextTime(currentTime, options.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(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) {
-                const valueSequence = getValueSequence(key, elementSequence);
-                let valueKeyframes = keyframesList(keyframes[key]);
-                const valueOptions = getOptions(options, key);
-                let { duration = defaultOptions.duration || defaults.duration, easing = defaultOptions.easing || defaults.easing, } = valueOptions;
-                if (isCustomEasing(easing)) {
-                    const valueIsTransform = isTransform(key);
-                    invariant(valueKeyframes.length === 2 || !valueIsTransform, "spring must be provided 2 keyframes within timeline");
-                    const custom = easing.createAnimation(valueKeyframes, 
-                    // TODO We currently only support explicit keyframes
-                    // so this doesn't currently read from the DOM
-                    () => "0", valueIsTransform);
-                    easing = custom.easing;
-                    if (custom.keyframes !== undefined)
-                        valueKeyframes = custom.keyframes;
-                    if (custom.duration !== undefined)
-                        duration = custom.duration;
-                }
-                const delay = resolveOption(options.delay, elementIndex, numElements) || 0;
-                const startTime = currentTime + delay;
-                const targetTime = startTime + duration;
-                /**
-                 *
-                 */
-                let { 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.length === 1 && offset[0] === 0) {
-                    offset[1] = 1;
-                }
-                /**
-                 * Fill out if offset if fewer offsets than keyframes
-                 */
-                const remainder = length - valueKeyframes.length;
-                remainder > 0 && fillOffset(offset, 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.
-                 */
-                addKeyframes(valueSequence, valueKeyframes, easing, offset, 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(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(0, totalDuration, at));
-                valueEasing.push(easing || 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];
-}
-
-export { createAnimationsFromTimeline, timeline };

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

@@ -1,23 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var isNumber = require('../../../../utils/is-number.cjs.js');
-
-function calcNextTime(current, next, prev, labels) {
-    var _a;
-    if (isNumber.isNumber(next)) {
-        return next;
-    }
-    else if (next.startsWith("-") || next.startsWith("+")) {
-        return Math.max(0, current + parseFloat(next));
-    }
-    else if (next === "<") {
-        return prev;
-    }
-    else {
-        return (_a = labels.get(next)) !== null && _a !== void 0 ? _a : current;
-    }
-}
-
-exports.calcNextTime = calcNextTime;

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

@@ -1,19 +0,0 @@
-import { isNumber } from '../../../../utils/is-number.es.js';
-
-function calcNextTime(current, next, prev, labels) {
-    var _a;
-    if (isNumber(next)) {
-        return next;
-    }
-    else if (next.startsWith("-") || next.startsWith("+")) {
-        return Math.max(0, current + parseFloat(next));
-    }
-    else if (next === "<") {
-        return prev;
-    }
-    else {
-        return (_a = labels.get(next)) !== null && _a !== void 0 ? _a : current;
-    }
-}
-
-export { calcNextTime };

package/dist/targets/dom/timeline/utils/edit.cjs.js

@@ -1,36 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var mix = require('../../../../utils/mix.cjs.js');
-var array = require('../../../../utils/array.cjs.js');
-var getEasing = require('../../../js/utils/get-easing.cjs.js');
-
-function eraseKeyframes(sequence, startTime, endTime) {
-    for (let i = 0; i < sequence.length; i++) {
-        const keyframe = sequence[i];
-        if (keyframe.at > startTime && keyframe.at < endTime) {
-            array.removeItem(sequence, keyframe);
-            // If we remove this item we have to push the pointer back one
-            i--;
-        }
-    }
-}
-function addKeyframes(sequence, keyframes, easing, offset, startTime, endTime) {
-    /**
-     * Erase every existing value between currentTime and targetTime,
-     * this will essentially splice this timeline into any currently
-     * defined ones.
-     */
-    eraseKeyframes(sequence, startTime, endTime);
-    for (let i = 0; i < keyframes.length; i++) {
-        sequence.push({
-            value: keyframes[i],
-            at: mix.mix(startTime, endTime, offset[i]),
-            easing: getEasing.getEasingForSegment(easing, i),
-        });
-    }
-}
-
-exports.addKeyframes = addKeyframes;
-exports.eraseKeyframes = eraseKeyframes;

package/dist/targets/dom/timeline/utils/edit.es.js

@@ -1,31 +0,0 @@
-import { mix } from '../../../../utils/mix.es.js';
-import { removeItem } from '../../../../utils/array.es.js';
-import { getEasingForSegment } from '../../../js/utils/get-easing.es.js';
-
-function eraseKeyframes(sequence, startTime, endTime) {
-    for (let i = 0; i < sequence.length; i++) {
-        const keyframe = sequence[i];
-        if (keyframe.at > startTime && keyframe.at < endTime) {
-            removeItem(sequence, keyframe);
-            // If we remove this item we have to push the pointer back one
-            i--;
-        }
-    }
-}
-function addKeyframes(sequence, keyframes, easing, offset, startTime, endTime) {
-    /**
-     * Erase every existing value between currentTime and targetTime,
-     * this will essentially splice this timeline into any currently
-     * defined ones.
-     */
-    eraseKeyframes(sequence, startTime, endTime);
-    for (let i = 0; i < keyframes.length; i++) {
-        sequence.push({
-            value: keyframes[i],
-            at: mix(startTime, endTime, offset[i]),
-            easing: getEasingForSegment(easing, i),
-        });
-    }
-}
-
-export { addKeyframes, eraseKeyframes };

package/dist/targets/dom/timeline/utils/sort.cjs.js

@@ -1,14 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function compareByTime(a, b) {
-    if (a.at === b.at) {
-        return a.value === null ? 1 : -1;
-    }
-    else {
-        return a.at - b.at;
-    }
-}
-
-exports.compareByTime = compareByTime;

package/dist/targets/dom/timeline/utils/sort.es.js

@@ -1,10 +0,0 @@
-function compareByTime(a, b) {
-    if (a.at === b.at) {
-        return a.value === null ? 1 : -1;
-    }
-    else {
-        return a.at - b.at;
-    }
-}
-
-export { compareByTime };

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

@@ -1,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const cssVariableRenderer = (element, name) => (latest) => element.style.setProperty(name, latest);
-const styleRenderer = (element, name) => (latest) => (element.style[name] = latest);
-
-exports.cssVariableRenderer = cssVariableRenderer;
-exports.styleRenderer = styleRenderer;

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

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

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

@@ -1,59 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var noop = require('../../../utils/noop.cjs.js');
-var stopAnimation = require('./stop-animation.cjs.js');
-var time = require('./time.cjs.js');
-
-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
- * the first active animation.
- */
-const getActiveAnimation = (state) => state.animations[0];
-const controls = {
-    get: (target, key) => {
-        var _a, _b;
-        switch (key) {
-            case "duration":
-                return target.duration;
-            case "currentTime":
-                let time = ((_a = getActiveAnimation(target)) === null || _a === void 0 ? void 0 : _a[key]) || 0;
-                return time ? time / 1000 : 0;
-            case "playbackRate":
-                return (_b = getActiveAnimation(target)) === null || _b === void 0 ? void 0 : _b[key];
-            case "finished":
-                if (!target.finished) {
-                    target.finished = Promise.all(target.animations.map(selectFinished)).catch(noop.noop);
-                }
-                return target.finished;
-            case "stop":
-                return () => target.animations.forEach(stopAnimation.stopAnimation);
-            default:
-                return () => target.animations.forEach((animation) => animation[key]());
-        }
-    },
-    set: (target, key, value) => {
-        switch (key) {
-            case "currentTime":
-                value = time.ms(value);
-            case "currentTime":
-            case "playbackRate":
-                for (let i = 0; i < target.animations.length; i++) {
-                    target.animations[i][key] = value;
-                }
-                return true;
-        }
-        return false;
-    },
-};
-const selectFinished = (animation) => animation.finished;
-
-exports.controls = controls;
-exports.createAnimations = createAnimations;

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

@@ -1,54 +0,0 @@
-import { noop } from '../../../utils/noop.es.js';
-import { stopAnimation } from './stop-animation.es.js';
-import { ms } from './time.es.js';
-
-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
- * the first active animation.
- */
-const getActiveAnimation = (state) => state.animations[0];
-const controls = {
-    get: (target, key) => {
-        var _a, _b;
-        switch (key) {
-            case "duration":
-                return target.duration;
-            case "currentTime":
-                let time = ((_a = getActiveAnimation(target)) === null || _a === void 0 ? void 0 : _a[key]) || 0;
-                return time ? time / 1000 : 0;
-            case "playbackRate":
-                return (_b = getActiveAnimation(target)) === null || _b === void 0 ? void 0 : _b[key];
-            case "finished":
-                if (!target.finished) {
-                    target.finished = Promise.all(target.animations.map(selectFinished)).catch(noop);
-                }
-                return target.finished;
-            case "stop":
-                return () => target.animations.forEach(stopAnimation);
-            default:
-                return () => target.animations.forEach((animation) => animation[key]());
-        }
-    },
-    set: (target, key, value) => {
-        switch (key) {
-            case "currentTime":
-                value = ms(value);
-            case "currentTime":
-            case "playbackRate":
-                for (let i = 0; i < target.animations.length; i++) {
-                    target.animations[i][key] = value;
-                }
-                return true;
-        }
-        return false;
-    },
-};
-const selectFinished = (animation) => animation.finished;
-
-export { controls, createAnimations };

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

@@ -1,29 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var transforms = require('./transforms.cjs.js');
-
-const isCssVar = (name) => name.startsWith("--");
-const registeredProperties = new Set();
-function registerCssVariable(name) {
-    if (registeredProperties.has(name))
-        return;
-    registeredProperties.add(name);
-    try {
-        const { syntax, initialValue } = transforms.transformDefinitions.has(name)
-            ? transforms.transformDefinitions.get(name)
-            : {};
-        CSS.registerProperty({
-            name,
-            inherits: false,
-            syntax,
-            initialValue,
-        });
-    }
-    catch (e) { }
-}
-
-exports.isCssVar = isCssVar;
-exports.registerCssVariable = registerCssVariable;
-exports.registeredProperties = registeredProperties;

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

@@ -1,23 +0,0 @@
-import { transformDefinitions } from './transforms.es.js';
-
-const isCssVar = (name) => name.startsWith("--");
-const registeredProperties = new Set();
-function registerCssVariable(name) {
-    if (registeredProperties.has(name))
-        return;
-    registeredProperties.add(name);
-    try {
-        const { syntax, initialValue } = transformDefinitions.has(name)
-            ? transformDefinitions.get(name)
-            : {};
-        CSS.registerProperty({
-            name,
-            inherits: false,
-            syntax,
-            initialValue,
-        });
-    }
-    catch (e) { }
-}
-
-export { isCssVar, registerCssVariable, registeredProperties };

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

@@ -1,13 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const defaults = {
-    duration: 0.3,
-    delay: 0,
-    endDelay: 0,
-    repeat: 0,
-    easing: "ease",
-};
-
-exports.defaults = defaults;

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

@@ -1,9 +0,0 @@
-const defaults = {
-    duration: 0.3,
-    delay: 0,
-    endDelay: 0,
-    repeat: 0,
-    easing: "ease",
-};
-
-export { defaults };

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

@@ -1,18 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-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;
-const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
-
-exports.convertEasing = convertEasing;
-exports.cubicBezierAsString = cubicBezierAsString;
-exports.isCubicBezier = isCubicBezier;
-exports.isCustomEasing = isCustomEasing;
-exports.isEasingList = isEasingList;

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

@@ -1,10 +0,0 @@
-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;
-const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
-
-export { convertEasing, cubicBezierAsString, isCubicBezier, isCustomEasing, isEasingList };

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

@@ -1,31 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const testAnimation = (keyframes) => document.createElement("div").animate(keyframes, { duration: 0.001 });
-const featureTests = {
-    cssRegisterProperty: () => typeof CSS !== "undefined" &&
-        Object.hasOwnProperty.call(CSS, "registerProperty"),
-    waapi: () => Object.hasOwnProperty.call(Element.prototype, "animate"),
-    partialKeyframes: () => {
-        try {
-            testAnimation({ opacity: [1] });
-        }
-        catch (e) {
-            return false;
-        }
-        return true;
-    },
-    finished: () => Boolean(testAnimation({ opacity: [0, 1] }).finished),
-};
-const results = {};
-const supports = {};
-for (const key in featureTests) {
-    supports[key] = () => {
-        if (results[key] === undefined)
-            results[key] = featureTests[key]();
-        return results[key];
-    };
-}
-
-exports.supports = supports;

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

@@ -1,27 +0,0 @@
-const testAnimation = (keyframes) => document.createElement("div").animate(keyframes, { duration: 0.001 });
-const featureTests = {
-    cssRegisterProperty: () => typeof CSS !== "undefined" &&
-        Object.hasOwnProperty.call(CSS, "registerProperty"),
-    waapi: () => Object.hasOwnProperty.call(Element.prototype, "animate"),
-    partialKeyframes: () => {
-        try {
-            testAnimation({ opacity: [1] });
-        }
-        catch (e) {
-            return false;
-        }
-        return true;
-    },
-    finished: () => Boolean(testAnimation({ opacity: [0, 1] }).finished),
-};
-const results = {};
-const supports = {};
-for (const key in featureTests) {
-    supports[key] = () => {
-        if (results[key] === undefined)
-            results[key] = featureTests[key]();
-        return results[key];
-    };
-}
-
-export { supports };

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

@@ -1,13 +0,0 @@
-'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

@@ -1,9 +0,0 @@
-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

@@ -1,16 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function hydrateKeyframes(keyframes, readInitialValue) {
-    for (let i = 0; i < keyframes.length; i++) {
-        if (keyframes[i] === null) {
-            keyframes[i] = i ? keyframes[i - 1] : readInitialValue();
-        }
-    }
-    return keyframes;
-}
-const keyframesList = (keyframes) => Array.isArray(keyframes) ? keyframes : [keyframes];
-
-exports.hydrateKeyframes = hydrateKeyframes;
-exports.keyframesList = keyframesList;