motion 10.11.0 → 10.12.0

package/dist/motion.umd.js

@@ -62,6 +62,17 @@
     const isCubicBezier = (easing) => Array.isArray(easing) && isNumber(easing[0]);
     const isEasingList = (easing) => Array.isArray(easing) && !isNumber(easing[0]);
 
+    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;
+    }
+
     const mix = (min, max, progress) => -progress * min + progress * max + min;
 
     const noop = () => { };
@@ -76,12 +87,35 @@
             offset.push(mix(min, 1, offsetProgress));
         }
     }
-    function defaultOffset(length) {
+    function defaultOffset$1(length) {
         const offset = [0];
         fillOffset(offset, length - 1);
         return offset;
     }
 
+    function interpolate(output, input = defaultOffset$1(output.length), easing = noopReturn) {
+        const length = output.length;
+        /**
+         * If the input length is lower than the output we
+         * fill the input to match. This currently assumes the input
+         * is an animation progress value so is a good candidate for
+         * moving outside the function.
+         */
+        const remainder = length - input.length;
+        remainder > 0 && fillOffset(input, remainder);
+        return (t) => {
+            let i = 0;
+            for (; i < length - 2; i++) {
+                if (t < input[i + 1])
+                    break;
+            }
+            let progressInRange = clamp(0, 1, progress(input[i], input[i + 1], t));
+            const segmentEasing = getEasingForSegment(easing, i);
+            progressInRange = segmentEasing(progressInRange);
+            return mix(output[i], output[i + 1], progressInRange);
+        };
+    }
+
     const time = {
         ms: (seconds) => seconds * 1000,
         s: (milliseconds) => milliseconds / 1000,
@@ -97,11 +131,6 @@
         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.
@@ -282,67 +311,46 @@
         }
         return noopReturn;
     }
-    function getEasingForSegment(easing, i) {
-        return isEasingList(easing)
-            ? easing[wrap(0, easing.length, i)]
-            : easing;
-    }
-
-    const clampProgress = (p) => Math.min(1, Math.max(p, 0));
-    function interpolate(output, input = defaultOffset(output.length), easing = noopReturn) {
-        const length = output.length;
-        /**
-         * If the input length is lower than the output we
-         * fill the input to match. This currently assumes the input
-         * is an animation progress value so is a good candidate for
-         * moving outside the function.
-         */
-        const remainder = length - input.length;
-        remainder > 0 && fillOffset(input, remainder);
-        return (t) => {
-            let i = 0;
-            for (; i < length - 2; i++) {
-                if (t < input[i + 1])
-                    break;
-            }
-            let progressInRange = clampProgress(progress(input[i], input[i + 1], t));
-            const segmentEasing = getEasingForSegment(easing, i);
-            progressInRange = segmentEasing(progressInRange);
-            return mix(output[i], output[i + 1], progressInRange);
-        };
-    }
 
     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", } = {}) {
+        constructor(output, keyframes = [0, 1], { easing, duration: initialDuration = defaults$1.duration, delay = defaults$1.delay, endDelay = defaults$1.endDelay, repeat = defaults$1.repeat, offset, direction = "normal", } = {}) {
             this.startTime = null;
             this.rate = 1;
             this.t = 0;
             this.cancelTimestamp = null;
+            this.easing = noopReturn;
+            this.duration = 0;
+            this.totalDuration = 0;
+            this.repeat = 0;
             this.playState = "idle";
             this.finished = new Promise((resolve, reject) => {
                 this.resolve = resolve;
                 this.reject = reject;
             });
+            easing = easing || defaults$1.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;
+                    initialDuration = custom.duration;
             }
