motion 10.2.1 → 10.3.0

package/dist/motion.umd.js

@@ -8,9 +8,10 @@
     function getAnimationData(element) {
         if (!data.has(element)) {
             data.set(element, {
-                activeTransforms: [],
-                activeAnimations: {},
-                activeGenerators: {},
+                transforms: [],
+                animations: {},
+                generators: {},
+                prevGeneratorState: {},
             });
         }
         return data.get(element);
@@ -61,7 +62,7 @@
         },
         skew: rotation,
     };
-    const transformPropertyDefinitions = new Map();
+    const transformDefinitions = new Map();
     const asTransformCssVar = (name) => `--motion-${name}`;
     /**
      * Generate a list of every possible transform key
@@ -70,7 +71,7 @@
     order.forEach((name) => {
         axes.forEach((axis) => {
             transforms.push(name + axis);
-            transformPropertyDefinitions.set(asTransformCssVar(name + axis), baseTransformProperties[name]);
+            transformDefinitions.set(asTransformCssVar(name + axis), baseTransformProperties[name]);
         });
     });
     /**
@@ -83,11 +84,14 @@
     const transformLookup = new Set(transforms);
     const isTransform = (name) => transformLookup.has(name);
     const addTransformToElement = (element, name) => {
-        const { activeTransforms } = getAnimationData(element);
-        addUniqueItem(activeTransforms, name);
-        element.style.transform = buildTransformTemplate(activeTransforms);
+        // 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 = (activeTransforms) => activeTransforms
+    const buildTransformTemplate = (transforms) => transforms
         .sort(compareTransformOrder)
         .reduce(transformListToString, "")
         .trim();
@@ -100,8 +104,8 @@
             return;
         registeredProperties.add(name);
         try {
-            const { syntax, initialValue } = transformPropertyDefinitions.has(name)
-                ? transformPropertyDefinitions.get(name)
+            const { syntax, initialValue } = transformDefinitions.has(name)
+                ? transformDefinitions.get(name)
                 : {};
             CSS.registerProperty({
                 name,
@@ -115,20 +119,10 @@
 
     const ms = (seconds) => seconds * 1000;
 
-    function stopAnimation(animation) {
-        // 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) { }
-    }
+    const isNumber = (value) => typeof value === "number";
 
-    const isCubicBezier = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
-    const isEasingList = (easing) => Array.isArray(easing) && typeof easing[0] !== "number";
+    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;
@@ -151,21 +145,17 @@
         finished: () => Boolean(testAnimation({ opacity: [0, 1] }).finished),
     };
     const results = {};
-    const supports = Object.keys(featureTests).reduce((acc, key) => {
-        acc[key] = () => {
+    const supports = {};
+    for (const key in featureTests) {
+        supports[key] = () => {
             if (results[key] === undefined)
                 results[key] = featureTests[key]();
             return results[key];
         };
-        return acc;
-    }, {});
+    }
 
-    const createCssVariableRenderer = (element, name) => {
-        return (latest) => element.style.setProperty(name, latest);
-    };
-    const createStyleRenderer = (element, name) => {
-        return (latest) => (element.style[name] = latest);
-    };
+    const cssVariableRenderer = (element, name) => (latest) => element.style.setProperty(name, latest);
+    const styleRenderer = (element, name) => (latest) => (element.style[name] = latest);
 
     const defaults = {
         duration: 0.3,
@@ -349,8 +339,8 @@
         };
     }
 
-    class Animation {
-        constructor(output, keyframes, { easing = defaults.easing, duration = defaults.duration, delay = defaults.delay, endDelay = defaults.endDelay, repeat = defaults.repeat, offset, direction = "normal", }) {
+    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;
@@ -361,54 +351,69 @@
                 this.reject = reject;
             });
             const totalDuration = duration * (repeat + 1);
-            // TODO: This isn't currently supported but keeps TypeScript happy
-            if (isCustomEasing(easing)) {
+            /**
+             * 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.playState === "finished") {
-                    const latest = interpolate(1);
-                    output(latest);
-                    this.resolve(latest);
-                    return;
-                }
-                if (this.pauseTime) {
+                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 (iterationProgress === 1) {
-                    currentIteration--;
-                }
-                // Reverse progress
+                /**
+                 * 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 interpolationIsFinished = t >= totalDuration;
-                const interpolationProgress = interpolationIsFinished
-                    ? 1
-                    : Math.min(iterationProgress, 1);
-                const latest = interpolate(interpolationProgress);
+                const latest = interpolate(t >= totalDuration ? 1 : Math.min(iterationProgress, 1));
                 output(latest);
-                const isFinished = t >= totalDuration + endDelay;
-                if (isFinished) {
+                const isAnimationFinished = this.playState === "finished" || t >= totalDuration + endDelay;
+                if (isAnimationFinished) {
                     this.playState = "finished";
                     this.resolve(latest);
                 }
@@ -467,9 +472,16 @@
             this.rate = rate;
         }
     }
-    function animateNumber(output, keyframes = [0, 1], options = {}) {
-        return new Animation(output, keyframes, options);
+
+    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];
 
     const style = {
         get: (element, name) => {
@@ -477,7 +489,7 @@
                 ? element.style.getPropertyValue(name)
                 : getComputedStyle(element)[name];
             if (!value && value !== 0) {
-                const definition = transformPropertyDefinitions.get(name);
+                const definition = transformDefinitions.get(name);
                 if (definition)
                     value = definition.initialValue;
             }
@@ -485,179 +497,188 @@
         },
     };
 
-    function hydrateKeyframes(keyframes, element, name) {
-        for (let i = 0; i < keyframes.length; i++) {
-            if (keyframes[i] === null) {
-                keyframes[i] = i ? keyframes[i - 1] : style.get(element, name);
-            }
+    function getStyleName(key) {
+        if (transformAlias[key])
+            key = transformAlias[key];
+        return isTransform(key) ? asTransformCssVar(key) : key;
+    }
+
+    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();
         }
-        return keyframes;
+        catch (e) { }
     }
-    const keyframesList = (keyframes) => Array.isArray(keyframes) ? keyframes : [keyframes];
 
-    function animateStyle(element, name, keyframesDefinition, options = {}) {
+    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(name);
+        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
          */
