motion 10.4.0 → 10.5.0-alpha.4

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

@@ -1,11 +0,0 @@
-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];
-
-export { hydrateKeyframes, keyframesList };

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

@@ -1,13 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const getOptions = (options, key) => 
-/**
- * TODO: Make test for this
- * Always return a new object otherwise delay is overwritten by results of stagger
- * and this results in no stagger
- */
-options[key] ? Object.assign(Object.assign({}, options), options[key]) : Object.assign({}, options);
-
-exports.getOptions = getOptions;

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

@@ -1,9 +0,0 @@
-const getOptions = (options, key) => 
-/**
- * TODO: Make test for this
- * Always return a new object otherwise delay is overwritten by results of stagger
- * and this results in no stagger
- */
-options[key] ? Object.assign(Object.assign({}, options), options[key]) : Object.assign({}, options);
-
-export { getOptions };

package/dist/targets/dom/utils/resolve-elements.cjs.js

@@ -1,22 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function resolveElements(elements, selectorCache) {
-    var _a;
-    if (typeof elements === "string") {
-        if (selectorCache) {
-            (_a = selectorCache[elements]) !== null && _a !== void 0 ? _a : (selectorCache[elements] = document.querySelectorAll(elements));
-            elements = selectorCache[elements];
-        }
-        else {
-            elements = document.querySelectorAll(elements);
-        }
-    }
-    else if (elements instanceof Element) {
-        elements = [elements];
-    }
-    return Array.from(elements);
-}
-
-exports.resolveElements = resolveElements;

package/dist/targets/dom/utils/resolve-elements.es.js

@@ -1,18 +0,0 @@
-function resolveElements(elements, selectorCache) {
-    var _a;
-    if (typeof elements === "string") {
-        if (selectorCache) {
-            (_a = selectorCache[elements]) !== null && _a !== void 0 ? _a : (selectorCache[elements] = document.querySelectorAll(elements));
-            elements = selectorCache[elements];
-        }
-        else {
-            elements = document.querySelectorAll(elements);
-        }
-    }
-    else if (elements instanceof Element) {
-        elements = [elements];
-    }
-    return Array.from(elements);
-}
-
-export { resolveElements };

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

@@ -1,19 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function stopAnimation(animation) {
-    if (!animation)
-        return;
-    // Suppress error thrown by WAAPI
-    try {
-        /**
-         * commitStyles has overhead so we only want to commit and cancel
-         */
-        animation.playState !== "finished" && animation.commitStyles();
-        animation.cancel();
-    }
-    catch (e) { }
-}
-
-exports.stopAnimation = stopAnimation;

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

@@ -1,15 +0,0 @@
-function stopAnimation(animation) {
-    if (!animation)
-        return;
-    // Suppress error thrown by WAAPI
-    try {
-        /**
-         * commitStyles has overhead so we only want to commit and cancel
-         */
-        animation.playState !== "finished" && animation.commitStyles();
-        animation.cancel();
-    }
-    catch (e) { }
-}
-
-export { stopAnimation };

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

@@ -1,7 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const ms = (seconds) => seconds * 1000;
-
-exports.ms = ms;

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

@@ -1,3 +0,0 @@
-const ms = (seconds) => seconds * 1000;
-
-export { ms };

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