-            const animationEasing = isEasingList(easing)
-                ? noopReturn
-                : getEasingFunction(easing);
-            const totalDuration = duration * (repeat + 1);
+            this.repeat = repeat;
+            this.easing = isEasingList(easing) ? noopReturn : getEasingFunction(easing);
+            this.updateDuration(initialDuration);
             const interpolate$1 = interpolate(keyframes, offset, isEasingList(easing) ? easing.map(getEasingFunction) : noopReturn);
             this.tick = (timestamp) => {
                 var _a;
                 // TODO: Temporary fix for OptionsResolver typing
                 delay = delay;
-                if (this.pauseTime)
-                    timestamp = this.pauseTime;
-                let t = (timestamp - this.startTime) * this.rate;
+                let t = 0;
+                if (this.pauseTime !== undefined) {
+                    t = this.pauseTime;
+                }
+                else {
+                    t = (timestamp - this.startTime) * this.rate;
+                }
                 this.t = t;
                 // Convert to seconds
                 t /= 1000;
@@ -352,14 +360,15 @@
                  * If this animation has finished, set the current time
                  * to the total duration.
                  */
-                if (this.playState === "finished")
-                    t = totalDuration;
+                if (this.playState === "finished" && this.pauseTime === undefined) {
+                    t = this.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;
+                const progress = t / this.duration;
                 // TODO progress += iterationStart
                 /**
                  * Get the current iteration (0 indexed). For instance the floor of
@@ -388,10 +397,11 @@
                     (direction === "alternate-reverse" && !iterationIsOdd)) {
                     iterationProgress = 1 - iterationProgress;
                 }
-                const p = t >= totalDuration ? 1 : Math.min(iterationProgress, 1);
-                const latest = interpolate$1(animationEasing(p));
+                const p = t >= this.totalDuration ? 1 : Math.min(iterationProgress, 1);
+                const latest = interpolate$1(this.easing(p));
                 output(latest);
-                const isAnimationFinished = this.playState === "finished" || t >= totalDuration + endDelay;
+                const isAnimationFinished = this.pauseTime === undefined &&
+                    (this.playState === "finished" || t >= this.totalDuration + endDelay);
                 if (isAnimationFinished) {
                     this.playState = "finished";
                     (_a = this.resolve) === null || _a === void 0 ? void 0 : _a.call(this, latest);
@@ -403,22 +413,21 @@
             this.play();
         }
         play() {
-            var _a;
             const now = performance.now();
             this.playState = "running";
-            if (this.pauseTime) {
-                this.startTime = now - (this.pauseTime - ((_a = this.startTime) !== null && _a !== void 0 ? _a : 0));
+            if (this.pauseTime !== undefined) {
+                this.startTime = now - this.pauseTime;
             }
             else if (!this.startTime) {
                 this.startTime = now;
             }
             this.cancelTimestamp = this.startTime;
             this.pauseTime = undefined;
-            requestAnimationFrame(this.tick);
+            this.frameRequestId = requestAnimationFrame(this.tick);
         }
         pause() {
             this.playState = "paused";
-            this.pauseTime = performance.now();
+            this.pauseTime = this.t;
         }
         finish() {
             this.playState = "finished";
@@ -440,11 +449,15 @@
             this.rate *= -1;
         }
         commitStyles() { }
+        updateDuration(duration) {
+            this.duration = duration;
+            this.totalDuration = duration * (this.repeat + 1);
+        }
         get currentTime() {
             return this.t;
         }
         set currentTime(t) {
-            if (this.pauseTime || this.rate === 0) {
+            if (this.pauseTime !== undefined || this.rate === 0) {
                 this.pauseTime = t;
             }
             else {
@@ -744,10 +757,13 @@
     }
 
     const createAnimation = (factory) => factory();
-    const wrapAnimationWithControls = (animationFactory, duration = defaults$1.duration) => new Proxy({
-        animations: animationFactory.map(createAnimation).filter(Boolean),
-        duration,
-    }, controls);
+    const withControls = (animationFactory, options, duration = defaults$1.duration) => {
+        return new Proxy({
+            animations: animationFactory.map(createAnimation).filter(Boolean),
+            duration,
+            options,
+        }, controls);
+    };
     /**
      * TODO:
      * Currently this returns the first animation, ideally it would return
@@ -761,8 +777,7 @@
                 case "duration":
                     return target.duration;
                 case "currentTime":
-                    let time = (activeAnimation === null || activeAnimation === void 0 ? void 0 : activeAnimation[key]) || 0;
-                    return time ? time / 1000 : 0;
+                    return time.s((activeAnimation === null || activeAnimation === void 0 ? void 0 : activeAnimation[key]) || 0);
                 case "playbackRate":
                 case "playState":
                     return activeAnimation === null || activeAnimation === void 0 ? void 0 : activeAnimation[key];
@@ -772,7 +787,17 @@
                     }
                     return target.finished;
                 case "stop":
-                    return () => target.animations.forEach((animation) => stopAnimation(animation));
+                    return () => {
+                        target.animations.forEach((animation) => stopAnimation(animation));
+                    };
+                case "forEachNative":
+                    /**
+                     * This is for internal use only, fire a callback for each
+                     * underlying animation.
+                     */
+                    return (callback) => {
+                        target.animations.forEach((animation) => callback(animation, target));
+                    };
                 default:
                     return typeof (activeAnimation === null || activeAnimation === void 0 ? void 0 : activeAnimation[key]) === "undefined"
                         ? undefined
@@ -839,7 +864,7 @@
                 animationFactories.push(animation);
             }
         }
