motion 12.6.2 → 12.6.3

package/dist/es/framer-motion/dist/es/projection/node/create-projection-node.mjs

@@ -1,12 +1,12 @@
 import '../../../../../motion-utils/dist/es/errors.mjs';
 import { noop } from '../../../../../motion-utils/dist/es/noop.mjs';
 import { SubscriptionManager } from '../../../../../motion-utils/dist/es/subscription-manager.mjs';
+import { activeAnimations } from '../../../../../motion-dom/dist/es/stats/animation-count.mjs';
+import { statsBuffer } from '../../../../../motion-dom/dist/es/stats/buffer.mjs';
 import { getValueTransition } from '../../../../../motion-dom/dist/es/animation/utils/get-value-transition.mjs';
 import { cancelFrame, frameData, frameSteps, frame } from '../../../../../motion-dom/dist/es/frameloop/frame.mjs';
-import { statsBuffer } from '../../../../../motion-dom/dist/es/stats/buffer.mjs';
 import { microtask } from '../../../../../motion-dom/dist/es/frameloop/microtask.mjs';
 import { time } from '../../../../../motion-dom/dist/es/frameloop/sync-time.mjs';
-import { activeAnimations } from '../../../../../motion-dom/dist/es/stats/animation-count.mjs';
 import { animateSingleValue } from '../../animation/animate/single-value.mjs';
 import { getOptimisedAppearId } from '../../animation/optimized-appear/get-appear-id.mjs';
 import { isSVGElement } from '../../render/dom/utils/is-svg-element.mjs';