-        if (valueIsTransform) {
-            if (transformAlias[name])
-                name = transformAlias[name];
-            addTransformToElement(element, name);
-            name = asTransformCssVar(name);
-        }
+        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 = transformPropertyDefinitions.get(name);
-        /**
-         * Replace null values with the previous keyframe value, or read
-         * it from the DOM if it's the first keyframe.
-         *
-         * TODO: This needs to come after the valueIsTransform
-         * check so it can correctly read the underlying value.
-         * Should make a test for this.
-         */
-        let keyframes = hydrateKeyframes(keyframesList(keyframesDefinition), element, name);
-        if (isCustomEasing(easing)) {
-            const custom = easing.createAnimation(keyframes, () => style.get(element, name), valueIsTransform, name, data);
-            easing = custom.easing;
-            if (custom.keyframes)
-                keyframes = custom.keyframes;
-            if (custom.duration)
-                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 = createCssVariableRenderer(element, name);
-            if (supports.cssRegisterProperty()) {
-                registerCssVariable(name);
-            }
-            else {
-                canAnimateNatively = false;
-            }
-        }
-        else {
-            render = createStyleRenderer(element, name);
-        }
+        const definition = transformDefinitions.get(name);
         /**
-         * Stop the current animation, if any, after we have the
-         * opportunity to use its data to generate velocity for
-         * the subsequent animation.
+         * 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,
          */
-        stopCurrentAnimation(data, name);
+        stopAnimation(data.animations[name]);
         /**
-         * If we can animate this value with WAAPI, do so. Currently this only
-         * feature detects CSS.registerProperty but could check WAAPI too.
+         * Batchable factory function containing all DOM reads.
          */
-        if (canAnimateNatively) {
+        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; };
             /**
-             * Convert numbers to default value types. Currently this only supports
-             * transforms but it could also support other value types.
+             * Replace null values with the previous keyframe value, or read
+             * it from the DOM if it's the first keyframe.
              */
-            if (definition) {
-                keyframes = keyframes.map((value) => typeof value === "number" ? definition.toDefaultUnit(value) : value);
-            }
-            if (!supports.partialKeyframes() && keyframes.length === 1) {
-                keyframes.unshift(style.get(element, name));
+            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;
             }