@@ -1,85 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var array = require('../../../utils/array.cjs.js');
-var noop = require('../../../utils/noop.cjs.js');
-var data = require('../data.cjs.js');
-
-/**
- * A list of all transformable axes. We'll use this list to generated a version
- * of each axes for each transform.
- */
-const axes = ["", "X", "Y", "Z"];
-/**
- * An ordered array of each transformable value. By default, transform values
- * will be sorted to this order.
- */
-const order = ["translate", "scale", "rotate", "skew"];
-const transformAlias = {
-    x: "translateX",
-    y: "translateY",
-    z: "translateZ",
-};
-const rotation = {
-    syntax: "<angle>",
-    initialValue: "0deg",
-    toDefaultUnit: (v) => v + "deg",
-};
-const baseTransformProperties = {
-    translate: {
-        syntax: "<length-percentage>",
-        initialValue: "0px",
-        toDefaultUnit: (v) => v + "px",
-    },
-    rotate: rotation,
-    scale: {
-        syntax: "<number>",
-        initialValue: 1,
-        toDefaultUnit: noop.noopReturn,
-    },
-    skew: rotation,
-};
-const transformDefinitions = new Map();
-const asTransformCssVar = (name) => `--motion-${name}`;
-/**
- * Generate a list of every possible transform key
- */
-const transforms = ["x", "y", "z"];
-order.forEach((name) => {
-    axes.forEach((axis) => {
-        transforms.push(name + axis);
-        transformDefinitions.set(asTransformCssVar(name + axis), baseTransformProperties[name]);
-    });
-});
-/**
- * A function to use with Array.sort to sort transform keys by their default order.
- */
-const compareTransformOrder = (a, b) => transforms.indexOf(a) - transforms.indexOf(b);
-/**
- * Provide a quick way to check if a string is the name of a transform
- */
-const transformLookup = new Set(transforms);
-const isTransform = (name) => transformLookup.has(name);
-const addTransformToElement = (element, name) => {
-    // Map x to translateX etc
-    if (transformAlias[name])
-        name = transformAlias[name];
-    const { transforms } = data.getAnimationData(element);
-    array.addUniqueItem(transforms, name);
-    element.style.transform = buildTransformTemplate(transforms);
-};
-const buildTransformTemplate = (transforms) => transforms
-    .sort(compareTransformOrder)
-    .reduce(transformListToString, "")
-    .trim();
-const transformListToString = (template, name) => `${template} ${name}(var(${asTransformCssVar(name)}))`;
-
-exports.addTransformToElement = addTransformToElement;
-exports.asTransformCssVar = asTransformCssVar;
-exports.axes = axes;
-exports.buildTransformTemplate = buildTransformTemplate;
-exports.compareTransformOrder = compareTransformOrder;
-exports.isTransform = isTransform;
-exports.transformAlias = transformAlias;
-exports.transformDefinitions = transformDefinitions;

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

@@ -1,74 +0,0 @@
-import { addUniqueItem } from '../../../utils/array.es.js';
-import { noopReturn } from '../../../utils/noop.es.js';
-import { getAnimationData } from '../data.es.js';
-
-/**
- * A list of all transformable axes. We'll use this list to generated a version
- * of each axes for each transform.
- */
-const axes = ["", "X", "Y", "Z"];
-/**
- * An ordered array of each transformable value. By default, transform values
- * will be sorted to this order.
- */
-const order = ["translate", "scale", "rotate", "skew"];
-const transformAlias = {
-    x: "translateX",
-    y: "translateY",
-    z: "translateZ",
-};
-const rotation = {
-    syntax: "<angle>",
-    initialValue: "0deg",
-    toDefaultUnit: (v) => v + "deg",
-};
-const baseTransformProperties = {
-    translate: {
-        syntax: "<length-percentage>",
-        initialValue: "0px",
-        toDefaultUnit: (v) => v + "px",
-    },
-    rotate: rotation,
-    scale: {
-        syntax: "<number>",
-        initialValue: 1,
-        toDefaultUnit: noopReturn,
-    },
-    skew: rotation,
-};
-const transformDefinitions = new Map();
-const asTransformCssVar = (name) => `--motion-${name}`;
-/**
- * Generate a list of every possible transform key
- */
-const transforms = ["x", "y", "z"];
-order.forEach((name) => {
-    axes.forEach((axis) => {
-        transforms.push(name + axis);
-        transformDefinitions.set(asTransformCssVar(name + axis), baseTransformProperties[name]);
-    });
-});
-/**
- * A function to use with Array.sort to sort transform keys by their default order.
- */
-const compareTransformOrder = (a, b) => transforms.indexOf(a) - transforms.indexOf(b);
-/**
- * Provide a quick way to check if a string is the name of a transform
- */
-const transformLookup = new Set(transforms);
-const isTransform = (name) => transformLookup.has(name);
-const addTransformToElement = (element, name) => {
-    // Map x to translateX etc
-    if (transformAlias[name])
-        name = transformAlias[name];
-    const { transforms } = getAnimationData(element);
-    addUniqueItem(transforms, name);
-    element.style.transform = buildTransformTemplate(transforms);
-};
-const buildTransformTemplate = (transforms) => transforms
-    .sort(compareTransformOrder)
-    .reduce(transformListToString, "")
-    .trim();
-const transformListToString = (template, name) => `${template} ${name}(var(${asTransformCssVar(name)}))`;
-
-export { addTransformToElement, asTransformCssVar, axes, buildTransformTemplate, compareTransformOrder, isTransform, transformAlias, transformDefinitions };

package/dist/targets/js/NumberAnimation.cjs.js

