motion 10.3.1 → 10.5.0-alpha.2

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.cancelT = 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.cancelT);
-        this.reject(false);
-    }
-    reverse() {
-        this.rate *= -1;
-    }
-    commitStyles() {
-        this.cancelT = this.t;
-    }
-    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.cancelT = 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.cancelT);
-        this.reject(false);
-    }
-    reverse() {
-        this.rate *= -1;
-    }
-    commitStyles() {
-        this.cancelT = this.t;
-    }
-    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 };

package/dist/targets/js/easing/glide/generator.cjs.js

@@ -1,99 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var generator = require('../spring/generator.cjs.js');
-var time = require('../../../dom/utils/time.cjs.js');
-
-const createGlideGenerator = ({ from = 0, velocity = 0.0, power = 0.8, decay = 0.325, bounceDamping, bounceStiffness, changeTarget, min, max, restDistance = 0.5, restSpeed, }) => {
-    decay = time.ms(decay);
-    const state = {
-        value: from,
-        target: from,
-        velocity,
-        hasReachedTarget: false,
-        done: false,
-    };
-    const isOutOfBounds = (v) => (min !== undefined && v < min) || (max !== undefined && v > max);
-    const nearestBoundary = (v) => {
-        if (min === undefined)
-            return max;
-        if (max === undefined)
-            return min;
-        return Math.abs(min - v) < Math.abs(max - v) ? min : max;
-    };
-    let amplitude = power * velocity;
-    const ideal = from + amplitude;
-    const target = changeTarget === undefined ? ideal : changeTarget(ideal);
-    state.target = target;
-    /**
-     * If the target has changed we need to re-calculate the amplitude, otherwise
-     * the animation will start from the wrong position.
-     */
-    if (target !== ideal)
-        amplitude = target - from;
-    const calcDelta = (t) => -amplitude * Math.exp(-t / decay);
-    const calcLatest = (t) => target + calcDelta(t);
-    const applyFriction = (t) => {
-        const delta = calcDelta(t);
-        const latest = calcLatest(t);
-        state.done = Math.abs(delta) <= restDistance;
-        state.value = state.done ? target : latest;
-        state.velocity =
-            t === 0 ? velocity : generator.calcVelocity(calcLatest, t, state.value);
-    };
-    /**
-     * Ideally this would resolve for t in a stateless way, we could
-     * do that by always precalculating the animation but as we know
-     * this will be done anyway we can assume that spring will
-     * be discovered during that.
-     */
-    let timeReachedBoundary;
-    let spring;
-    const checkCatchBoundary = (t) => {
-        if (!isOutOfBounds(state.value))
-            return;
-        timeReachedBoundary = t;
-        spring = generator.createSpringGenerator({
-            from: state.value,
-            to: nearestBoundary(state.value),
-            velocity: state.velocity,
-            damping: bounceDamping,
-            stiffness: bounceStiffness,
-            restDistance,
-            restSpeed,
-        });
-    };
-    checkCatchBoundary(0);
-    return {
-        next: (t) => {
-            /**
-             * We need to resolve the friction to figure out if we need a
-             * spring but we don't want to do this twice per frame. So here
-             * we flag if we updated for this frame and later if we did
-             * we can skip doing it again.
-             */
-            let hasUpdatedFrame = false;
-            if (!spring && timeReachedBoundary === undefined) {
-                hasUpdatedFrame = true;
-                applyFriction(t);
-                checkCatchBoundary(t);
-            }
-            /**
-             * If we have a spring and the provided t is beyond the moment the friction
-             * animation crossed the min/max boundary, use the spring.
-             */
-            if (timeReachedBoundary !== undefined && t > timeReachedBoundary) {
-                state.hasReachedTarget = true;
-                return spring.next(t - timeReachedBoundary);
-            }
-            else {
-                state.hasReachedTarget = false;
-                !hasUpdatedFrame && applyFriction(t);
-                return state;
-            }
-        },
-    };
-};
-
-exports.createGlideGenerator = createGlideGenerator;