@@ -72,7 +72,7 @@ function cancelTreeOptimisedTransformAnimations(projectionNode) {
 }
 function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
     return class ProjectionNode {
-        constructor(latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {
+        constructor(latestValues = {}, parent = defaultParent?.()) {
             /**
              * A unique ID generated for every projection node.
              */
@@ -603,12 +603,11 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             };
         }
         measurePageBox() {
-            var _a;
             const { visualElement } = this.options;
             if (!visualElement)
                 return createBox();
             const box = visualElement.measureViewportBox();
-            const wasInScrollRoot = ((_a = this.scroll) === null || _a === void 0 ? void 0 : _a.wasRoot) || this.path.some(checkNodeWasScrollRoot);
+            const wasInScrollRoot = this.scroll?.wasRoot || this.path.some(checkNodeWasScrollRoot);
             if (!wasInScrollRoot) {
                 // Remove viewport scroll to give page-relative coordinates
                 const { scroll } = this.root;
@@ -620,10 +619,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             return box;
         }
         removeElementScroll(box) {
-            var _a;
             const boxWithoutScroll = createBox();
             copyBoxInto(boxWithoutScroll, box);
-            if ((_a = this.scroll) === null || _a === void 0 ? void 0 : _a.wasRoot) {
+            if (this.scroll?.wasRoot) {
                 return boxWithoutScroll;
             }
             /**
@@ -726,7 +724,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             }
         }
         resolveTargetDelta(forceRecalculation = false) {
-            var _a;
             /**
              * Once the dirty status of nodes has been spread through the tree, we also
              * need to check if we have a shared node of a different depth that has itself
@@ -744,7 +741,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             const canSkip = !(forceRecalculation ||
                 (isShared && this.isSharedProjectionDirty) ||
                 this.isProjectionDirty ||
-                ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty) ||
+                this.parent?.isProjectionDirty ||
                 this.attemptToResolveRelativeTarget ||
                 this.root.updateBlockedByResize);
             if (canSkip)
@@ -869,7 +866,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 this.layout);
         }
         calcProjection() {
-            var _a;
             const lead = this.getLead();
             const isShared = Boolean(this.resumingFrom) || this !== lead;
             let canSkip = true;
@@ -877,7 +873,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              * If this is a normal layout animation and neither this node nor its nearest projecting
              * is dirty then we can't skip.
              */
-            if (this.isProjectionDirty || ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty)) {
+            if (this.isProjectionDirty || this.parent?.isProjectionDirty) {
                 canSkip = false;
             }
             /**
@@ -989,8 +985,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             // TODO: Schedule render
         }
         scheduleRender(notifyAll = true) {
-            var _a;
-            (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.scheduleRender();
+            this.options.visualElement?.scheduleRender();
             if (notifyAll) {
                 const stack = this.getStack();
                 stack && stack.scheduleRender();
@@ -1177,14 +1172,12 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             return stack ? stack.lead === this : true;
         }
         getLead() {
-            var _a;
             const { layoutId } = this.options;
-            return layoutId ? ((_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.lead) || this : this;
+            return layoutId ? this.getStack()?.lead || this : this;
         }
         getPrevLead() {
-            var _a;
             const { layoutId } = this.options;
-            return layoutId ? (_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.prevLead : undefined;
+            return layoutId ? this.getStack()?.prevLead : undefined;
         }
         getStack() {
             const { layoutId } = this.options;
@@ -1258,7 +1251,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             visualElement.scheduleRender();
         }
         getProjectionStyles(styleProp) {
-            var _a, _b;
             if (!this.instance || this.isSVG)
                 return undefined;
             if (!this.isVisible) {
@@ -1272,7 +1264,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 this.needsReset = false;
                 styles.opacity = "";
                 styles.pointerEvents =
-                    resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || "";
+                    resolveMotionValue(styleProp?.pointerEvents) || "";
                 styles.transform = transformTemplate
                     ? transformTemplate(this.latestValues, "")
                     : "none";
@@ -1287,7 +1279,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                             ? this.latestValues.opacity
                             : 1;
                     emptyStyles.pointerEvents =
-                        resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || "";
+                        resolveMotionValue(styleProp?.pointerEvents) || "";
                 }
                 if (this.hasProjected && !hasTransform(this.latestValues)) {
                     emptyStyles.transform = transformTemplate
@@ -1312,7 +1304,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                  */
                 styles.opacity =
                     lead === this
-                        ? (_b = (_a = valuesToRender.opacity) !== null && _a !== void 0 ? _a : this.latestValues.opacity) !== null && _b !== void 0 ? _b : 1
+                        ? valuesToRender.opacity ??
+                            this.latestValues.opacity ??
+                            1
                         : this.preserveOpacity
                             ? this.latestValues.opacity
                             : valuesToRender.opacityExit;
@@ -1373,7 +1367,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             if (this.options.layoutId) {
                 styles.pointerEvents =
                     lead === this
-                        ? resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || ""
+                        ? resolveMotionValue(styleProp?.pointerEvents) || ""
                         : "none";
             }
             return styles;
@@ -1383,7 +1377,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         }
         // Only run on root
         resetTree() {
-            this.root.nodes.forEach((node) => { var _a; return (_a = node.currentAnimation) === null || _a === void 0 ? void 0 : _a.stop(); });
+            this.root.nodes.forEach((node) => node.currentAnimation?.stop());
             this.root.nodes.forEach(clearMeasurements);
             this.root.sharedNodes.clear();
         }
@@ -1393,8 +1387,7 @@ function updateLayout(node) {
     node.updateLayout();
 }
 function notifyLayoutUpdate(node) {
-    var _a;
-    const snapshot = ((_a = node.resumeFrom) === null || _a === void 0 ? void 0 : _a.snapshot) || node.snapshot;
+    const snapshot = node.resumeFrom?.snapshot || node.snapshot;
     if (node.isLead() &&
         node.layout &&
         snapshot &&
@@ -1600,8 +1593,7 @@ function shouldAnimatePositionOnly(animationType, snapshot, layout) {
             !isNear(aspectRatio(snapshot), aspectRatio(layout), 0.2)));
 }
 function checkNodeWasScrollRoot(node) {
-    var _a;
-    return node !== node.root && ((_a = node.scroll) === null || _a === void 0 ? void 0 : _a.wasRoot);
+    return node !== node.root && node.scroll?.wasRoot;
 }
 
 export { cleanDirtyNodes, createProjectionNode, mixAxis, mixAxisDelta, mixBox, propagateDirtyNodes };

package/dist/es/framer-motion/dist/es/projection/styles/transform.mjs

@@ -8,7 +8,7 @@ function buildProjectionTransform(delta, treeScale, latestTransform) {
      */
     const xTranslate = delta.x.translate / treeScale.x;
     const yTranslate = delta.y.translate / treeScale.y;
-    const zTranslate = (latestTransform === null || latestTransform === void 0 ? void 0 : latestTransform.z) || 0;
+    const zTranslate = latestTransform?.z || 0;
     if (xTranslate || yTranslate || zTranslate) {
         transform = `translate3d(${xTranslate}px, ${yTranslate}px, ${zTranslate}px) `;
     }

package/dist/es/framer-motion/dist/es/render/VisualElement.mjs

@@ -406,10 +406,10 @@ class VisualElement {
      * directly from the instance (which might have performance implications).
      */
     readValue(key, target) {
-        var _a;
         let value = this.latestValues[key] !== undefined || !this.current
             ? this.latestValues[key]
-            : (_a = this.getBaseTargetFromProps(this.props, key)) !== null && _a !== void 0 ? _a : this.readValueFromInstance(this.current, key, this.options);
+            : this.getBaseTargetFromProps(this.props, key) ??
+                this.readValueFromInstance(this.current, key, this.options);
         if (value !== undefined && value !== null) {
             if (typeof value === "string" &&
                 (isNumericalString(value) || isZeroValueString(value))) {
@@ -435,11 +435,10 @@ class VisualElement {
      * props.
      */
     getBaseTarget(key) {
-        var _a;
         const { initial } = this.props;
         let valueFromInitial;
         if (typeof initial === "string" || typeof initial === "object") {
-            const variant = resolveVariantFromProps(this.props, initial, (_a = this.presenceContext) === null || _a === void 0 ? void 0 : _a.custom);
+            const variant = resolveVariantFromProps(this.props, initial, this.presenceContext?.custom);
             if (variant) {
                 valueFromInitial = variant[key];
             }

package/dist/es/framer-motion/dist/es/render/dom/DOMKeyframesResolver.mjs

@@ -104,7 +104,6 @@ class DOMKeyframesResolver extends KeyframeResolver {
         }
     }
     measureEndState() {
-        var _a;
         const { element, name, unresolvedKeyframes } = this;
         if (!element || !element.current)
             return;
@@ -117,7 +116,7 @@ class DOMKeyframesResolver extends KeyframeResolver {
             this.finalKeyframe = finalKeyframe;
         }
         // If we removed transform values, reapply them before the next render
-        if ((_a = this.removedTransforms) === null || _a === void 0 ? void 0 : _a.length) {
+        if (this.removedTransforms?.length) {
             this.removedTransforms.forEach(([unsetTransformName, unsetTransformValue]) => {
                 element
                     .getValue(unsetTransformName)

package/dist/es/framer-motion/dist/es/render/dom/resize/handle-element.mjs

@@ -19,8 +19,7 @@ function getElementSize(target, borderBoxSize) {
     }
 }
 function notifyTarget({ target, contentRect, borderBoxSize, }) {
-    var _a;
-    (_a = resizeHandlers.get(target)) === null || _a === void 0 ? void 0 : _a.forEach((handler) => {
+    resizeHandlers.get(target)?.forEach((handler) => {
         handler({
             target,
             contentSize: contentRect,
@@ -49,14 +48,14 @@ function resizeElement(target, handler) {
             resizeHandlers.set(element, elementHandlers);
         }
         elementHandlers.add(handler);
-        observer === null || observer === void 0 ? void 0 : observer.observe(element);
+        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);
+            elementHandlers?.delete(handler);
+            if (!elementHandlers?.size) {
+                observer?.unobserve(element);
             }
         });
     };

package/dist/es/framer-motion/dist/es/render/dom/scroll/track.mjs

@@ -58,7 +58,6 @@ function scrollInfo(onScroll, { container = document.documentElement, ...options
     const listener = scrollListeners.get(container);
     frame.read(listener, false, true);
     return () => {
-        var _a;
         cancelFrame(listener);
         /**
          * Check if we even have any handlers for this container.
@@ -76,7 +75,7 @@ function scrollInfo(onScroll, { container = document.documentElement, ...options
         scrollListeners.delete(container);
         if (scrollListener) {
             getEventTarget(container).removeEventListener("scroll", scrollListener);
-            (_a = resizeListeners.get(container)) === null || _a === void 0 ? void 0 : _a();
+            resizeListeners.get(container)?.();
             window.removeEventListener("resize", scrollListener);
         }
     };

package/dist/es/framer-motion/dist/es/render/dom/utils/css-variables-conversion.mjs

@@ -19,7 +19,7 @@ function parseCSSVariable(current) {
     if (!match)
         return [,];
     const [, token1, token2, fallback] = match;
-    return [`--${token1 !== null && token1 !== void 0 ? token1 : token2}`, fallback];
+    return [`--${token1 ?? token2}`, fallback];
 }
 const maxDepth = 4;
 function getVariableValue(current, element, depth = 1) {

package/dist/es/framer-motion/dist/es/render/dom/utils/filter-props.mjs

@@ -28,7 +28,7 @@ try {
      */
     loadExternalIsValidProp(require("@emotion/is-prop-valid").default);
 }
-catch (_a) {
+catch {
     // We don't need to actually do anything here - the fallback is the existing `isPropValid`.
 }
 function filterProps(props, isDom, forwardMotionProps) {

package/dist/es/framer-motion/dist/es/render/html/utils/scrape-motion-values.mjs

@@ -2,7 +2,6 @@ import { isForcedMotionValue } from '../../../motion/utils/is-forced-motion-valu
 import { isMotionValue } from '../../../value/utils/is-motion-value.mjs';
 
 function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
-    var _a;
     const { style } = props;
     const newValues = {};
     for (const key in style) {
@@ -10,7 +9,7 @@ function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
             (prevProps.style &&
                 isMotionValue(prevProps.style[key])) ||
             isForcedMotionValue(key, props) ||
-            ((_a = visualElement === null || visualElement === void 0 ? void 0 : visualElement.getValue(key)) === null || _a === void 0 ? void 0 : _a.liveStyle) !== undefined) {
+            visualElement?.getValue(key)?.liveStyle !== undefined) {
             newValues[key] = style[key];
         }
     }

package/dist/es/framer-motion/dist/es/render/utils/KeyframesResolver.mjs

@@ -29,8 +29,7 @@ function measureAllKeyframes() {
             const restore = transformsToRestore.get(element);
             if (restore) {
                 restore.forEach(([key, value]) => {
-                    var _a;
-                    (_a = element.getValue(key)) === null || _a === void 0 ? void 0 : _a.set(value);
+                    element.getValue(key)?.set(value);
                 });
             }
         });
@@ -117,7 +116,7 @@ class KeyframeResolver {
                  * If the first keyframe is null, we need to find its value by sampling the element
                  */
                 if (i === 0) {
-                    const currentValue = motionValue === null || motionValue === void 0 ? void 0 : motionValue.get();
+                    const currentValue = motionValue?.get();
                     const finalKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];
                     if (currentValue !== undefined) {
                         unresolvedKeyframes[0] = currentValue;

package/dist/es/framer-motion/dist/es/render/utils/animation-state.mjs

@@ -21,9 +21,8 @@ function createAnimationState(visualElement) {
      * each active animation type into an object of resolved values for it.
      */
     const buildResolvedTypeValues = (type) => (acc, definition) => {
-        var _a;
         const resolved = resolveVariant(visualElement, definition, type === "exit"
-            ? (_a = visualElement.presenceContext) === null || _a === void 0 ? void 0 : _a.custom
+            ? visualElement.presenceContext?.custom
             : undefined);
         if (resolved) {
             const { transition, transitionEnd, ...target } = resolved;
@@ -271,7 +270,7 @@ function createAnimationState(visualElement) {
                 if (motionValue)
                     motionValue.liveStyle = true;
                 // @ts-expect-error - @mattgperry to figure if we should do something here
-                fallbackAnimation[key] = fallbackTarget !== null && fallbackTarget !== void 0 ? fallbackTarget : null;
+                fallbackAnimation[key] = fallbackTarget ?? null;
             });
             animations.push({ animation: fallbackAnimation });
         }
@@ -288,12 +287,11 @@ function createAnimationState(visualElement) {
      * Change whether a certain animation type is active.
      */
     function setActive(type, isActive) {
-        var _a;
         // If the active state hasn't changed, we can safely do nothing here
         if (state[type].isActive === isActive)
             return Promise.resolve();
         // Propagate active change to children
-        (_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.forEach((child) => { var _a; return (_a = child.animationState) === null || _a === void 0 ? void 0 : _a.setActive(type, isActive); });
+        visualElement.variantChildren?.forEach((child) => child.animationState?.setActive(type, isActive));
         state[type].isActive = isActive;
         const animations = animateChanges(type);
         for (const key in state) {

package/dist/es/framer-motion/dist/es/render/utils/motion-values.mjs

@@ -18,7 +18,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "12.6.2", `Attempting to mix Motion versions ${nextValue.version} with 12.6.2 may not work as expected.`);
+                warnOnce(nextValue.version === "12.6.3", `Attempting to mix Motion versions ${nextValue.version} with 12.6.3 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/framer-motion/dist/es/render/utils/resolve-variants.mjs

@@ -1,6 +1,6 @@
 function getValueState(visualElement) {
     const state = [{}, {}];
-    visualElement === null || visualElement === void 0 ? void 0 : visualElement.values.forEach((value, key) => {
+    visualElement?.values.forEach((value, key) => {
         state[0][key] = value.get();
         state[1][key] = value.getVelocity();
     });

package/dist/es/framer-motion/dist/es/utils/mix/complex.mjs

@@ -57,13 +57,12 @@ function mixObject(a, b) {
     };
 }
 function matchOrder(origin, target) {
-    var _a;
     const orderedOrigin = [];
     const pointers = { color: 0, var: 0, number: 0 };
     for (let i = 0; i < target.values.length; i++) {
         const type = target.types[i];
         const originIndex = origin.indexes[type][pointers[type]];
-        const originValue = (_a = origin.values[originIndex]) !== null && _a !== void 0 ? _a : 0;
+        const originValue = origin.values[originIndex] ?? 0;
         orderedOrigin[i] = originValue;
         pointers[type]++;
     }

package/dist/es/framer-motion/dist/es/value/types/complex/index.mjs

@@ -4,11 +4,10 @@ import { floatRegex } from '../utils/float-regex.mjs';
 import { sanitize } from '../utils/sanitize.mjs';
 
 function test(v) {
-    var _a, _b;
     return (isNaN(v) &&
         typeof v === "string" &&
-        (((_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) || 0) +
-            (((_b = v.match(colorRegex)) === null || _b === void 0 ? void 0 : _b.length) || 0) >
+        (v.match(floatRegex)?.length || 0) +
+            (v.match(colorRegex)?.length || 0) >
             0);
 }
 const NUMBER_TOKEN = "number";

package/dist/es/framer-motion/dist/es/value/use-scroll.mjs

@@ -29,8 +29,8 @@ function useScroll({ container, target, layoutEffect = true, ...options } = {})
             values.scrollYProgress.set(y.progress);
         }, {
             ...options,
-            container: (container === null || container === void 0 ? void 0 : container.current) || undefined,
-            target: (target === null || target === void 0 ? void 0 : target.current) || undefined,
+            container: container?.current || undefined,
+            target: target?.current || undefined,
         });
     }, [container, target, JSON.stringify(options.offset)]);
     return values;

package/dist/es/motion-dom/dist/es/animation/{controls/BaseGroup.mjs → GroupAnimation.mjs}

@@ -1,14 +1,13 @@
-import { supportsScrollTimeline } from '../../utils/supports/scroll-timeline.mjs';
+import { supportsScrollTimeline } from '../utils/supports/scroll-timeline.mjs';
 
-class BaseGroupPlaybackControls {
+class GroupAnimation {
     constructor(animations) {
         // Bound to accomodate common `return animation.stop` pattern
         this.stop = () => this.runAll("stop");
         this.animations = animations.filter(Boolean);
     }
     get finished() {
-        // Support for new finished Promise and legacy thennable API
-        return Promise.all(this.animations.map((animation) => "finished" in animation ? animation.finished : animation));
+        return Promise.all(this.animations.map((animation) => animation.finished));
     }
     /**
      * TODO: Filter out cancelled or stopped animations before returning
@@ -79,4 +78,4 @@ class BaseGroupPlaybackControls {
     }
 }
 
-export { BaseGroupPlaybackControls };
+export { GroupAnimation };

package/dist/es/motion-dom/dist/es/animation/GroupAnimationWithThen.mjs

@@ -0,0 +1,9 @@
+import { GroupAnimation } from './GroupAnimation.mjs';
+
+class GroupAnimationWithThen extends GroupAnimation {
+    then(onResolve, _onReject) {
+        return this.finished.finally(onResolve).then(() => { });
+    }
+}
+
+export { GroupAnimationWithThen };

package/dist/es/motion-dom/dist/es/animation/NativeAnimation.mjs

@@ -0,0 +1,161 @@
+import { invariant } from '../../../../motion-utils/dist/es/errors.mjs';
+import { noop } from '../../../../motion-utils/dist/es/noop.mjs';
+import { millisecondsToSeconds, secondsToMilliseconds } from '../../../../motion-utils/dist/es/time-conversion.mjs';
+import { style } from '../render/dom/style.mjs';
+import { getFinalKeyframe } from './keyframes/get-final.mjs';
+import { hydrateKeyframes } from './keyframes/hydrate.mjs';
+import { startWaapiAnimation } from './waapi/start-waapi-animation.mjs';
+import { applyGeneratorOptions } from './waapi/utils/apply-generator.mjs';
+
+const animationMaps = new WeakMap();
+const animationMapKey = (name, pseudoElement) => `${name}:${pseudoElement}`;
+function getAnimationMap(element) {
+    const map = animationMaps.get(element) || new Map();
+    animationMaps.set(element, map);
+    return map;
+}
+/**
+ * NativeAnimation implements AnimationPlaybackControls for the browser's Web Animations API.
+ */
+class NativeAnimation {
+    constructor(options) {
+        /**
+         * If we already have an animation, we don't need to instantiate one
+         * and can just use this as a controls interface.
+         */
+        if ("animation" in options) {
+            this.animation = options.animation;
+            return;
+        }
+        const { element, name, keyframes: unresolvedKeyframes, pseudoElement, allowFlatten = false, } = options;
+        let { transition } = options;
+        this.allowFlatten = allowFlatten;
+        /**
+         * Stop any existing animations on the element before reading existing keyframes.
+         *
+         * TODO: Check for VisualElement before using animation state. This is a fallback
+         * for mini animate(). Do this when implementing NativeAnimationExtended.
+         */
+        const animationMap = getAnimationMap(element);
+        const key = animationMapKey(name, pseudoElement || "");
+        const currentAnimation = animationMap.get(key);
+        currentAnimation && currentAnimation.stop();
+        /**
+         * TODO: If these keyframes aren't correctly hydrated then we want to throw
+         * run an instant animation.
+         */
+        const keyframes = hydrateKeyframes(element, name, unresolvedKeyframes, pseudoElement);
+        invariant(typeof transition.type !== "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "motion"?`);
+        transition = applyGeneratorOptions(transition);
+        this.animation = startWaapiAnimation(element, name, keyframes, transition, pseudoElement);
+        if (transition.autoplay === false) {
+            this.animation.pause();
+        }
+        this.removeAnimation = () => animationMap.delete(key);
+        this.animation.onfinish = () => {
+            if (!pseudoElement) {
+                style.set(element, name, getFinalKeyframe(keyframes, transition));
+            }
+            else {
+                this.commitStyles();
+            }
+            this.cancel();
+        };
+        /**
+         * TODO: Check for VisualElement before using animation state.
+         */
+        animationMap.set(key, this);
+    }
+    play() {
+        this.animation.play();
+    }
+    pause() {
+        this.animation.pause();
+    }
+    complete() {
+        this.animation.finish();
+    }
+    cancel() {
+        try {
+            this.animation.cancel();
+        }
+        catch (e) { }
+        this.removeAnimation();
+    }
+    stop() {
+        const { state } = this;
+        if (state === "idle" || state === "finished") {
+            return;
+        }
+        this.commitStyles();
+        this.cancel();
+    }
+    /**
+     * WAAPI doesn't natively have any interruption capabilities.
+     *
+     * In this method, we commit styles back to the DOM before cancelling
+     * the animation.
+     *
+     * This is designed to be overridden by NativeAnimationExtended, which
+     * will create a renderless JS animation and sample it twice to calculate
+     * its current value, "previous" value, and therefore allow
+     * Motion to also correctly calculate velocity for any subsequent animation
+     * while deferring the commit until the next animation frame.
+     */
+    commitStyles() {
+        this.animation.commitStyles?.();
+    }
+    get duration() {
+        console.log(this.animation.effect?.getComputedTiming());
+        const duration = this.animation.effect?.getComputedTiming().duration || 0;
+        return millisecondsToSeconds(Number(duration));
+    }
+    get time() {
+        return millisecondsToSeconds(Number(this.animation.currentTime) || 0);
+    }
+    set time(newTime) {
+        this.animation.currentTime = secondsToMilliseconds(newTime);
+    }
+    /**
+     * The playback speed of the animation.
+     * 1 = normal speed, 2 = double speed, 0.5 = half speed.
+     */
+    get speed() {
+        return this.animation.playbackRate;
+    }
+    set speed(newSpeed) {
+        this.animation.playbackRate = newSpeed;
+    }
+    get state() {
+        return this.animation.playState;
+    }
+    get startTime() {
+        return Number(this.animation.startTime);
+    }
+    get finished() {
+        return this.animation.finished;
+    }
+    flatten() {
+        if (this.allowFlatten) {
+            this.animation.effect?.updateTiming({ easing: "linear" });
+        }
+    }
+    /**
+     * Attaches a timeline to the animation, for instance the `ScrollTimeline`.
+     */
+    attachTimeline(timeline) {
+        this.animation.timeline = timeline;
+        this.animation.onfinish = null;
+        return noop;
+    }
+    /**
+     * Allows the animation to be awaited.
+     *
+     * @deprecated Use `finished` instead.
+     */
+    then(onResolve, onReject) {
+        return this.finished.then(onResolve).catch(onReject);
+    }
+}
+
+export { NativeAnimation };

package/dist/es/motion-dom/dist/es/animation/generators/utils/is-generator.mjs

@@ -1,5 +1,5 @@
 function isGenerator(type) {
-    return typeof type === "function";
+    return typeof type === "function" && "applyToOptions" in type;
 }
 
 export { isGenerator };

package/dist/es/motion-dom/dist/es/animation/keyframes/get-final.mjs

@@ -0,0 +1,12 @@
+const isNotNull = (value) => value !== null;
+function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe) {
+    const resolvedKeyframes = keyframes.filter(isNotNull);
+    const index = repeat && repeatType !== "loop" && repeat % 2 === 1
+        ? 0
+        : resolvedKeyframes.length - 1;
+    return !index || finalKeyframe === undefined
+        ? resolvedKeyframes[index]
+        : finalKeyframe;
+}
+
+export { getFinalKeyframe };