@@ -1,144 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var defaults = require('../dom/utils/defaults.cjs.js');
-var easing = require('../dom/utils/easing.cjs.js');
-var getFunction = require('./easing/utils/get-function.cjs.js');
-var interpolate = require('./utils/interpolate.cjs.js');
-
-class NumberAnimation {
-    constructor(output, keyframes = [0, 1], { easing: easing$1 = defaults.defaults.easing, duration = defaults.defaults.duration, delay = defaults.defaults.delay, endDelay = defaults.defaults.endDelay, repeat = defaults.defaults.repeat, offset, direction = "normal", } = {}) {
-        this.startTime = 0;
-        this.rate = 1;
-        this.t = 0;
-        this.cancelTimestamp = 0;
-        this.playState = "idle";
-        this.finished = new Promise((resolve, reject) => {
-            this.resolve = resolve;
-            this.reject = reject;
-        });
-        const totalDuration = duration * (repeat + 1);
-        /**
-         * We don't currently support custom easing (spring, glide etc) in NumberAnimation
-         * (although this is completely possible), so this will have been hydrated by
-         * animateStyle.
-         */
-        if (easing.isCustomEasing(easing$1))
-            easing$1 = "ease";
-        const interpolate$1 = interpolate.slowInterpolateNumbers(keyframes, offset, easing.isEasingList(easing$1)
-            ? easing$1.map(getFunction.getEasingFunction)
-            : getFunction.getEasingFunction(easing$1));
-        this.tick = (timestamp) => {
-            if (this.pauseTime)
-                timestamp = this.pauseTime;
-            let t = (timestamp - this.startTime) * this.rate;
-            this.t = t;
-            // Convert to seconds
-            t /= 1000;
-            // Rebase on delay
-            t = Math.max(t - delay, 0);
-            /**
-             * If this animation has finished, set the current time
-             * to the total duration.
-             */
-            if (this.playState === "finished")
-                t = totalDuration;
-            /**
-             * Get the current progress (0-1) of the animation. If t is >
-             * than duration we'll get values like 2.5 (midway through the
-             * third iteration)
-             */
-            const progress = t / duration;
-            // TODO progress += iterationStart
-            /**
-             * Get the current iteration (0 indexed). For instance the floor of
-             * 2.5 is 2.
-             */
-            let currentIteration = Math.floor(progress);
-            /**
-             * Get the current progress of the iteration by taking the remainder
-             * so 2.5 is 0.5 through iteration 2
-             */
-            let iterationProgress = progress % 1.0;
-            if (!iterationProgress && progress >= 1) {
-                iterationProgress = 1;
-            }
-            /**
-             * If iteration progress is 1 we count that as the end
-             * of the previous iteration.
-             */
-            iterationProgress === 1 && currentIteration--;
-            /**
-             * Reverse progress if we're not running in "normal" direction
-             */
-            const iterationIsOdd = currentIteration % 2;
-            if (direction === "reverse" ||
-                (direction === "alternate" && iterationIsOdd) ||
-                (direction === "alternate-reverse" && !iterationIsOdd)) {
-                iterationProgress = 1 - iterationProgress;
-            }
-            const latest = interpolate$1(t >= totalDuration ? 1 : Math.min(iterationProgress, 1));
-            output(latest);
-            const isAnimationFinished = this.playState === "finished" || t >= totalDuration + endDelay;
-            if (isAnimationFinished) {
-                this.playState = "finished";
-                this.resolve(latest);
-            }
-            else if (this.playState !== "idle") {
-                requestAnimationFrame(this.tick);
-            }
-        };
-        this.play();
-    }
-    play() {
-        const now = performance.now();
-        this.playState = "running";
-        if (this.pauseTime) {
-            this.startTime = now - (this.pauseTime - this.startTime);
-        }
-        else if (!this.startTime) {
-            this.startTime = now;
-        }
-        this.pauseTime = undefined;
-        requestAnimationFrame(this.tick);
-    }
-    pause() {
-        this.playState = "paused";
-        this.pauseTime = performance.now();
-    }
-    finish() {
-        this.playState = "finished";
-        this.tick(0);
-    }
-    cancel() {
-        this.playState = "idle";
-        this.tick(this.cancelTimestamp);
-        this.reject(false);
-    }
-    reverse() {
-        this.rate *= -1;
-    }
-    commitStyles() {
-        this.cancelTimestamp = performance.now();
-    }
-    get currentTime() {
-        return this.t;
-    }
-    set currentTime(t) {
-        if (this.pauseTime || this.rate === 0) {
-            this.pauseTime = t;
-        }
-        else {
-            this.startTime = performance.now() - t / this.rate;
-        }
-    }
-    get playbackRate() {
-        return this.rate;
-    }
-    set playbackRate(rate) {
-        this.rate = rate;
-    }
-}
-
-exports.NumberAnimation = NumberAnimation;

