motion 10.5.2 → 10.6.0-rc.5

package/dist/motion.umd.js

@@ -25,9 +25,62 @@
         index > -1 && arr.splice(index, 1);
     }
 
+    const clamp = (min, max, v) => Math.min(Math.max(v, min), max);
+
+    const defaults$1 = {
+        duration: 0.3,
+        delay: 0,
+        endDelay: 0,
+        repeat: 0,
+        easing: "ease",
+    };
+
+    const isNumber = (value) => typeof value === "number";
+    const isEasingGenerator = (easing) => typeof easing === "object" &&
+        Boolean(easing.createAnimation);
+    const isCubicBezier = (easing) => Array.isArray(easing) && isNumber(easing[0]);
+    const isEasingList = (easing) => Array.isArray(easing) && !isNumber(easing[0]);
+
+    const mix = (min, max, progress) => -progress * min + progress * max + min;
+
     const noop = () => { };
     const noopReturn = (v) => v;
 
+    const progress = (min, max, value) => max - min === 0 ? 1 : (value - min) / (max - min);
+
+    function fillOffset(offset, remaining) {
+        const min = offset[offset.length - 1];
+        for (let i = 1; i <= remaining; i++) {
+            const offsetProgress = progress(0, remaining, i);
+            offset.push(mix(min, 1, offsetProgress));
+        }
+    }
+    function defaultOffset(length) {
+        const offset = [0];
+        fillOffset(offset, length - 1);
+        return offset;
+    }
+
+    const time = {
+        ms: (seconds) => seconds * 1000,
+        s: (milliseconds) => milliseconds / 1000,
+    };
+
+    /*
+      Convert velocity into velocity per second
+
+      @param [number]: Unit per frame
+      @param [number]: Frame duration in ms
+    */
+    function velocityPerSecond(velocity, frameDuration) {
+        return frameDuration ? velocity * (1000 / frameDuration) : 0;
+    }
+
+    const wrap = (min, max, v) => {
+        const rangeSize = max - min;
+        return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
+    };
+
     /**
      * A list of all transformable axes. We'll use this list to generated a version
      * of each axes for each transform.
@@ -117,51 +170,6 @@
         catch (e) { }
     }
 
-    const ms = (seconds) => seconds * 1000;
-
-    const isNumber = (value) => typeof value === "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;
-    const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
-
-    const testAnimation = (keyframes) => document.createElement("div").animate(keyframes, { duration: 0.001 });
-    const featureTests = {
-        cssRegisterProperty: () => typeof CSS !== "undefined" &&
-            Object.hasOwnProperty.call(CSS, "registerProperty"),
-        waapi: () => Object.hasOwnProperty.call(Element.prototype, "animate"),
-        partialKeyframes: () => {
-            try {
-                testAnimation({ opacity: [1] });
-            }
-            catch (e) {
-                return false;
-            }
-            return true;
-        },
-        finished: () => Boolean(testAnimation({ opacity: [0, 1] }).finished),
-    };
-    const results = {};
-    const supports = {};
-    for (const key in featureTests) {
-        supports[key] = () => {
-            if (results[key] === undefined)
-                results[key] = featureTests[key]();
-            return results[key];
-        };
-    }
-
-    const defaults = {
-        duration: 0.3,
-        delay: 0,
-        endDelay: 0,
-        repeat: 0,
-        easing: "ease",
-    };
-
     /*
       Bezier function generator
 
@@ -212,11 +220,11 @@
         return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
     }
 
-    const clamp = (min, max, v) => Math.min(Math.max(v, min), max);
-
     const steps = (steps, direction = "end") => (progress) => {
         progress =
-            direction === "end" ? Math.min(progress, 0.999) : Math.max(progress, 0.001);
+            direction === "end"
+                ? Math.min(progress, 0.999)
+                : Math.max(progress, 0.001);
         const expanded = progress * steps;
         const rounded = direction === "end" ? Math.floor(expanded) : Math.ceil(expanded);
         return clamp(0, 1, rounded / steps);
@@ -249,71 +257,14 @@
         }
         return noopReturn;
     }
-
-    /*
-      Value in range from progress
-
-      Given a lower limit and an upper limit, we return the value within
-      that range as expressed by progress (usually a number from 0 to 1)
-
-      So progress = 0.5 would change
-
-      from -------- to
-
-      to
-
-      from ---- to
-
-      E.g. from = 10, to = 20, progress = 0.5 => 15
-
-      @param [number]: Lower limit of range
-      @param [number]: Upper limit of range
-      @param [number]: The progress between lower and upper limits expressed 0-1
-      @return [number]: Value as calculated from progress within range (not limited within range)
-    */
-    const mix = (from, to, progress) => -progress * from + progress * to + from;
-
-    /*
-      Progress within given range
-
-      Given a lower limit and an upper limit, we return the progress
-      (expressed as a number 0-1) represented by the given value.
-
-      @param [number]: Lower limit
-      @param [number]: Upper limit
-      @param [number]: Value to find progress within given range
-      @return [number]: Progress of value within range as expressed 0-1
-    */
-    const progress = (from, to, value) => {
-        return to - from === 0 ? 1 : (value - from) / (to - from);
-    };
-
-    const wrap = (min, max, v) => {
-        const rangeSize = max - min;
-        return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
-    };
-
     function getEasingForSegment(easing, i) {
         return isEasingList(easing)
             ? easing[wrap(0, easing.length, i)]
             : easing;
     }
 