-        return wrapAnimationWithControls(animationFactories, 
+        return withControls(animationFactories, options, 
         /**
          * TODO:
          * If easing is set to spring or glide, duration will be dynamically
@@ -948,7 +973,7 @@
         const animationFactories = animationDefinitions
             .map((definition) => animateStyle(...definition))
             .filter(Boolean);
-        return wrapAnimationWithControls(animationFactories, 
+        return withControls(animationFactories, options, 
         // Get the duration from the first animation definition
         (_a = animationDefinitions[0]) === null || _a === void 0 ? void 0 : _a[3].duration);
     }
@@ -1025,7 +1050,7 @@
                     /**
                      *
                      */
-                    let { offset = defaultOffset(valueKeyframes.length) } = valueOptions;
+                    let { offset = defaultOffset$1(valueKeyframes.length) } = valueOptions;
                     /**
                      * If there's only one offset of 0, fill in a second with length 1
                      *
@@ -1377,7 +1402,7 @@
         any: 0,
         all: 1,
     };
-    function inView(elements, onStart, { root, margin: rootMargin, amount = "any" } = {}) {
+    function inView$1(elementOrSelector, onStart, { root, margin: rootMargin, amount = "any" } = {}) {
         /**
          * If this browser doesn't support IntersectionObserver, return a dummy stop function.
          * Default triggering of onStart is tricky - it could be used for starting/stopping
@@ -1387,7 +1412,7 @@
         if (typeof IntersectionObserver === "undefined") {
             return () => { };
         }
-        const resolvedElements = resolveElements(elements);
+        const elements = resolveElements(elementOrSelector);
         const activeIntersections = new WeakMap();
         const onIntersectionChange = (entries) => {
             entries.forEach((entry) => {
@@ -1418,32 +1443,816 @@
             rootMargin,
             threshold: typeof amount === "number" ? amount : thresholds[amount],
         });
-        resolvedElements.forEach((element) => observer.observe(element));
+        elements.forEach((element) => observer.observe(element));
         return () => observer.disconnect();
     }
 
-    function animateProgress(target, options) {
-        return wrapAnimationWithControls([
+    const resizeHandlers = new WeakMap();
+    let observer;
+    function getElementSize(target, borderBoxSize) {
+        if (borderBoxSize) {
+            const { inlineSize, blockSize } = borderBoxSize[0];
+            return { width: inlineSize, height: blockSize };
+        }
+        else if (target instanceof SVGElement && "getBBox" in target) {
+            return target.getBBox();
+        }
+        else {
+            return {
+                width: target.offsetWidth,
+                height: target.offsetHeight,
+            };
+        }
+    }
+    function notifyTarget({ target, contentRect, borderBoxSize, }) {
+        var _a;
+        (_a = resizeHandlers.get(target)) === null || _a === void 0 ? void 0 : _a.forEach((handler) => {
+            handler({
+                target,
+                contentSize: contentRect,
+                get size() {
+                    return getElementSize(target, borderBoxSize);
+                },
+            });
+        });
+    }
+    function notifyAll(entries) {
+        entries.forEach(notifyTarget);
+    }
+    function createResizeObserver() {
+        if (typeof ResizeObserver === "undefined")
+            return;
+        observer = new ResizeObserver(notifyAll);
+    }
+    function resizeElement(target, handler) {
+        if (!observer)
+            createResizeObserver();
+        const elements = resolveElements(target);
+        elements.forEach((element) => {
+            let elementHandlers = resizeHandlers.get(element);
+            if (!elementHandlers) {
+                elementHandlers = new Set();
+                resizeHandlers.set(element, elementHandlers);
+            }
+            elementHandlers.add(handler);
+            observer === null || observer === void 0 ? void 0 : observer.observe(element);
+        });
+        return () => {
+            elements.forEach((element) => {
+                const elementHandlers = resizeHandlers.get(element);
+                elementHandlers === null || elementHandlers === void 0 ? void 0 : elementHandlers.delete(handler);
+                if (!(elementHandlers === null || elementHandlers === void 0 ? void 0 : elementHandlers.size)) {
+                    observer === null || observer === void 0 ? void 0 : observer.unobserve(element);
+                }
+            });
+        };
+    }
+
+    const windowCallbacks = new Set();
+    let windowResizeHandler;
+    function createWindowResizeHandler() {
+        windowResizeHandler = () => {
+            const size = {
+                width: window.innerWidth,
+                height: window.innerHeight,
+            };
+            const info = {
+                target: window,
+                size,
+                contentSize: size,
+            };
+            windowCallbacks.forEach((callback) => callback(info));
+        };
+        window.addEventListener("resize", windowResizeHandler);
+    }
+    function resizeWindow(callback) {
+        windowCallbacks.add(callback);
+        if (!windowResizeHandler)
+            createWindowResizeHandler();
+        return () => {
+            windowCallbacks.delete(callback);
+            if (!windowCallbacks.size && windowResizeHandler) {
+                windowResizeHandler = undefined;
+            }
+        };
+    }
+
+    function resize(a, b) {
+        return typeof a === "function" ? resizeWindow(a) : resizeElement(a, b);
+    }
+
+    /**
+     * A time in milliseconds, beyond which we consider the scroll velocity to be 0.
+     */
+    const maxElapsed = 50;
+    const createAxisInfo = () => ({
+        current: 0,
+        offset: [],
+        progress: 0,
+        scrollLength: 0,
+        targetOffset: 0,
+        targetLength: 0,
+        containerLength: 0,
+        velocity: 0,
+    });
+    const createScrollInfo = () => ({
+        time: 0,
+        x: createAxisInfo(),
+        y: createAxisInfo(),
+    });
+    const keys = {
+        x: {
+            length: "Width",
+            position: "Left",
+        },
+        y: {
+            length: "Height",
+            position: "Top",
+        },
+    };
+    function updateAxisInfo(element, axisName, info, time) {
+        const axis = info[axisName];
+        const { length, position } = keys[axisName];
+        const prev = axis.current;
+        const prevTime = info.time;
+        axis.current = element["scroll" + position];
+        axis.scrollLength = element["scroll" + length] - element["client" + length];
+        axis.offset.length = 0;
+        axis.offset[0] = 0;
+        axis.offset[1] = axis.scrollLength;
+        axis.progress = progress(0, axis.scrollLength, axis.current);
+        const elapsed = time - prevTime;
+        axis.velocity =
+            elapsed > maxElapsed ? 0 : velocityPerSecond(axis.current - prev, elapsed);
+    }
+    function updateScrollInfo(element, info, time) {
+        updateAxisInfo(element, "x", info, time);
+        updateAxisInfo(element, "y", info, time);
+        info.time = time;
+    }
+
+    function calcInset(element, container) {
+        let inset = { x: 0, y: 0 };
+        let current = element;
+        while (current && current !== container) {
+            if (current instanceof HTMLElement) {
+                inset.x += current.offsetLeft;
+                inset.y += current.offsetTop;
+                current = current.offsetParent;
+            }
+            else if (current instanceof SVGGraphicsElement && "getBBox" in current) {
+                const { top, left } = current.getBBox();
+                inset.x += left;
+                inset.y += top;
+                /**
+                 * Assign the next parent element as the <svg /> tag.
+                 */
+                while (current && current.tagName !== "svg") {
+                    current = current.parentNode;
+                }
+            }
+        }
+        return inset;
+    }
+
+    const ScrollOffset = {
+        Enter: [
+            [0, 1],
+            [1, 1],
+        ],
+        Exit: [
+            [0, 0],
+            [1, 0],
+        ],
+        Any: [
+            [1, 0],
+            [0, 1],
+        ],
+        All: [
+            [0, 0],
+            [1, 1],
+        ],
+    };
+
+    const namedEdges = {
+        start: 0,
+        center: 0.5,
+        end: 1,
+    };
+    function resolveEdge(edge, length, inset = 0) {
+        let delta = 0;
+        /**
+         * If we have this edge defined as a preset, replace the definition
+         * with the numerical value.
+         */
+        if (namedEdges[edge] !== undefined) {
+            edge = namedEdges[edge];
+        }
+        /**
+         * Handle unit values
+         */
+        if (isString(edge)) {
+            const asNumber = parseFloat(edge);
+            if (edge.endsWith("px")) {
+                delta = asNumber;
+            }
+            else if (edge.endsWith("%")) {
+                edge = asNumber / 100;
+            }
+            else if (edge.endsWith("vw")) {
+                delta = (asNumber / 100) * document.documentElement.clientWidth;
+            }
+            else if (edge.endsWith("vh")) {
+                delta = (asNumber / 100) * document.documentElement.clientHeight;
+            }
+            else {
+                edge = asNumber;
+            }
+        }
+        /**
+         * If the edge is defined as a number, handle as a progress value.
+         */
+        if (isNumber(edge)) {
+            delta = length * edge;
+        }
+        return inset + delta;
+    }
+
+    const defaultOffset = [0, 0];
+    function resolveOffset(offset, containerLength, targetLength, targetInset) {
+        let offsetDefinition = Array.isArray(offset) ? offset : defaultOffset;
+        let targetPoint = 0;
+        let containerPoint = 0;
+        if (isNumber(offset)) {
+            /**
+             * If we're provided offset: [0, 0.5, 1] then each number x should become
+             * [x, x], so we default to the behaviour of mapping 0 => 0 of both target
+             * and container etc.
+             */
+            offsetDefinition = [offset, offset];
+        }
+        else if (isString(offset)) {
+            offset = offset.trim();
+            if (offset.includes(" ")) {
+                offsetDefinition = offset.split(" ");
+            }
+            else {
+                /**
+                 * If we're provided a definition like "100px" then we want to apply
+                 * that only to the top of the target point, leaving the container at 0.
+                 * Whereas a named offset like "end" should be applied to both.
+                 */
+                offsetDefinition = [offset, namedEdges[offset] ? offset : `0`];
+            }
+        }
+        targetPoint = resolveEdge(offsetDefinition[0], targetLength, targetInset);
+        containerPoint = resolveEdge(offsetDefinition[1], containerLength);
+        return targetPoint - containerPoint;
+    }
+
+    const point = { x: 0, y: 0 };
+    function resolveOffsets(container, info, options) {
+        let { offset: offsetDefinition = ScrollOffset.All } = options;
+        const { target = container, axis = "y" } = options;
+        const lengthLabel = axis === "y" ? "height" : "width";
+        const inset = target !== container ? calcInset(target, container) : point;
+        /**
+         * Measure the target and container. If they're the same thing then we
+         * use the container's scrollWidth/Height as the target, from there
+         * all other calculations can remain the same.
+         */
+        const targetSize = target === container
+            ? { width: container.scrollWidth, height: container.scrollHeight }
+            : { width: target.clientWidth, height: target.clientHeight };
+        const containerSize = {
+            width: container.clientWidth,
+            height: container.clientHeight,
+        };
+        /**
+         * Reset the length of the resolved offset array rather than creating a new one.
+         * TODO: More reusable data structures for targetSize/containerSize would also be good.
+         */
+        info[axis].offset.length = 0;
+        /**
+         * Populate the offset array by resolving the user's offset definition into
+         * a list of pixel scroll offets.
+         */
+        let hasChanged = !info[axis].interpolate;
+        const numOffsets = offsetDefinition.length;
+        for (let i = 0; i < numOffsets; i++) {
+            const offset = resolveOffset(offsetDefinition[i], containerSize[lengthLabel], targetSize[lengthLabel], inset[axis]);
+            if (!hasChanged && offset !== info[axis].interpolatorOffsets[i]) {
+                hasChanged = true;
+            }
+            info[axis].offset[i] = offset;
+        }
+        /**
+         * If the pixel scroll offsets have changed, create a new interpolator function
+         * to map scroll value into a progress.
+         */
+        if (hasChanged) {
+            info[axis].interpolate = interpolate(defaultOffset$1(numOffsets), info[axis].offset);
+            info[axis].interpolatorOffsets = [...info[axis].offset];
+        }
+        info[axis].progress = info[axis].interpolate(info[axis].current);
+    }
+
+    function measure(container, target = container, info) {
+        /**
+         * Find inset of target within scrollable container
+         */
+        info.x.targetOffset = 0;
+        info.y.targetOffset = 0;
+        if (target !== container) {
+            let node = target;
+            while (node && node != container) {
+                info.x.targetOffset += node.offsetLeft;
+                info.y.targetOffset += node.offsetTop;
+                node = node.offsetParent;
+            }
+        }
+        info.x.targetLength =
+            target === container ? target.scrollWidth : target.clientWidth;
+        info.y.targetLength =
+            target === container ? target.scrollHeight : target.clientHeight;
+        info.x.containerLength = container.clientWidth;
+        info.y.containerLength = container.clientHeight;
+    }
+    function createOnScrollHandler(element, onScroll, info, options = {}) {
+        const axis = options.axis || "y";
+        return {
+            measure: () => measure(element, options.target, info),
+            update: (time) => {
+                updateScrollInfo(element, info, time);
+                if (options.offset || options.target) {
+                    resolveOffsets(element, info, options);
+                }
+            },
+            notify: typeof onScroll === "function"
+                ? () => onScroll(info)
+                : scrubAnimation(onScroll, info[axis]),
+        };
+    }
+    function scrubAnimation(controls, axisInfo) {
+        controls.pause();
+        controls.forEachNative((animation, { easing }) => {
+            var _a, _b;
+            if (animation.updateDuration) {
+                if (!easing)
+                    animation.easing = noopReturn;
+                animation.updateDuration(1);
+            }
+            else {
+                const timingOptions = { duration: 1000 };
+                if (!easing)
+                    timingOptions.easing = "linear";
+                (_b = (_a = animation.effect) === null || _a === void 0 ? void 0 : _a.updateTiming) === null || _b === void 0 ? void 0 : _b.call(_a, timingOptions);
+            }
+        });
+        return () => {
+            controls.currentTime = axisInfo.progress;
+        };
+    }
+
+    const scrollListeners = new WeakMap();
+    const resizeListeners = new WeakMap();
+    const onScrollHandlers = new WeakMap();
+    const getEventTarget = (element) => element === document.documentElement ? window : element;
+    function scroll(onScroll, _a = {}) {
+        var { container = document.documentElement } = _a, options = __rest(_a, ["container"]);
+        let containerHandlers = onScrollHandlers.get(container);
+        /**
+         * Get the onScroll handlers for this container.
+         * If one isn't found, create a new one.
+         */
+        if (!containerHandlers) {
+            containerHandlers = new Set();
+            onScrollHandlers.set(container, containerHandlers);
+        }
+        /**
+         * Create a new onScroll handler for the provided callback.
+         */
+        const info = createScrollInfo();
+        const containerHandler = createOnScrollHandler(container, onScroll, info, options);
+        containerHandlers.add(containerHandler);
+        /**
+         * Check if there's a scroll event listener for this container.
+         * If not, create one.
+         */
+        if (!scrollListeners.has(container)) {
+            const listener = () => {
+                const time = performance.now();
+                for (const handler of containerHandlers)
+                    handler.measure();
+                for (const handler of containerHandlers)
+                    handler.update(time);
+                for (const handler of containerHandlers)
+                    handler.notify();
+            };
+            scrollListeners.set(container, listener);
+            const target = getEventTarget(container);
+            window.addEventListener("resize", listener, { passive: true });
+            if (container !== document.documentElement) {
+                resizeListeners.set(container, resize(container, listener));
+            }
+            target.addEventListener("scroll", listener, { passive: true });
+        }
+        const listener = scrollListeners.get(container);
+        const onLoadProcesss = requestAnimationFrame(listener);
+        return () => {
+            var _a;
+            if (typeof onScroll !== "function")
+                onScroll.stop();
+            cancelAnimationFrame(onLoadProcesss);
+            /**
+             * Check if we even have any handlers for this container.
+             */
+            const containerHandlers = onScrollHandlers.get(container);
+            if (!containerHandlers)
+                return;
+            containerHandlers.delete(containerHandler);
+            if (containerHandlers.size)
+                return;
+            /**
+             * If no more handlers, remove the scroll listener too.
+             */
+            const listener = scrollListeners.get(container);
+            scrollListeners.delete(container);
+            if (listener) {
+                getEventTarget(container).removeEventListener("scroll", listener);
+                (_a = resizeListeners.get(container)) === null || _a === void 0 ? void 0 : _a();
+                window.removeEventListener("resize", listener);
+            }
+        };
+    }
+
+    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 } }));
+    }
+
+    const inView = {
+        isActive: (options) => Boolean(options.inView),
+        subscribe: (element, { enable, disable }, { inViewOptions = {} }) => {
+            const { once } = inViewOptions, viewOptions = __rest(inViewOptions, ["once"]);
+            return inView$1(element, (enterEntry) => {
+                enable();
+                dispatchViewEvent(element, "viewenter", enterEntry);
+                if (!once) {
+                    return (leaveEntry) => {
+                        disable();
+                        dispatchViewEvent(element, "viewleave", leaveEntry);
+                    };
+                }
+            }, viewOptions);
+        },
+    };
+
+    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 animationOptions = {};
+            for (const name of stateTypes) {
+                if (!activeStates[name])
+                    continue;
+                const variant = resolveVariant(options[name]);
+                if (!variant)
+                    continue;
+                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);
+                }
+            }
+            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),
+                    }, options);
+                }
+                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]();
+                    }
+                };
+            },
+            isMounted: () => Boolean(element),
+        };
+        return state;
+    }
+
+    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 animateProgress(target, options = {}) {
+        return withControls([
             () => {
                 const animation = new Animation(target, [0, 1], options);
                 animation.finished.catch(() => { });
                 return animation;
             },
-        ], options === null || options === void 0 ? void 0 : options.duration);
+        ], options, options.duration);
     }
     function animate(target, keyframesOrOptions, options) {
-        const animationFunction = typeof target === "function" ? animateProgress : animate$1;
-        return animationFunction(target, keyframesOrOptions, options);
+        const factory = typeof target === "function" ? animateProgress : animate$1;
+        return factory(target, keyframesOrOptions, options);
     }
 
     exports.MotionValue = MotionValue;
+    exports.ScrollOffset = ScrollOffset;
     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.inView = inView;
+    exports.inView = inView$1;
+    exports.mountedStates = mountedStates;
+    exports.resize = resize;
+    exports.scroll = scroll;
     exports.spring = spring;
     exports.stagger = stagger;
     exports.style = style;
     exports.timeline = timeline;
+    exports.withControls = withControls;
 
     Object.defineProperty(exports, '__esModule', { value: true });