package/dist/targets/js/NumberAnimation.es.js

@@ -1,140 +0,0 @@
-import { defaults } from '../dom/utils/defaults.es.js';
-import { isCustomEasing, isEasingList } from '../dom/utils/easing.es.js';
-import { getEasingFunction } from './easing/utils/get-function.es.js';
-import { slowInterpolateNumbers } from './utils/interpolate.es.js';
-
-class NumberAnimation {
-    constructor(output, keyframes = [0, 1], { easing = defaults.easing, duration = defaults.duration, delay = defaults.delay, endDelay = defaults.endDelay, repeat = defaults.repeat, offset, direction = "normal", } = {}) {
-        this.startTime = 0;
-        this.rate = 1;
-        this.t = 0;
-        this.cancelTimestamp = 0;
-        this.playState = "idle";
-        this.finished = new Promise((resolve, reject) => {
-            this.resolve = resolve;
-            this.reject = reject;
-        });
-        const totalDuration = duration * (repeat + 1);
-        /**
-         * We don't currently support custom easing (spring, glide etc) in NumberAnimation
-         * (although this is completely possible), so this will have been hydrated by
-         * animateStyle.
-         */
-        if (isCustomEasing(easing))
-            easing = "ease";
-        const interpolate = slowInterpolateNumbers(keyframes, offset, isEasingList(easing)
-            ? easing.map(getEasingFunction)
-            : getEasingFunction(easing));
-        this.tick = (timestamp) => {
-            if (this.pauseTime)
-                timestamp = this.pauseTime;
-            let t = (timestamp - this.startTime) * this.rate;
-            this.t = t;
-            // Convert to seconds
-            t /= 1000;
-            // Rebase on delay
-            t = Math.max(t - delay, 0);
-            /**
-             * If this animation has finished, set the current time
-             * to the total duration.
-             */
-            if (this.playState === "finished")
-                t = totalDuration;
-            /**
-             * Get the current progress (0-1) of the animation. If t is >
-             * than duration we'll get values like 2.5 (midway through the
-             * third iteration)
-             */
-            const progress = t / duration;
-            // TODO progress += iterationStart
-            /**
-             * Get the current iteration (0 indexed). For instance the floor of
-             * 2.5 is 2.
-             */
-            let currentIteration = Math.floor(progress);
-            /**
-             * Get the current progress of the iteration by taking the remainder
-             * so 2.5 is 0.5 through iteration 2
-             */
-            let iterationProgress = progress % 1.0;
-            if (!iterationProgress && progress >= 1) {
-                iterationProgress = 1;
-            }
-            /**
-             * If iteration progress is 1 we count that as the end
-             * of the previous iteration.
-             */
-            iterationProgress === 1 && currentIteration--;
-            /**
-             * Reverse progress if we're not running in "normal" direction
-             */
-            const iterationIsOdd = currentIteration % 2;
-            if (direction === "reverse" ||
-                (direction === "alternate" && iterationIsOdd) ||
-                (direction === "alternate-reverse" && !iterationIsOdd)) {
-                iterationProgress = 1 - iterationProgress;
-            }
-            const latest = interpolate(t >= totalDuration ? 1 : Math.min(iterationProgress, 1));
-            output(latest);
-            const isAnimationFinished = this.playState === "finished" || t >= totalDuration + endDelay;
-            if (isAnimationFinished) {
-                this.playState = "finished";
-                this.resolve(latest);
-            }
-            else if (this.playState !== "idle") {
-                requestAnimationFrame(this.tick);
-            }
-        };
-        this.play();
-    }
-    play() {
-        const now = performance.now();
-        this.playState = "running";
-        if (this.pauseTime) {
-            this.startTime = now - (this.pauseTime - this.startTime);
-        }
-        else if (!this.startTime) {
-            this.startTime = now;
-        }
-        this.pauseTime = undefined;
-        requestAnimationFrame(this.tick);
-    }
-    pause() {
-        this.playState = "paused";
-        this.pauseTime = performance.now();
-    }
-    finish() {
-        this.playState = "finished";
-        this.tick(0);
-    }
-    cancel() {
-        this.playState = "idle";
-        this.tick(this.cancelTimestamp);
-        this.reject(false);
-    }
-    reverse() {
-        this.rate *= -1;
-    }
-    commitStyles() {
-        this.cancelTimestamp = performance.now();
-    }
-    get currentTime() {
-        return this.t;
-    }
-    set currentTime(t) {
-        if (this.pauseTime || this.rate === 0) {
-            this.pauseTime = t;
-        }
-        else {
-            this.startTime = performance.now() - t / this.rate;
-        }
-    }
-    get playbackRate() {
-        return this.rate;
-    }
-    set playbackRate(rate) {
-        this.rate = rate;
-    }
-}
-
-export { NumberAnimation };