-    function fillOffset(offset, remaining) {
-        const min = offset[offset.length - 1];
-        for (let i = 1; i <= remaining; i++) {
-            const offsetProgress = progress(0, remaining, i);
-            offset.push(mix(min, 1, offsetProgress));
-        }
-    }
-    function defaultOffset(length) {
-        const offset = [0];
-        fillOffset(offset, length - 1);
-        return offset;
-    }
-
     const clampProgress = (p) => Math.min(1, Math.max(p, 0));
-    function slowInterpolateNumbers(output, input = defaultOffset(output.length), easing = noopReturn) {
+    function interpolate(output, input = defaultOffset(output.length), easing = noopReturn) {
         const length = output.length;
         /**
          * If the input length is lower than the output we
@@ -336,8 +287,8 @@
         };
     }
 
-    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", } = {}) {
+    class Animation {
+        constructor(output, keyframes = [0, 1], { easing = defaults$1.easing, duration = defaults$1.duration, delay = defaults$1.delay, endDelay = defaults$1.endDelay, repeat = defaults$1.repeat, offset, direction = "normal", } = {}) {
             this.startTime = 0;
             this.rate = 1;
             this.t = 0;
@@ -348,14 +299,15 @@
                 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)
+            if (isEasingGenerator(easing)) {
+                const custom = easing.createAnimation(keyframes, () => "0", true);
+                easing = custom.easing;
+                if (custom.keyframes !== undefined)
+                    keyframes = custom.keyframes;
+                if (custom.duration !== undefined)
+                    duration = custom.duration;
+            }
+            const interpolate$1 = interpolate(keyframes, offset, isEasingList(easing)
                 ? easing.map(getEasingFunction)
                 : getEasingFunction(easing));
             this.tick = (timestamp) => {
@@ -408,7 +360,7 @@
                     (direction === "alternate-reverse" && !iterationIsOdd)) {
                     iterationProgress = 1 - iterationProgress;
                 }
-                const latest = interpolate(t >= totalDuration ? 1 : Math.min(iterationProgress, 1));
+                const latest = interpolate$1(t >= totalDuration ? 1 : Math.min(iterationProgress, 1));
                 output(latest);
                 const isAnimationFinished = this.playState === "finished" || t >= totalDuration + endDelay;
                 if (isAnimationFinished) {
@@ -416,7 +368,7 @@
                     (_a = this.resolve) === null || _a === void 0 ? void 0 : _a.call(this, latest);
                 }
                 else if (this.playState !== "idle") {
-                    requestAnimationFrame(this.tick);
+                    this.frameRequestId = requestAnimationFrame(this.tick);
                 }
             };
             this.play();
@@ -446,11 +398,16 @@
             this.playState = "idle";
             this.tick(this.cancelTimestamp);
             (_a = this.reject) === null || _a === void 0 ? void 0 : _a.call(this, false);
+            if (this.frameRequestId !== undefined) {
+                cancelAnimationFrame(this.frameRequestId);
+            }
         }
         reverse() {
             this.rate *= -1;
         }
         commitStyles() {
+            // TODO: The bug now is that this is not called if the animation is finished
+            // this should be called regardless
             this.cancelTimestamp = performance.now();
         }
         get currentTime() {
@@ -472,6 +429,35 @@
         }
     }
 
+    const convertEasing = (easing) => isCubicBezier(easing) ? cubicBezierAsString(easing) : easing;
+    const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
+
+    const testAnimation = (keyframes) => document.createElement("div").animate(keyframes, { duration: 0.001 });
+    const featureTests = {
+        cssRegisterProperty: () => typeof CSS !== "undefined" &&
+            Object.hasOwnProperty.call(CSS, "registerProperty"),
+        waapi: () => Object.hasOwnProperty.call(Element.prototype, "animate"),
+        partialKeyframes: () => {
+            try {
+                testAnimation({ opacity: [1] });
+            }
+            catch (e) {
+                return false;
+            }
+            return true;
+        },
+        finished: () => Boolean(testAnimation({ opacity: [0, 1] }).finished),
+    };
+    const results = {};
+    const supports = {};
+    for (const key in featureTests) {
+        supports[key] = () => {
+            if (results[key] === undefined)
+                results[key] = featureTests[key]();
+            return results[key];
+        };
+    }
+
     function hydrateKeyframes(keyframes, readInitialValue) {
         for (let i = 0; i < keyframes.length; i++) {
             if (keyframes[i] === null) {
@@ -513,14 +499,14 @@
     };
 
     function stopAnimation(animation) {
-        if (!animation)
+        if (!animation || animation.playState === "finished")
             return;
         // Suppress error thrown by WAAPI
         try {
             /**
              * commitStyles has overhead so we only want to commit and cancel
              */
-            animation.playState !== "finished" && animation.commitStyles();
+            animation.commitStyles();
             animation.cancel();
         }
         catch (e) { }
@@ -528,7 +514,7 @@
 
     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;
+        let { duration = defaults$1.duration, delay = defaults$1.delay, endDelay = defaults$1.endDelay, repeat = defaults$1.repeat, easing = defaults$1.easing, direction, offset, allowWebkitAcceleration = false, } = options;
         const data = getAnimationData(element);
         let canAnimateNatively = supports.waapi();
         const valueIsTransform = isTransform(key);
@@ -560,7 +546,7 @@
              * it from the DOM if it's the first keyframe.
              */
             let keyframes = hydrateKeyframes(keyframesList(keyframesDefinition), readInitialValue);
-            if (isCustomEasing(easing)) {
+            if (isEasingGenerator(easing)) {
                 const custom = easing.createAnimation(keyframes, readInitialValue, valueIsTransform, name, data);
                 easing = custom.easing;
                 if (custom.keyframes !== undefined)
@@ -601,9 +587,9 @@
                     keyframes.unshift(readInitialValue());
                 }
                 const animationOptions = {
-                    delay: ms(delay),
-                    duration: ms(duration),
-                    endDelay: ms(endDelay),
+                    delay: time.ms(delay),
+                    duration: time.ms(duration),
+                    endDelay: time.ms(endDelay),
                     easing: !isEasingList(easing) ? convertEasing(easing) : undefined,
                     direction,
                     iterations: repeat + 1,
@@ -661,7 +647,7 @@
                         latest = definition.toDefaultUnit(latest);
                     style.set(element, name, latest);
                 };
-                animation = new NumberAnimation(render, keyframes, Object.assign(Object.assign({}, options), { duration,
+                animation = new Animation(render, keyframes, Object.assign(Object.assign({}, options), { duration,
                     easing }));
             }
             else {
@@ -709,7 +695,7 @@
     }
 
     const createAnimation = (factory) => factory();
-    const createAnimations = (animationFactory, duration) => new Proxy({
+    const wrapAnimationWithControls = (animationFactory, duration = defaults$1.duration) => new Proxy({
         animations: animationFactory.map(createAnimation).filter(Boolean),
         duration,
     }, controls);
@@ -744,7 +730,7 @@
         set: (target, key, value) => {
             switch (key) {
                 case "currentTime":
-                    value = ms(value);
+                    value = time.ms(value);
                 case "currentTime":
                 case "playbackRate":
                     for (let i = 0; i < target.animations.length; i++) {
@@ -785,8 +771,7 @@
             : option;
     }
 
-    function animate(elements, keyframes, options = {}) {
-        var _a;
+    function animate$1(elements, keyframes, options = {}) {
         elements = resolveElements(elements);
         const numElements = elements.length;
         /**
@@ -802,7 +787,7 @@
                 animationFactories.push(animation);
             }
         }
-        return createAnimations(animationFactories, 
+        return wrapAnimationWithControls(animationFactories, 
         /**
          * TODO:
          * If easing is set to spring or glide, duration will be dynamically
@@ -812,7 +797,7 @@
          * to Proxy animations returned from animateStyle that has duration
          * as a getter.
          */
-        (_a = options.duration) !== null && _a !== void 0 ? _a : defaults.duration);
+        options.duration);
     }
 
     /*! *****************************************************************************
@@ -903,7 +888,7 @@
     }
 
     function timeline(definition, options = {}) {
-        var _a, _b;
+        var _a;
         const animationDefinitions = createAnimationsFromTimeline(definition, options);
         /**
          * Create and start animations
@@ -911,9 +896,9 @@
         const animationFactories = animationDefinitions
             .map((definition) => animateStyle(...definition))
             .filter(Boolean);
-        return createAnimations(animationFactories, 
+        return wrapAnimationWithControls(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);
+        (_a = animationDefinitions[0]) === null || _a === void 0 ? void 0 : _a[3].duration);
     }
     function createAnimationsFromTimeline(definition, _a = {}) {
         var { defaultOptions = {} } = _a, timelineOptions = __rest(_a, ["defaultOptions"]);
@@ -956,8 +941,8 @@
                     const valueSequence = getValueSequence(key, elementSequence);
                     let valueKeyframes = keyframesList(keyframes[key]);
                     const valueOptions = getOptions(options, key);
-                    let { duration = defaultOptions.duration || defaults.duration, easing = defaultOptions.easing || defaults.easing, } = valueOptions;
-                    if (isCustomEasing(easing)) {
+                    let { duration = defaultOptions.duration || defaults$1.duration, easing = defaultOptions.easing || defaults$1.easing, } = valueOptions;
+                    if (isEasingGenerator(easing)) {
                         const valueIsTransform = isTransform(key);
                         invariant(valueKeyframes.length === 2 || !valueIsTransform, "spring must be provided 2 keyframes within timeline");
                         const custom = easing.createAnimation(valueKeyframes, 
@@ -1028,7 +1013,7 @@
                     const { at, value, easing } = valueSequence[i];
                     keyframes.push(value);
                     valueOffset.push(progress(0, totalDuration, at));
-                    valueEasing.push(easing || defaults.easing);
+                    valueEasing.push(easing || defaults$1.easing);
                 }
                 /**
                  * If the first keyframe doesn't land on offset: 0
@@ -1069,34 +1054,34 @@
         return sequences[name];
     }
 
-    /*
-      Convert velocity into velocity per second
-
-      @param [number]: Unit per frame
-      @param [number]: Frame duration in ms
-    */
-    function velocityPerSecond(velocity, frameDuration) {
-        return frameDuration ? velocity * (1000 / frameDuration) : 0;
+    const sampleT = 5; // ms
+    function calcGeneratorVelocity(resolveValue, t, current) {
+        const prevT = Math.max(t - sampleT, 0);
+        return velocityPerSecond(current - resolveValue(prevT), 5);
     }
 
+    const defaults = {
+        stiffness: 100.0,
+        damping: 10.0,
+        mass: 1.0,
+    };
+
+    const calcDampingRatio = (stiffness = defaults.stiffness, damping = defaults.damping, mass = defaults.mass) => damping / (2 * Math.sqrt(stiffness * mass));
+    const calcAngularFreq = (undampedFreq, dampingRatio) => undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
+
     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;
-    const calcDampingRatio = (stiffness = defaultStiffness, damping = defaultDamping, mass = defaultMass) => damping / (2 * Math.sqrt(stiffness * mass));
-    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 spring$1 = ({ stiffness = defaults.stiffness, damping = defaults.damping, mass = defaults.mass, from = 0, to = 1, velocity = 0.0, restSpeed = 2, restDistance = 0.5, } = {}) => {
+        velocity = velocity ? time.s(velocity) : 0.0;
         const state = {
             done: false,
-            value: from,
+            hasReachedTarget: false,
+            current: from,
             target: to,
             velocity,
-            hasReachedTarget: false,
         };
         const dampingRatio = calcDampingRatio(stiffness, damping, mass);
         const initialDelta = to - from;
@@ -1118,35 +1103,119 @@
                 Math.exp(-undampedAngularFreq * t) *
                     (initialDelta + (velocity + undampedAngularFreq * initialDelta) * t);
         }
-        return {
-            next: (t) => {
-                state.value = resolveSpring(t);
-                state.velocity =
-                    t === 0 ? velocity : calcVelocity(resolveSpring, t, state.value);
-                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 (t) => {
+            state.current = resolveSpring(t);
+            state.velocity =
+                t === 0
+                    ? velocity
+                    : calcGeneratorVelocity(resolveSpring, t, state.current);
+            const isBelowVelocityThreshold = Math.abs(state.velocity) <= restSpeed;
+            const isBelowDisplacementThreshold = Math.abs(to - state.current) <= restDistance;
+            state.done = isBelowVelocityThreshold && isBelowDisplacementThreshold;
+            state.hasReachedTarget = hasReachedTarget(from, to, state.current);
+            return state;
+        };
+    };
+
+    const glide$1 = ({ 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 = {
+            hasReachedTarget: false,
+            done: false,
+            current: from,
+            target: from,
+            velocity,
+        };
+        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.current = state.done ? target : latest;
+            state.velocity =
+                t === 0 ? velocity : calcGeneratorVelocity(calcLatest, t, state.current);
+        };
+        /**
+         * 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$1$1;
+        const checkCatchBoundary = (t) => {
+            if (!isOutOfBounds(state.current))
+                return;
+            timeReachedBoundary = t;
+            spring$1$1 = spring$1({
+                from: state.current,
+                to: nearestBoundary(state.current),
+                velocity: state.velocity,
+                damping: bounceDamping,
+                stiffness: bounceStiffness,
+                restDistance,
+                restSpeed,
+            });
+        };
+        checkCatchBoundary(0);
+        return (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$1$1 && 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$1$1(t - timeReachedBoundary);
+            }
+            else {
+                state.hasReachedTarget = false;
+                !hasUpdatedFrame && applyFriction(t);
                 return state;
-            },
+            }
         };
     };
-    const sampleT = 5; // ms
-    function calcVelocity(resolveValue, t, current) {
-        const prevT = Math.max(t - sampleT, 0);
-        return velocityPerSecond(current - resolveValue(prevT), 5);
-    }
 
     const timeStep = 10;
     const maxDuration = 10000;
     function pregenerateKeyframes(generator) {
         let overshootDuration = undefined;
         let timestamp = timeStep;
-        let state = generator.next(0);
-        const keyframes = [state.value];
+        let state = generator(0);
+        const keyframes = [state.current];
         while (!state.done && timestamp < maxDuration) {
-            state = generator.next(timestamp);
-            keyframes.push(state.done ? state.target : state.value);
+            state = generator(timestamp);
+            keyframes.push(state.done ? state.target : state.current);
             if (overshootDuration === undefined && state.hasReachedTarget) {
                 overshootDuration = timestamp;
             }
@@ -1158,7 +1227,7 @@
          * generate a second keyframe so we have an origin and target.
          */
         if (keyframes.length === 1)
-            keyframes.push(state.value);
+            keyframes.push(state.current);
         return {
             keyframes,
             duration: duration / 1000,
@@ -1204,7 +1273,7 @@
                         const unresolvedOrigin = numKeyframes === 1 ? null : keyframes[0];
                         const origin = unresolvedOrigin === null
                             ? prevMotionState
-                                ? prevMotionState.value
+                                ? prevMotionState.current
                                 : parseFloat(getOrigin())
                             : unresolvedOrigin;
                         generator = getGenerator(origin, target, velocity, name === null || name === void 0 ? void 0 : name.includes("scale"));
@@ -1220,7 +1289,7 @@
                         };
                     }
                     // TODO Add test for this
-                    if (generator && data && name) {
+                    if (data && name) {
                         data.generators[name] = generator;
                     }
                     return settings;
@@ -1230,466 +1299,26 @@
     }
     const isNumberOrNull = (value) => typeof value !== "string";
 
-    const spring = createGeneratorEasing(createSpringGenerator);
+    const spring = createGeneratorEasing(spring$1);
 
-    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 {
-            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;
-                }
-            },
-        };
-    };
+    const glide = createGeneratorEasing(glide$1);
 
-    const glide = createGeneratorEasing(createGlideGenerator);
-
-    function hasChanged(a, b) {
-        if (typeof a !== typeof b)
-            return true;
-        if (Array.isArray(a) && Array.isArray(b))
-            return !shallowCompare(a, b);
-        return a !== b;
-    }
-    function shallowCompare(next, prev) {
-        const prevLength = prev.length;
-        if (prevLength !== next.length)
-            return false;
-        for (let i = 0; i < prevLength; i++) {
-            if (prev[i] !== next[i])
-                return false;
-        }
-        return true;
-    }
-
-    function isVariant(definition) {
-        return typeof definition === "object";
-    }
-
-    function resolveVariant(definition, variants) {
-        if (isVariant(definition)) {
-            return definition;
-        }
-        else if (definition && variants) {
-            return variants[definition];
-        }
-    }
-
-    let scheduled = undefined;
-    function processScheduledAnimations() {
-        if (!scheduled)
-            return;
-        const generators = scheduled.sort(compareByDepth).map(fireAnimateUpdates);
-        generators.forEach(fireNext);
-        generators.forEach(fireNext);
-        scheduled = undefined;
-    }
-    function scheduleAnimation(state) {
-        if (!scheduled) {
-            scheduled = [state];
-            requestAnimationFrame(processScheduledAnimations);
-        }
-        else {
-            addUniqueItem(scheduled, state);
-        }
-    }
-    function unscheduleAnimation(state) {
-        scheduled && removeItem(scheduled, state);
-    }
-    const compareByDepth = (a, b) => a.getDepth() - b.getDepth();
-    const fireAnimateUpdates = (state) => state.animateUpdates();
-    const fireNext = (iterator) => iterator.next();
-
-    const motionEvent = (name, target) => new CustomEvent(name, { detail: { target } });
-    function dispatchPointerEvent(element, name, event) {
-        element.dispatchEvent(new CustomEvent(name, { detail: { originalEvent: event } }));
-    }
-    function dispatchViewEvent(element, name, entry) {
-        element.dispatchEvent(new CustomEvent(name, { detail: { originalEntry: entry } }));
-    }
-
-    /**
-     * TODO: Support viewport options
-     */
-    const inView = {
-        isActive: (options) => Boolean(options.inView),
-        subscribe: (element, { enable, disable }) => {
-            let isVisible = false;
-            if (typeof IntersectionObserver !== "undefined") {
-                const observer = new IntersectionObserver(([entry]) => {
-                    if (!isVisible && entry.isIntersecting) {
-                        enable();
-                        dispatchViewEvent(element, "viewenter", entry);
-                    }
-                    else if (isVisible && !entry.isIntersecting) {
-                        disable();
-                        dispatchViewEvent(element, "viewleave", entry);
-                    }
-                    isVisible = entry.isIntersecting;
-                });
-                observer.observe(element);
-                return () => {
-                    observer.unobserve(element);
-                    observer.disconnect();
-                };
-            }
-            else {
-                enable();
-                return () => { };
-            }
-        },
-    };
-
-    const mouseEvent = (element, name, action) => (event) => {
-        if (event.pointerType && event.pointerType !== "mouse")
-            return;
-        action();
-        dispatchPointerEvent(element, name, event);
-    };
-    const hover = {
-        isActive: (options) => Boolean(options.hover),
-        subscribe: (element, { enable, disable }) => {
-            const onEnter = mouseEvent(element, "hoverstart", enable);
-            const onLeave = mouseEvent(element, "hoverend", disable);
-            element.addEventListener("pointerenter", onEnter);
-            element.addEventListener("pointerleave", onLeave);
-            return () => {
-                element.removeEventListener("pointerenter", onEnter);
-                element.removeEventListener("pointerleave", onLeave);
-            };
-        },
-    };
-
-    const press = {
-        isActive: (options) => Boolean(options.press),
-        subscribe: (element, { enable, disable }) => {
-            const onPointerUp = (event) => {
-                disable();
-                dispatchPointerEvent(element, "pressend", event);
-                window.removeEventListener("pointerup", onPointerUp);
-            };
-            const onPointerDown = (event) => {
-                enable();
-                dispatchPointerEvent(element, "pressstart", event);
-                window.addEventListener("pointerup", onPointerUp);
-            };
-            element.addEventListener("pointerdown", onPointerDown);
-            return () => {
-                element.removeEventListener("pointerdown", onPointerDown);
-                window.removeEventListener("pointerup", onPointerUp);
-            };
-        },
-    };
-
-    const gestures = { inView, hover, press };
-    /**
-     * A list of state types, in priority order. If a value is defined in
-     * a righter-most type, it will override any definition in a lefter-most.
-     */
-    const stateTypes = ["initial", "animate", ...Object.keys(gestures), "exit"];
-    /**
-     * A global store of all generated motion states. This can be used to lookup
-     * a motion state for a given Element.
-     */
-    const mountedStates = new WeakMap();
-    function createMotionState(options = {}, parent) {
-        /**
-         * The element represented by the motion state. This is an empty reference
-         * when we create the state to support SSR and allow for later mounting
-         * in view libraries.
-         *
-         * @ts-ignore
-         */
-        let element;
-        /**
-         * Calculate a depth that we can use to order motion states by tree depth.
-         */
-        let depth = parent ? parent.getDepth() + 1 : 0;
-        /**
-         * Track which states are currently active.
-         */
-        const activeStates = { initial: true, animate: true };
-        /**
-         * A map of functions that, when called, will remove event listeners for
-         * a given gesture.
-         */
-        const gestureSubscriptions = {};
-        /**
-         * Initialise a context to share through motion states. This
-         * will be populated by variant names (if any).
-         */
-        const context = {};
-        for (const name of stateTypes) {
-            context[name] =
-                typeof options[name] === "string"
-                    ? options[name]
-                    : parent === null || parent === void 0 ? void 0 : parent.getContext()[name];
-        }
-        /**
-         * If initial is set to false we use the animate prop as the initial
-         * animation state.
-         */
-        const initialVariantSource = options.initial === false ? "animate" : "initial";
-        /**
-         * Destructure an initial target out from the resolved initial variant.
-         */
-        let _a = resolveVariant(options[initialVariantSource] || context[initialVariantSource], options.variants) || {}, target = __rest(_a, ["transition"]);
-        /**
-         * The base target is a cached map of values that we'll use to animate
-         * back to if a value is removed from all active state types. This
-         * is usually the initial value as read from the DOM, for instance if
-         * it hasn't been defined in initial.
-         */
-        const baseTarget = Object.assign({}, target);
-        /**
-         * A generator that will be processed by the global animation scheduler.
-         * This yeilds when it switches from reading the DOM to writing to it
-         * to prevent layout thrashing.
-         */
-        function* animateUpdates() {
-            var _a, _b;
-            const prevTarget = target;
-            target = {};
-            const resolvedVariants = {};
-            const enteringInto = {};
-            const animationOptions = {};
-            for (const name of stateTypes) {
-                if (!activeStates[name])
-                    continue;
-                const variant = resolveVariant(options[name]);
-                if (!variant)
-                    continue;
-                resolvedVariants[name] = variant;
-                for (const key in variant) {
-                    if (key === "transition")
-                        continue;
-                    target[key] = variant[key];
-                    animationOptions[key] = getOptions((_b = (_a = variant.transition) !== null && _a !== void 0 ? _a : options.transition) !== null && _b !== void 0 ? _b : {}, key);
-                    /**
-                     * Mark which state type this value is animating into.
-                     */
-                    enteringInto[key] = name;
-                }
-            }
-            const allTargetKeys = new Set([
-                ...Object.keys(target),
-                ...Object.keys(prevTarget),
-            ]);
-            const animationFactories = [];
-            allTargetKeys.forEach((key) => {
-                var _a;
-                if (target[key] === undefined) {
-                    target[key] = baseTarget[key];
-                }
-                if (hasChanged(prevTarget[key], target[key])) {
-                    (_a = baseTarget[key]) !== null && _a !== void 0 ? _a : (baseTarget[key] = style.get(element, key));
-                    animationFactories.push(animateStyle(element, key, target[key], animationOptions[key]));
-                }
-            });
-            // Wait for all animation states to read from the DOM
-            yield;
-            const animations = animationFactories
-                .map((factory) => factory())
-                .filter(Boolean);
-            if (!animations.length)
-                return;
-            const animationTarget = target;
-            element.dispatchEvent(motionEvent("motionstart", animationTarget));
-            Promise.all(animations.map((animation) => animation.finished))
-                .then(() => {
-                element.dispatchEvent(motionEvent("motioncomplete", animationTarget));
-            })
-                .catch(noop);
-        }
-        const setGesture = (name, isActive) => () => {
-            activeStates[name] = isActive;
-            scheduleAnimation(state);
-        };
-        const updateGestureSubscriptions = () => {
-            for (const name in gestures) {
-                const isGestureActive = gestures[name].isActive(options);
-                const remove = gestureSubscriptions[name];
-                if (isGestureActive && !remove) {
-                    gestureSubscriptions[name] = gestures[name].subscribe(element, {
-                        enable: setGesture(name, true),
-                        disable: setGesture(name, false),
-                    });
-                }
-                else if (!isGestureActive && remove) {
-                    remove();
-                    delete gestureSubscriptions[name];
-                }
-            }
-        };
-        const state = {
-            update: (newOptions) => {
-                if (!element)
-                    return;
-                options = newOptions;
-                updateGestureSubscriptions();
-                scheduleAnimation(state);
-            },
-            setActive: (name, isActive) => {
-                if (!element)
-                    return;
-                activeStates[name] = isActive;
-                scheduleAnimation(state);
-            },
-            animateUpdates,
-            getDepth: () => depth,
-            getTarget: () => target,
-            getOptions: () => options,
-            getContext: () => context,
-            mount: (newElement) => {
-                invariant(Boolean(newElement), "Animation state must be mounted with valid Element");
-                element = newElement;
-                mountedStates.set(element, state);
-                updateGestureSubscriptions();
-                return () => {
-                    mountedStates.delete(element);
-                    unscheduleAnimation(state);
-                    for (const key in gestureSubscriptions) {
-                        gestureSubscriptions[key]();
-                    }
-                };
+    function animateProgress(target, options) {
+        return wrapAnimationWithControls([
+            () => {
+                const animation = new Animation(target, [0, 1], options);
+                animation.finished.catch(() => { });
+                return animation;
             },
-            isMounted: () => Boolean(element),
-        };
-        return state;
+        ], options === null || options === void 0 ? void 0 : options.duration);
     }
-
-    function createStyles(keyframes) {
-        const initialKeyframes = {};
-        const transformKeys = [];
-        for (let key in keyframes) {
-            const value = keyframes[key];
-            if (isTransform(key)) {
-                if (transformAlias[key])
-                    key = transformAlias[key];
-                transformKeys.push(key);
-                key = asTransformCssVar(key);
-            }
-            let initialKeyframe = Array.isArray(value) ? value[0] : value;
-            /**
-             * If this is a number and we have a default value type, convert the number
-             * to this type.
-             */
-            const definition = transformDefinitions.get(key);
-            if (definition) {
-                initialKeyframe = isNumber(value)
-                    ? definition.toDefaultUnit(value)
-                    : value;
-            }
-            initialKeyframes[key] = initialKeyframe;
-        }
-        if (transformKeys.length) {
-            initialKeyframes.transform = buildTransformTemplate(transformKeys);
-        }
-        return initialKeyframes;
-    }
-
-    const camelLetterToPipeLetter = (letter) => `-${letter.toLowerCase()}`;
-    const camelToPipeCase = (str) => str.replace(/[A-Z]/g, camelLetterToPipeLetter);
-    function createStyleString(target = {}) {
-        const styles = createStyles(target);
-        let style = "";
-        for (const key in styles) {
-            style += key.startsWith("--") ? key : camelToPipeCase(key);
-            style += `: ${styles[key]}; `;
-        }
-        return style;
+    function animate(target, keyframesOrOptions, options) {
+        const animationFunction = typeof target === "function" ? animateProgress : animate$1;
+        return animationFunction(target, keyframesOrOptions, options);
     }
 
     exports.animate = animate;
-    exports.animateStyle = animateStyle;
-    exports.createMotionState = createMotionState;
-    exports.createStyleString = createStyleString;
-    exports.createStyles = createStyles;
-    exports.getAnimationData = getAnimationData;
-    exports.getStyleName = getStyleName;
     exports.glide = glide;
-    exports.mountedStates = mountedStates;
     exports.spring = spring;
     exports.stagger = stagger;
     exports.style = style;