-            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 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 (!animation.finished) {
-                animation.finished = new Promise((resolve, reject) => {
-                    animation.onfinish = resolve;
-                    animation.oncancel = reject;
-                });
+            if (isCssVar(name)) {
+                render = cssVariableRenderer(element, name);
+                if (supports.cssRegisterProperty()) {
+                    registerCssVariable(name);
+                }
+                else {
+                    canAnimateNatively = false;
+                }
+            }
+            else {
+                render = styleRenderer(element, name);
             }
-            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 we can animate this value with WAAPI, do so. Currently this only
+             * feature detects CSS.registerProperty but could check WAAPI too.
              */
-            if (!allowWebkitAcceleration)
-                animation.playbackRate = 1.000001;
-        }
-        else if (valueIsTransform && keyframes.every(isNumber)) {
-            if (keyframes.length === 1) {
-                keyframes.unshift(style.get(element, name) || (definition === null || definition === void 0 ? void 0 : definition.initialValue) || 0);
+            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;
             /**
-             * Transform styles are currently only accepted as numbers of
-             * their default value type, so here we loop through and map
-             * them to numbers.
+             * When an animation finishes, delete the reference to the previous animation.
              */
-            keyframes = keyframes.map((value) => typeof value === "string" ? parseFloat(value) : value);
-            if (definition) {
-                const applyStyle = render;
-                render = (v) => applyStyle(definition.toDefaultUnit(v));
-            }
-            animation = animateNumber(render, keyframes, Object.assign(Object.assign({}, options), { duration,
-                easing }));
-        }
-        else {
-            const target = keyframes[keyframes.length - 1];
-            render(definition && typeof target === "number"
-                ? definition.toDefaultUnit(target)
-                : target);
-        }
-        data.activeAnimations[name] = animation;
-        /**
-         * When an animation finishes, delete the reference to the previous animation.
-         */
-        animation === null || animation === void 0 ? void 0 : animation.finished.then(() => clearData(data, name)).catch(noop);
-        return animation;
-    }
-    function stopCurrentAnimation(data, name) {
-        if (data.activeAnimations[name]) {
-            stopAnimation(data.activeAnimations[name]);
-            clearData(data, name);
-        }
-    }
-    function clearData(data, name) {
-        data.activeGenerators[name] = data.activeAnimations[name] = undefined;
+            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;
+        };
     }
-    const isNumber = (value) => typeof value === "number";
 
-    const getOptions = (options, key) => options[key] ? Object.assign(Object.assign({}, options), options[key]) : Object.assign({}, options);
+    const getOptions = (options, key) => options[key] ? Object.assign(Object.assign({}, options), options[key]) : options;
 
     function resolveElements(elements, selectorCache) {
         var _a;
@@ -676,7 +697,11 @@
         return Array.from(elements);
     }
 
-    const createAnimationControls = (animations, duration) => new Proxy({ animations, duration }, controls);
+    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
@@ -723,7 +748,7 @@
 
     function stagger(duration = 0.1, { start = 0, from = 0, easing } = {}) {
         return (i, total) => {
-            const fromIndex = typeof from === "number" ? from : getFromIndex(from, total);
+            const fromIndex = isNumber(from) ? from : getFromIndex(from, total);
             const distance = Math.abs(fromIndex - i);
             let delay = duration * distance;
             if (easing) {
@@ -752,19 +777,30 @@
     function animate(elements, keyframes, options = {}) {
         var _a;
         elements = resolveElements(elements);
-        const animations = [];
         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);
-                animation && animations.push(animation);
+                animationFactories.push(animation);
             }
         }
-        return createAnimationControls(animations, 
-        // TODO: Remove this in case duration is dynamically generated
+        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);
     }
 