package/dist/targets/js/easing/cubic-bezier.cjs.js

@@ -1,57 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var noop = require('../../../utils/noop.cjs.js');
-
-/*
-  Bezier function generator
-
-  This has been modified from Gaëtan Renaudeau's BezierEasing
-  https://github.com/gre/bezier-easing/blob/master/src/index.js
-  https://github.com/gre/bezier-easing/blob/master/LICENSE
-  
-  I've removed the newtonRaphsonIterate algo because in benchmarking it
-  wasn't noticiably faster than binarySubdivision, indeed removing it
-  usually improved times, depending on the curve.
-
-  I also removed the lookup table, as for the added bundle size and loop we're
-  only cutting ~4 or so subdivision iterations. I bumped the max iterations up
-  to 12 to compensate and this still tended to be faster for no perceivable
-  loss in accuracy.
-
-  Usage
-    const easeOut = cubicBezier(.17,.67,.83,.67);
-    const x = easeOut(0.5); // returns 0.627...
-*/
-// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
-const calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) * t;
-const subdivisionPrecision = 0.0000001;
-const subdivisionMaxIterations = 12;
-function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
-    let currentX;
-    let currentT;
-    let i = 0;
-    do {
-        currentT = lowerBound + (upperBound - lowerBound) / 2.0;
-        currentX = calcBezier(currentT, mX1, mX2) - x;
-        if (currentX > 0.0) {
-            upperBound = currentT;
-        }
-        else {
-            lowerBound = currentT;
-        }
-    } while (Math.abs(currentX) > subdivisionPrecision &&
-        ++i < subdivisionMaxIterations);
-    return currentT;
-}
-function cubicBezier(mX1, mY1, mX2, mY2) {
-    // If this is a linear gradient, return linear easing
-    if (mX1 === mY1 && mX2 === mY2)
-        return noop.noopReturn;
-    const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
-    // If animation is at start/end, return t without easing
-    return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
-}
-
-exports.cubicBezier = cubicBezier;

package/dist/targets/js/easing/cubic-bezier.es.js

@@ -1,53 +0,0 @@
-import { noopReturn } from '../../../utils/noop.es.js';
-
-/*
-  Bezier function generator
-
-  This has been modified from Gaëtan Renaudeau's BezierEasing
-  https://github.com/gre/bezier-easing/blob/master/src/index.js
-  https://github.com/gre/bezier-easing/blob/master/LICENSE
-  
-  I've removed the newtonRaphsonIterate algo because in benchmarking it
-  wasn't noticiably faster than binarySubdivision, indeed removing it
-  usually improved times, depending on the curve.
-
-  I also removed the lookup table, as for the added bundle size and loop we're
-  only cutting ~4 or so subdivision iterations. I bumped the max iterations up
-  to 12 to compensate and this still tended to be faster for no perceivable
-  loss in accuracy.
-
-  Usage
-    const easeOut = cubicBezier(.17,.67,.83,.67);
-    const x = easeOut(0.5); // returns 0.627...
-*/
-// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
-const calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) * t;
-const subdivisionPrecision = 0.0000001;
-const subdivisionMaxIterations = 12;
-function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
-    let currentX;
-    let currentT;
-    let i = 0;
-    do {
-        currentT = lowerBound + (upperBound - lowerBound) / 2.0;
-        currentX = calcBezier(currentT, mX1, mX2) - x;
-        if (currentX > 0.0) {
-            upperBound = currentT;
-        }
-        else {
-            lowerBound = currentT;
-        }
-    } while (Math.abs(currentX) > subdivisionPrecision &&
-        ++i < subdivisionMaxIterations);
-    return currentT;
-}
-function cubicBezier(mX1, mY1, mX2, mY2) {
-    // If this is a linear gradient, return linear easing
-    if (mX1 === mY1 && mX2 === mY2)
-        return noopReturn;
-    const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
-    // If animation is at start/end, return t without easing
-    return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
-}
-
-export { cubicBezier };