@@ -797,7 +833,7 @@
 
     function calcNextTime(current, next, prev, labels) {
         var _a;
-        if (typeof next === "number") {
+        if (isNumber(next)) {
             return next;
         }
         else if (next.startsWith("-") || next.startsWith("+")) {
@@ -848,13 +884,14 @@
 
     function timeline(definition, options = {}) {
         var _a, _b;
-        const animations = [];
         const animationDefinitions = createAnimationsFromTimeline(definition, options);
-        for (let i = 0; i < animationDefinitions.length; i++) {
-            const animation = animateStyle(...animationDefinitions[i]);
-            animation && animations.push(animation);
-        }
-        return createAnimationControls(animations, 
+        /**
+         * 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);
     }
@@ -1009,6 +1046,11 @@
         return frameDuration ? velocity * (1000 / frameDuration) : 0;
     }
 
+    function hasReachedTarget(origin, target, current) {
+        return ((origin < target && current >= target) ||
+            (origin > target && current <= target));
+    }
+
     const defaultStiffness = 100.0;
     const defaultDamping = 10.0;
     const defaultMass = 1.0;
@@ -1016,15 +1058,17 @@
     const calcAngularFreq = (undampedFreq, dampingRatio) => undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
     const createSpringGenerator = ({ stiffness = defaultStiffness, damping = defaultDamping, mass = defaultMass, from = 0, to = 1, velocity = 0.0, restSpeed = 2, restDistance = 0.5, } = {}) => {
         velocity = velocity ? velocity / 1000 : 0.0;
-        const dampingRatio = calcDampingRatio(stiffness, damping, mass);
-        const initialDelta = to - from;
-        const undampedAngularFreq = Math.sqrt(stiffness / mass) / 1000;
-        const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
         const state = {
             done: false,
             value: from,
+            target: to,
             velocity,
+            hasReachedTarget: false,
         };
+        const dampingRatio = calcDampingRatio(stiffness, damping, mass);
+        const initialDelta = to - from;
+        const undampedAngularFreq = Math.sqrt(stiffness / mass) / 1000;
+        const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
         let resolveSpring;
         if (dampingRatio < 1) {
             // Underdamped spring (bouncy)
@@ -1049,6 +1093,7 @@
                 const isBelowVelocityThreshold = Math.abs(state.velocity) <= restSpeed;
                 const isBelowDisplacementThreshold = Math.abs(to - state.value) <= restDistance;
                 state.done = isBelowVelocityThreshold && isBelowDisplacementThreshold;
+                state.hasReachedTarget = hasReachedTarget(from, to, state.value);
                 return state;
             },
         };
@@ -1060,24 +1105,27 @@
     }
 
     const timeStep = 10;
-    const maxDuration = 3000;
-    function pregenerateKeyframes(generator, origin, target) {
-        const keyframes = [];
+    const maxDuration = 10000;
+    function pregenerateKeyframes(generator) {
         let overshootDuration = undefined;
-        let timestamp = 0;
+        let timestamp = timeStep;
         let state = generator.next(0);
+        const keyframes = [state.value];
         while (!state.done && timestamp < maxDuration) {
             state = generator.next(timestamp);
-            keyframes.push(state.done ? target : state.value);
-            if (overshootDuration === undefined) {
-                if ((origin < target && state.value >= target) ||
-                    (origin > target && state.value <= target)) {
-                    overshootDuration = timestamp;
-                }
+            keyframes.push(state.done ? state.target : state.value);
+            if (overshootDuration === undefined && state.hasReachedTarget) {
+                overshootDuration = timestamp;
             }
             timestamp += timeStep;
         }
         const duration = timestamp - timeStep;
+        /**
+         * If generating an animation that didn't actually move,
+         * generate a second keyframe so we have an origin and target.
+         */
+        if (keyframes.length === 1)
+            keyframes.push(state.value);
         return {
             keyframes,
             duration: duration / 1000,
@@ -1085,70 +1133,168 @@
         };
     }
 
-    function spring(options = {}) {
-        const springCache = new Map();
+    function createGeneratorEasing(createGenerator) {
         const keyframesCache = new WeakMap();
-        const getSpring = (from = 0, to = 100, velocity = 0, isScale = false) => {
-            const key = `${from}-${to}-${velocity}-${isScale}`;
-            if (!springCache.has(key)) {
-                springCache.set(key, createSpringGenerator(Object.assign({ from,
-                    to,
-                    velocity, restSpeed: isScale ? 0.05 : 2, restDistance: isScale ? 0.01 : 0.5 }, options)));
-            }
-            return springCache.get(key);
+        return (options = {}) => {
+            const generatorCache = new Map();
+            const getGenerator = (from = 0, to = 100, velocity = 0, isScale = false) => {
+                const key = `${from}-${to}-${velocity}-${isScale}`;
+                if (!generatorCache.has(key)) {
+                    generatorCache.set(key, createGenerator(Object.assign({ from,
+                        to,
+                        velocity, restSpeed: isScale ? 0.05 : 2, restDistance: isScale ? 0.01 : 0.5 }, options)));
+                }
+                return generatorCache.get(key);
+            };
+            const getKeyframes = (generator) => {
+                if (!keyframesCache.has(generator)) {
+                    keyframesCache.set(generator, pregenerateKeyframes(generator));
+                }
+                return keyframesCache.get(generator);
+            };
+            return {
+                createAnimation: (keyframes, getOrigin, canUseGenerator, name, data) => {
+                    let settings;
+                    let generator;
+                    const numKeyframes = keyframes.length;
+                    let shouldUseGenerator = canUseGenerator &&
+                        numKeyframes <= 2 &&
+                        keyframes.every(isNumberOrNull);
+                    if (shouldUseGenerator) {
+                        const prevAnimationState = name && data && data.prevGeneratorState[name];
+                        const velocity = prevAnimationState &&
+                            (numKeyframes === 1 ||
+                                (numKeyframes === 2 && keyframes[0] === null))
+                            ? prevAnimationState.velocity
+                            : 0;
+                        const target = keyframes[numKeyframes - 1];
+                        const unresolvedOrigin = numKeyframes === 1 ? null : keyframes[0];
+                        const origin = unresolvedOrigin === null
+                            ? prevAnimationState
+                                ? prevAnimationState.value
+                                : parseFloat(getOrigin())
+                            : unresolvedOrigin;
+                        generator = getGenerator(origin, target, velocity, name === null || name === void 0 ? void 0 : name.includes("scale"));
+                        const keyframesMetadata = getKeyframes(generator);
+                        settings = Object.assign(Object.assign({}, keyframesMetadata), { easing: "linear" });
+                    }
+                    else {
+                        generator = getGenerator(0, 100);
+                        const keyframesMetadata = getKeyframes(generator);
+                        settings = {
+                            easing: "ease",
+                            duration: keyframesMetadata.overshootDuration,
+                        };
+                    }
+                    // TODO Add test for this
+                    if (generator && data && name) {
+                        data.generators[name] = generator;
+                    }
+                    return settings;
+                },
+            };
         };
-        const getKeyframes = (generator, origin, target) => {
-            if (!keyframesCache.has(generator)) {
-                keyframesCache.set(generator, pregenerateKeyframes(generator, origin, target));
-            }
-            return keyframesCache.get(generator);
+    }
+    const isNumberOrNull = (value) => typeof value !== "string";
+
+    const spring = createGeneratorEasing(createSpringGenerator);
+
+    const createGlideGenerator = ({ from = 0, velocity = 0.0, power = 0.8, decay = 0.325, bounceDamping, bounceStiffness, changeTarget, min, max, restDistance = 0.5, restSpeed, }) => {
+        decay = 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 : 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 = createSpringGenerator({
+                from: state.value,
+                to: nearestBoundary(state.value),
+                velocity: state.velocity,
+                damping: bounceDamping,
+                stiffness: bounceStiffness,
+                restDistance,
+                restSpeed,
+            });
+        };
+        checkCatchBoundary(0);
         return {
-            createAnimation: (keyframes, getOrigin, canUseRealSpring, name, data) => {
-                let settings;
-                let spring;
-                const numKeyframes = keyframes.length;
-                let shouldUseRealSpring = canUseRealSpring && numKeyframes <= 2 && keyframes.every(isNumberOrNull);
-                if (shouldUseRealSpring) {
-                    const prevAnimationState = name && data && getPreviousAnimationState(name, data);
-                    const velocity = prevAnimationState &&
-                        (numKeyframes === 1 || (numKeyframes === 2 && keyframes[0] === null))
-                        ? prevAnimationState.velocity
-                        : 0;
-                    const target = keyframes[numKeyframes - 1];
-                    const unresolvedOrigin = numKeyframes === 1 ? null : keyframes[0];
-                    const origin = unresolvedOrigin === null
-                        ? prevAnimationState
-                            ? prevAnimationState.value
-                            : parseFloat(getOrigin())
-                        : unresolvedOrigin;
-                    spring = getSpring(origin, target, velocity, name === null || name === void 0 ? void 0 : name.includes("scale"));
-                    const keyframesMetadata = getKeyframes(spring, origin, target);
-                    settings = Object.assign(Object.assign({}, keyframesMetadata), { easing: "linear" });
+            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 {
-                    spring = getSpring(0, 100);
-                    const keyframesMetadata = getKeyframes(spring, 0, 100);
-                    settings = {
-                        easing: "ease",
-                        duration: keyframesMetadata.overshootDuration,
-                    };
+                    state.hasReachedTarget = false;
+                    !hasUpdatedFrame && applyFriction(t);
+                    return state;
                 }
-                return settings;
             },
         };
-    }
-    function getPreviousAnimationState(name, data) {
-        const animation = data.activeAnimations[name];
-        const generator = data.activeGenerators[name];
-        if (animation && generator) {
-            return generator.next(animation.currentTime);
-        }
-    }
-    const isNumberOrNull = (value) => typeof value !== "string";
+    };
+
+    const glide = createGeneratorEasing(createGlideGenerator);
 
     exports.animate = animate;
     exports.animateStyle = animateStyle;
+    exports.glide = glide;
     exports.spring = spring;
     exports.stagger = stagger;
     exports.timeline = timeline;