framer-motion 11.18.0 → 11.18.2

package/dist/cjs/client.js

@@ -409,7 +409,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "11.18.0";
+        this.version = "11.18.2";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -1797,8 +1797,9 @@ class BaseAnimation {
         if (!isGenerator && !canAnimate(keyframes, name, type, velocity)) {
             // Finish immediately
             if (!delay) {
-                onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(getFinalKeyframe(keyframes, this.options, finalKeyframe));
-                onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+                onUpdate &&
+                    onUpdate(getFinalKeyframe(keyframes, this.options, finalKeyframe));
+                onComplete && onComplete();
                 this.resolveFinishedPromise();
                 return;
             }
@@ -3071,13 +3072,12 @@ class AcceleratedAnimation extends BaseAnimation {
         this.resolver.scheduleResolve();
     }
     initPlayback(keyframes, finalKeyframe) {
-        var _a;
         let { duration = 300, times, ease, type, motionValue, name, startTime, } = this.options;
         /**
          * If element has since been unmounted, return false to indicate
          * the animation failed to initialised.
          */
-        if (!((_a = motionValue.owner) === null || _a === void 0 ? void 0 : _a.current)) {
+        if (!motionValue.owner || !motionValue.owner.current) {
             return false;
         }
         /**
@@ -3284,17 +3284,21 @@ class AcceleratedAnimation extends BaseAnimation {
     }
     static supports(options) {
         const { motionValue, name, repeatDelay, repeatType, damping, type } = options;
+        if (!motionValue ||
+            !motionValue.owner ||
+            !(motionValue.owner.current instanceof HTMLElement)) {
+            return false;
+        }
+        const { onUpdate, transformTemplate } = motionValue.owner.getProps();
         return (supportsWaapi() &&
             name &&
             acceleratedValues.has(name) &&
-            motionValue &&
-            motionValue.owner &&
-            motionValue.owner.current instanceof HTMLElement &&
             /**
              * If we're outputting values to onUpdate then we can't use WAAPI as there's
              * no way to read the value from WAAPI every frame.
              */
-            !motionValue.owner.getProps().onUpdate &&
+            !onUpdate &&
+            !transformTemplate &&
             !repeatDelay &&
             repeatType !== "mirror" &&
             damping !== 0 &&
@@ -5201,7 +5205,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.18.0", `Attempting to mix Motion versions ${nextValue.version} with 11.18.0 may not work as expected.`);
+                warnOnce(nextValue.version === "11.18.2", `Attempting to mix Motion versions ${nextValue.version} with 11.18.2 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -5858,21 +5862,6 @@ function buildHTMLStyles(state, latestValues, transformTemplate) {
     }
 }
 
-function calcOrigin(origin, offset, size) {
-    return typeof origin === "string"
-        ? origin
-        : px.transform(offset + size * origin);
-}
-/**
- * The SVG transform origin defaults are different to CSS and is less intuitive,
- * so we use the measured dimensions of the SVG to reconcile these.
- */
-function calcSVGTransformOrigin(dimensions, originX, originY) {
-    const pxOriginX = calcOrigin(originX, dimensions.x, dimensions.width);
-    const pxOriginY = calcOrigin(originY, dimensions.y, dimensions.height);
-    return `${pxOriginX} ${pxOriginY}`;
-}
-
 const dashKeys = {
     offset: "stroke-dashoffset",
     array: "stroke-dasharray",
@@ -5902,6 +5891,21 @@ function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true
     attrs[keys.array] = `${pathLength} ${pathSpacing}`;
 }
 
+function calcOrigin(origin, offset, size) {
+    return typeof origin === "string"
+        ? origin
+        : px.transform(offset + size * origin);
+}
+/**
+ * The SVG transform origin defaults are different to CSS and is less intuitive,
+ * so we use the measured dimensions of the SVG to reconcile these.
+ */
+function calcSVGTransformOrigin(dimensions, originX, originY) {
+    const pxOriginX = calcOrigin(originX, dimensions.x, dimensions.width);
+    const pxOriginY = calcOrigin(originY, dimensions.y, dimensions.height);
+    return `${pxOriginX} ${pxOriginY}`;
+}
+
 /**
  * Build SVG visual attrbutes, like cx and style.transform
  */
@@ -9086,10 +9090,12 @@ const svgMotionConfig = {
             }
             if (!needsMeasure)
                 return;
-            frame.read(() => updateSVGDimensions(current, renderState));
-            frame.render(() => {
-                buildSVGAttrs(renderState, latestValues, isSVGTag(current.tagName), props.transformTemplate);
-                renderSVG(current, renderState);
+            frame.read(() => {
+                updateSVGDimensions(current, renderState);
+                frame.render(() => {
+                    buildSVGAttrs(renderState, latestValues, isSVGTag(current.tagName), props.transformTemplate);
+                    renderSVG(current, renderState);
+                });
             });
         },
     }),

package/dist/cjs/dom-mini.js

@@ -550,7 +550,10 @@ class NativeAnimation extends motionDom.NativeAnimationControls {
             this.setValue = isCSSVar ? setCSSVar : setStyle;
             this.options = options;
             this.updateFinishedPromise();
-            this.removeAnimation = () => { var _a; return (_a = state.get(element)) === null || _a === void 0 ? void 0 : _a.delete(valueName); };
+            this.removeAnimation = () => {
+                const elementState = state.get(element);
+                elementState && elementState.delete(valueName);
+            };
         };
         if (!supportsWaapi()) {
             super();

package/dist/cjs/dom.js

@@ -994,7 +994,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "11.18.0";
+        this.version = "11.18.2";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -2412,8 +2412,9 @@ class BaseAnimation {
         if (!isGenerator && !canAnimate(keyframes, name, type, velocity)) {
             // Finish immediately
             if (!delay) {
-                onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(getFinalKeyframe(keyframes, this.options, finalKeyframe));
-                onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+                onUpdate &&
+                    onUpdate(getFinalKeyframe(keyframes, this.options, finalKeyframe));
+                onComplete && onComplete();
                 this.resolveFinishedPromise();
                 return;
             }
@@ -3373,13 +3374,12 @@ class AcceleratedAnimation extends BaseAnimation {
         this.resolver.scheduleResolve();
     }
     initPlayback(keyframes, finalKeyframe) {
-        var _a;
         let { duration = 300, times, ease, type, motionValue, name, startTime, } = this.options;
         /**
          * If element has since been unmounted, return false to indicate
          * the animation failed to initialised.
          */
-        if (!((_a = motionValue.owner) === null || _a === void 0 ? void 0 : _a.current)) {
+        if (!motionValue.owner || !motionValue.owner.current) {
             return false;
         }
         /**
@@ -3586,17 +3586,21 @@ class AcceleratedAnimation extends BaseAnimation {
     }
     static supports(options) {
         const { motionValue, name, repeatDelay, repeatType, damping, type } = options;
+        if (!motionValue ||
+            !motionValue.owner ||
+            !(motionValue.owner.current instanceof HTMLElement)) {
+            return false;
+        }
+        const { onUpdate, transformTemplate } = motionValue.owner.getProps();
         return (supportsWaapi() &&
             name &&
             acceleratedValues.has(name) &&
-            motionValue &&
-            motionValue.owner &&
-            motionValue.owner.current instanceof HTMLElement &&
             /**
              * If we're outputting values to onUpdate then we can't use WAAPI as there's
              * no way to read the value from WAAPI every frame.
              */
-            !motionValue.owner.getProps().onUpdate &&
+            !onUpdate &&
+            !transformTemplate &&
             !repeatDelay &&
             repeatType !== "mirror" &&
             damping !== 0 &&
@@ -3924,7 +3928,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.18.0", `Attempting to mix Motion versions ${nextValue.version} with 11.18.0 may not work as expected.`);
+                warnOnce(nextValue.version === "11.18.2", `Attempting to mix Motion versions ${nextValue.version} with 11.18.2 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -4581,21 +4585,6 @@ function buildHTMLStyles(state, latestValues, transformTemplate) {
     }
 }
 
-function calcOrigin(origin, offset, size) {
-    return typeof origin === "string"
-        ? origin
-        : px.transform(offset + size * origin);
-}
-/**
- * The SVG transform origin defaults are different to CSS and is less intuitive,
- * so we use the measured dimensions of the SVG to reconcile these.
- */
-function calcSVGTransformOrigin(dimensions, originX, originY) {
-    const pxOriginX = calcOrigin(originX, dimensions.x, dimensions.width);
-    const pxOriginY = calcOrigin(originY, dimensions.y, dimensions.height);
-    return `${pxOriginX} ${pxOriginY}`;
-}
-
 const dashKeys = {
     offset: "stroke-dashoffset",
     array: "stroke-dasharray",
@@ -4625,6 +4614,21 @@ function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true
     attrs[keys.array] = `${pathLength} ${pathSpacing}`;
 }
 
+function calcOrigin(origin, offset, size) {
+    return typeof origin === "string"
+        ? origin
+        : px.transform(offset + size * origin);
+}
+/**
+ * The SVG transform origin defaults are different to CSS and is less intuitive,
+ * so we use the measured dimensions of the SVG to reconcile these.
+ */
+function calcSVGTransformOrigin(dimensions, originX, originY) {
+    const pxOriginX = calcOrigin(originX, dimensions.x, dimensions.width);
+    const pxOriginY = calcOrigin(originY, dimensions.y, dimensions.height);
+    return `${pxOriginX} ${pxOriginY}`;
+}
+
 /**
  * Build SVG visual attrbutes, like cx and style.transform
  */
@@ -5090,7 +5094,10 @@ class NativeAnimation extends motionDom.NativeAnimationControls {
             this.setValue = isCSSVar ? setCSSVar : setStyle;
             this.options = options;
             this.updateFinishedPromise();
-            this.removeAnimation = () => { var _a; return (_a = state.get(element)) === null || _a === void 0 ? void 0 : _a.delete(valueName); };
+            this.removeAnimation = () => {
+                const elementState = state.get(element);
+                elementState && elementState.delete(valueName);
+            };
         };
         if (!supportsWaapi()) {
             super();

package/dist/cjs/index.js

@@ -445,7 +445,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "11.18.0";
+        this.version = "11.18.2";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -1840,8 +1840,9 @@ class BaseAnimation {
         if (!isGenerator && !canAnimate(keyframes, name, type, velocity)) {
             // Finish immediately
             if (instantAnimationState.current || !delay) {
-                onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(getFinalKeyframe(keyframes, this.options, finalKeyframe));
-                onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+                onUpdate &&
+                    onUpdate(getFinalKeyframe(keyframes, this.options, finalKeyframe));
+                onComplete && onComplete();
                 this.resolveFinishedPromise();
                 return;
             }
@@ -3118,13 +3119,12 @@ class AcceleratedAnimation extends BaseAnimation {
         this.resolver.scheduleResolve();
     }
     initPlayback(keyframes, finalKeyframe) {
-        var _a;
         let { duration = 300, times, ease, type, motionValue, name, startTime, } = this.options;
         /**
          * If element has since been unmounted, return false to indicate
          * the animation failed to initialised.
          */
-        if (!((_a = motionValue.owner) === null || _a === void 0 ? void 0 : _a.current)) {
+        if (!motionValue.owner || !motionValue.owner.current) {
             return false;
         }
         /**
@@ -3331,17 +3331,21 @@ class AcceleratedAnimation extends BaseAnimation {
     }
     static supports(options) {
         const { motionValue, name, repeatDelay, repeatType, damping, type } = options;
+        if (!motionValue ||
+            !motionValue.owner ||
+            !(motionValue.owner.current instanceof HTMLElement)) {
+            return false;
+        }
+        const { onUpdate, transformTemplate } = motionValue.owner.getProps();
         return (supportsWaapi() &&
             name &&
             acceleratedValues.has(name) &&
-            motionValue &&
-            motionValue.owner &&
-            motionValue.owner.current instanceof HTMLElement &&
             /**
              * If we're outputting values to onUpdate then we can't use WAAPI as there's
              * no way to read the value from WAAPI every frame.
              */
-            !motionValue.owner.getProps().onUpdate &&
+            !onUpdate &&
+            !transformTemplate &&
             !repeatDelay &&
             repeatType !== "mirror" &&
             damping !== 0 &&
@@ -5215,7 +5219,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.18.0", `Attempting to mix Motion versions ${nextValue.version} with 11.18.0 may not work as expected.`);
+                warnOnce(nextValue.version === "11.18.2", `Attempting to mix Motion versions ${nextValue.version} with 11.18.2 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -5872,21 +5876,6 @@ function buildHTMLStyles(state, latestValues, transformTemplate) {
     }
 }
 
-function calcOrigin$1(origin, offset, size) {
-    return typeof origin === "string"
-        ? origin
-        : px.transform(offset + size * origin);
-}
-/**
- * The SVG transform origin defaults are different to CSS and is less intuitive,
- * so we use the measured dimensions of the SVG to reconcile these.
- */
-function calcSVGTransformOrigin(dimensions, originX, originY) {
-    const pxOriginX = calcOrigin$1(originX, dimensions.x, dimensions.width);
-    const pxOriginY = calcOrigin$1(originY, dimensions.y, dimensions.height);
-    return `${pxOriginX} ${pxOriginY}`;
-}
-
 const dashKeys = {
     offset: "stroke-dashoffset",
     array: "stroke-dasharray",
@@ -5916,6 +5905,21 @@ function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true
     attrs[keys.array] = `${pathLength} ${pathSpacing}`;
 }
 
+function calcOrigin$1(origin, offset, size) {
+    return typeof origin === "string"
+        ? origin
+        : px.transform(offset + size * origin);
+}
+/**
+ * The SVG transform origin defaults are different to CSS and is less intuitive,
+ * so we use the measured dimensions of the SVG to reconcile these.
+ */
+function calcSVGTransformOrigin(dimensions, originX, originY) {
+    const pxOriginX = calcOrigin$1(originX, dimensions.x, dimensions.width);
+    const pxOriginY = calcOrigin$1(originY, dimensions.y, dimensions.height);
+    return `${pxOriginX} ${pxOriginY}`;
+}
+
 /**
  * Build SVG visual attrbutes, like cx and style.transform
  */
@@ -6530,7 +6534,10 @@ class NativeAnimation extends motionDom.NativeAnimationControls {
             this.setValue = isCSSVar ? setCSSVar : setStyle;
             this.options = options;
             this.updateFinishedPromise();
-            this.removeAnimation = () => { var _a; return (_a = state.get(element)) === null || _a === void 0 ? void 0 : _a.delete(valueName); };
+            this.removeAnimation = () => {
+                const elementState = state.get(element);
+                elementState && elementState.delete(valueName);
+            };
         };
         if (!supportsWaapi()) {
             super();
@@ -11095,10 +11102,12 @@ const svgMotionConfig = {
             }
             if (!needsMeasure)
                 return;
-            frame.read(() => updateSVGDimensions(current, renderState));
-            frame.render(() => {
-                buildSVGAttrs(renderState, latestValues, isSVGTag(current.tagName), props.transformTemplate);
-                renderSVG(current, renderState);
+            frame.read(() => {
+                updateSVGDimensions(current, renderState);
+                frame.render(() => {
+                    buildSVGAttrs(renderState, latestValues, isSVGTag(current.tagName), props.transformTemplate);
+                    renderSVG(current, renderState);
+                });
             });
         },
     }),

package/dist/cjs/m.js

@@ -1010,21 +1010,6 @@ function buildHTMLStyles(state, latestValues, transformTemplate) {
     }
 }
 
-function calcOrigin(origin, offset, size) {
-    return typeof origin === "string"
-        ? origin
-        : px.transform(offset + size * origin);
-}
-/**
- * The SVG transform origin defaults are different to CSS and is less intuitive,
- * so we use the measured dimensions of the SVG to reconcile these.
- */
-function calcSVGTransformOrigin(dimensions, originX, originY) {
-    const pxOriginX = calcOrigin(originX, dimensions.x, dimensions.width);
-    const pxOriginY = calcOrigin(originY, dimensions.y, dimensions.height);
-    return `${pxOriginX} ${pxOriginY}`;
-}
-
 const dashKeys = {
     offset: "stroke-dashoffset",
     array: "stroke-dasharray",
@@ -1054,6 +1039,21 @@ function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true
     attrs[keys.array] = `${pathLength} ${pathSpacing}`;
 }
 
+function calcOrigin(origin, offset, size) {
+    return typeof origin === "string"
+        ? origin
+        : px.transform(offset + size * origin);
+}
+/**
+ * The SVG transform origin defaults are different to CSS and is less intuitive,
+ * so we use the measured dimensions of the SVG to reconcile these.
+ */
+function calcSVGTransformOrigin(dimensions, originX, originY) {
+    const pxOriginX = calcOrigin(originX, dimensions.x, dimensions.width);
+    const pxOriginY = calcOrigin(originY, dimensions.y, dimensions.height);
+    return `${pxOriginX} ${pxOriginY}`;
+}
+
 /**
  * Build SVG visual attrbutes, like cx and style.transform
  */
@@ -1250,10 +1250,12 @@ const svgMotionConfig = {
             }
             if (!needsMeasure)
                 return;
-            frame.read(() => updateSVGDimensions(current, renderState));
-            frame.render(() => {
-                buildSVGAttrs(renderState, latestValues, isSVGTag(current.tagName), props.transformTemplate);
-                renderSVG(current, renderState);
+            frame.read(() => {
+                updateSVGDimensions(current, renderState);
+                frame.render(() => {
+                    buildSVGAttrs(renderState, latestValues, isSVGTag(current.tagName), props.transformTemplate);
+                    renderSVG(current, renderState);
+                });
             });
         },
     }),

package/dist/cjs/mini.js

@@ -177,7 +177,10 @@ class NativeAnimation extends motionDom.NativeAnimationControls {
             this.setValue = isCSSVar ? setCSSVar : setStyle;
             this.options = options;
             this.updateFinishedPromise();
-            this.removeAnimation = () => { var _a; return (_a = state.get(element)) === null || _a === void 0 ? void 0 : _a.delete(valueName); };
+            this.removeAnimation = () => {
+                const elementState = state.get(element);
+                elementState && elementState.delete(valueName);
+            };
         };
         if (!supportsWaapi()) {
             super();

package/dist/client.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import * as React$1 from 'react';
+import * as react from 'react';
 import { SVGAttributes, CSSProperties, PropsWithoutRef, RefAttributes, JSX } from 'react';
 import { AnimationPlaybackControls, TransformProperties, SVGPathProperties, VariableKeyframesDefinition, Easing, Transition as Transition$1, ProgressTimeline } from 'motion-dom';
 
@@ -21,6 +21,7 @@ interface Owner {
     current: HTMLElement | unknown;
     getProps: () => {
         onUpdate?: (latest: ResolvedValues$1) => void;
+        transformTemplate?: (transform: TransformProperties, generatedTransform: string) => string;
     };
 }
 /**
@@ -1232,7 +1233,7 @@ declare class DragControls {
      *
      * @public
      */
-    start(event: React$1.PointerEvent | PointerEvent, options?: DragControlOptions): void;
+    start(event: react.PointerEvent | PointerEvent, options?: DragControlOptions): void;
 }
 
 type DragElastic = boolean | number | Partial<BoundingBox>;
@@ -2375,9 +2376,9 @@ declare global {
 
 type DOMMotionComponents = HTMLMotionComponents & SVGMotionComponents;
 
-declare const createMotionComponent: <Props, TagName extends string = "div">(Component: string | TagName | React$1.ComponentType<Props>, { forwardMotionProps }?: {
+declare const createMotionComponent: <Props, TagName extends string = "div">(Component: string | TagName | react.ComponentType<Props>, { forwardMotionProps }?: {
     forwardMotionProps: boolean;
-}) => TagName extends "symbol" | "clipPath" | "filter" | "mask" | "marker" | "text" | "animate" | "stop" | "path" | "image" | "circle" | "switch" | "svg" | keyof HTMLElements | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "line" | "linearGradient" | "metadata" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "textPath" | "tspan" | "use" | "view" ? DOMMotionComponents[TagName] : React$1.ComponentType<MotionComponentProps<React$1.PropsWithChildren<Props>>>;
+}) => TagName extends "symbol" | "clipPath" | "filter" | "mask" | "marker" | "text" | "animate" | "stop" | "path" | "image" | "circle" | "switch" | "svg" | keyof HTMLElements | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "line" | "linearGradient" | "metadata" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "textPath" | "tspan" | "use" | "view" ? DOMMotionComponents[TagName] : react.ComponentType<MotionComponentProps<react.PropsWithChildren<Props>>>;
 
 /**
  * HTML components

package/dist/dom-mini.d.ts

@@ -1,4 +1,4 @@
-import { AnimationPlaybackControls, AnimationPlaybackOptions, Transition, UnresolvedValueKeyframe, ElementOrSelector, DOMKeyframesDefinition, AnimationOptions, GroupPlaybackControls } from 'motion-dom';
+import { AnimationPlaybackControls, TransformProperties, AnimationPlaybackOptions, Transition, UnresolvedValueKeyframe, ElementOrSelector, DOMKeyframesDefinition, AnimationOptions, GroupPlaybackControls } from 'motion-dom';
 
 /**
  * @public
@@ -18,6 +18,7 @@ interface Owner {
     current: HTMLElement | unknown;
     getProps: () => {
         onUpdate?: (latest: ResolvedValues) => void;
+        transformTemplate?: (transform: TransformProperties, generatedTransform: string) => string;
     };
 }
 /**

package/dist/dom-mini.js

@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Motion={})}(this,(function(t){"use strict";const e=t=>t;let n=e;function i(t){let e;return()=>(void 0===e&&(e=t()),e)}const a=(t,e,n)=>{const i=e-t;return 0===i?1:(n-t)/i},r=t=>1e3*t,o=t=>t/1e3,s=i(()=>void 0!==window.ScrollTimeline);class u extends class{constructor(t){this.stop=()=>this.runAll("stop"),this.animations=t.filter(Boolean)}get finished(){return Promise.all(this.animations.map(t=>"finished"in t?t.finished:t))}getAll(t){return this.animations[0][t]}setAll(t,e){for(let n=0;n<this.animations.length;n++)this.animations[n][t]=e}attachTimeline(t,e){const n=this.animations.map(n=>s()&&n.attachTimeline?n.attachTimeline(t):"function"==typeof e?e(n):void 0);return()=>{n.forEach((t,e)=>{t&&t(),this.animations[e].stop()})}}get time(){return this.getAll("time")}set time(t){this.setAll("time",t)}get speed(){return this.getAll("speed")}set speed(t){this.setAll("speed",t)}get startTime(){return this.getAll("startTime")}get duration(){let t=0;for(let e=0;e<this.animations.length;e++)t=Math.max(t,this.animations[e].duration);return t}runAll(t){this.animations.forEach(e=>e[t]())}flatten(){this.runAll("flatten")}play(){this.runAll("play")}pause(){this.runAll("pause")}cancel(){this.runAll("cancel")}complete(){this.runAll("complete")}}{then(t,e){return Promise.all(this.animations).then(t).catch(e)}}function l(t,e=100,n){const i=n({...t,keyframes:[0,e]}),a=Math.min(function(t){let e=0,n=t.next(e);for(;!n.done&&e<2e4;)e+=50,n=t.next(e);return e>=2e4?1/0:e}(i),2e4);return{type:"keyframes",ease:t=>i.next(a*t).value/e,duration:o(a)}}function c(t){return"function"==typeof t}const h={linearEasing:void 0};function f(t,e){const n=i(t);return()=>{var t;return null!==(t=h[e])&&void 0!==t?t:n()}}const m=f(()=>{try{document.createElement("div").animate({opacity:0},{easing:"linear(0, 1)"})}catch(t){return!1}return!0},"linearEasing"),d=([t,e,n,i])=>`cubic-bezier(${t}, ${e}, ${n}, ${i})`,p={linear:"linear",ease:"ease",easeIn:"ease-in",easeOut:"ease-out",easeInOut:"ease-in-out",circIn:d([0,.65,.55,1]),circOut:d([.55,0,1,.45]),backIn:d([.31,.01,.66,-.59]),backOut:d([.33,1.53,.69,.99])};function y(t,e){return t?"function"==typeof t&&m()?((t,e,n=10)=>{let i="";const r=Math.max(Math.round(e/n),2);for(let e=0;e<r;e++)i+=t(a(0,r-1,e))+", ";return`linear(${i.substring(0,i.length-2)})`})(t,e):(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?d(t):Array.isArray(t)?t.map(t=>y(t,e)||p.easeOut):p[t]:void 0}function g(t,e,n){var i;if(t instanceof Element)return[t];if("string"==typeof t){let a=document;e&&(a=e.current);const r=null!==(i=null==n?void 0:n[t])&&void 0!==i?i:a.querySelectorAll(t);return r?Array.from(r):[]}return Array.from(t)}function v(t,e){return n=t,Array.isArray(n)&&"number"!=typeof n[0]?t[((t,e,n)=>{const i=e-t;return((n-t)%i+i)%i+t})(0,t.length,e)]:t;var n}const A=(t,e,n)=>t+(e-t)*n;function b(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const r=a(0,e,i);t.push(A(n,1,r))}}function T(t){const e=[0];return b(e,t.length-1),e}function x(t,e,n,i){return"string"==typeof t&&function(t){return"object"==typeof t&&!Array.isArray(t)}(e)?g(t,n,i):t instanceof NodeList?Array.from(t):Array.isArray(t)?t:[t]}function P(t,e,n){return t*(e+1)}function w(t,e,n,i){var a;return"number"==typeof e?e:e.startsWith("-")||e.startsWith("+")?Math.max(0,t+parseFloat(e)):"<"===e?n:null!==(a=i.get(e))&&void 0!==a?a:t}function k(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}function M(t,e,n,i,a,r){!function(t,e,n){for(let i=0;i<t.length;i++){const a=t[i];a.at>e&&a.at<n&&(k(t,a),i--)}}(t,a,r);for(let o=0;o<e.length;o++)t.push({value:e[o],at:A(a,r,i[o]),easing:v(n,o)})}function O(t,e){for(let n=0;n<t.length;n++)t[n]=t[n]/(e+1)}function R(t,e){return t.at===e.at?null===t.value?1:null===e.value?-1:0:t.at-e.at}function W(t,e){return!e.has(t)&&e.set(t,{}),e.get(t)}function E(t,e){return e[t]||(e[t]=[]),e[t]}function F(t){return Array.isArray(t)?t:[t]}function B(t,e){return t&&t[e]?{...t,...t[e]}:{...t}}const S=t=>"number"==typeof t,$=t=>t.every(S);const I=(t=>({test:e=>"string"==typeof e&&e.endsWith(t)&&1===e.split(" ").length,parse:parseFloat,transform:e=>`${e}${t}`}))("px"),L={borderWidth:I,borderTopWidth:I,borderRightWidth:I,borderBottomWidth:I,borderLeftWidth:I,borderRadius:I,radius:I,borderTopLeftRadius:I,borderTopRightRadius:I,borderBottomRightRadius:I,borderBottomLeftRadius:I,width:I,maxWidth:I,height:I,maxHeight:I,top:I,right:I,bottom:I,left:I,padding:I,paddingTop:I,paddingRight:I,paddingBottom:I,paddingLeft:I,margin:I,marginTop:I,marginRight:I,marginBottom:I,marginLeft:I,backgroundPositionX:I,backgroundPositionY:I},V=t=>null!==t;function j(t,e,n){t.style.setProperty("--"+e,n)}function q(t,e,n){t.style[e]=n}const C=i(()=>{try{document.createElement("div").animate({opacity:[1]})}catch(t){return!1}return!0}),N=i(()=>Object.hasOwnProperty.call(Element.prototype,"animate")),z=new WeakMap;function D(t){const e=z.get(t)||new Map;return z.set(t,e),z.get(t)}class H extends class{constructor(t){this.animation=t}get duration(){var t,e,n;const i=(null===(e=null===(t=this.animation)||void 0===t?void 0:t.effect)||void 0===e?void 0:e.getComputedTiming().duration)||(null===(n=this.options)||void 0===n?void 0:n.duration)||300;return o(Number(i))}get time(){var t;return this.animation?o((null===(t=this.animation)||void 0===t?void 0:t.currentTime)||0):0}set time(t){this.animation&&(this.animation.currentTime=r(t))}get speed(){return this.animation?this.animation.playbackRate:1}set speed(t){this.animation&&(this.animation.playbackRate=t)}get state(){return this.animation?this.animation.playState:"finished"}get startTime(){return this.animation?this.animation.startTime:null}get finished(){return this.animation?this.animation.finished:Promise.resolve()}play(){this.animation&&this.animation.play()}pause(){this.animation&&this.animation.pause()}stop(){this.animation&&"idle"!==this.state&&"finished"!==this.state&&(this.animation.commitStyles&&this.animation.commitStyles(),this.cancel())}flatten(){var t;this.animation&&(null===(t=this.animation.effect)||void 0===t||t.updateTiming({easing:"linear"}))}attachTimeline(t){return this.animation&&function(t,e){t.timeline=e,t.onfinish=null}(this.animation,t),e}complete(){this.animation&&this.animation.finish()}cancel(){try{this.animation&&this.animation.cancel()}catch(t){}}}{constructor(t,e,i,a){const o=e.startsWith("--");n("string"!=typeof a.type);const s=D(t).get(e);s&&s.stop();if(Array.isArray(i)||(i=[i]),function(t,e,n){for(let i=0;i<e.length;i++)null===e[i]&&(e[i]=0===i?n():e[i-1]),"number"==typeof e[i]&&L[t]&&(e[i]=L[t].transform(e[i]));!C()&&e.length<2&&e.unshift(n())}(e,i,()=>e.startsWith("--")?t.style.getPropertyValue(e):window.getComputedStyle(t)[e]),c(a.type)){const t=l(a,100,a.type);a.ease=m()?t.ease:"easeOut",a.duration=r(t.duration),a.type="keyframes"}else a.ease=a.ease||"easeOut";const u=()=>{this.setValue(t,e,function(t,{repeat:e,repeatType:n="loop"},i){const a=t.filter(V),r=e&&"loop"!==n&&e%2==1?0:a.length-1;return r&&void 0!==i?i:a[r]}(i,a)),this.cancel(),this.resolveFinishedPromise()},h=()=>{this.setValue=o?j:q,this.options=a,this.updateFinishedPromise(),this.removeAnimation=()=>{var n;return null===(n=z.get(t))||void 0===n?void 0:n.delete(e)}};N()?(super(function(t,e,n,{delay:i=0,duration:a=300,repeat:r=0,repeatType:o="loop",ease:s="easeInOut",times:u}={}){const l={[e]:n};u&&(l.offset=u);const c=y(s,a);return Array.isArray(c)&&(l.easing=c),t.animate(l,{delay:i,duration:a,easing:Array.isArray(c)?"linear":c,fill:"both",iterations:r+1,direction:"reverse"===o?"alternate":"normal"})}(t,e,i,a)),h(),!1===a.autoplay&&this.animation.pause(),this.animation.onfinish=u,D(t).set(e,this)):(super(),h(),u())}then(t,e){return this.currentFinishedPromise.then(t,e)}updateFinishedPromise(){this.currentFinishedPromise=new Promise(t=>{this.resolveFinishedPromise=t})}play(){"finished"===this.state&&this.updateFinishedPromise(),super.play()}cancel(){this.removeAnimation(),super.cancel()}}function X(t,e,n,i){const a=g(t,i),o=a.length,s=[];for(let t=0;t<o;t++){const i=a[t],c={...n};"function"==typeof c.delay&&(c.delay=c.delay(t,o));for(const t in e){const n=e[t],a={...(u=c,l=t,u?u[l]||u.default||u:void 0)};a.duration=a.duration?r(a.duration):a.duration,a.delay=r(a.delay||0),s.push(new H(i,t,n,a))}}var u,l;return s}const Y=(t=>function(e,n,i){return new u(X(e,n,i,t))})();t.animate=Y,t.animateSequence=function(t,e){const n=[];return function(t,{defaultTransition:e={},...n}={},i,o){const s=e.duration||.3,u=new Map,h=new Map,f={},m=new Map;let d=0,p=0,y=0;for(let n=0;n<t.length;n++){const a=t[n];if("string"==typeof a){m.set(a,p);continue}if(!Array.isArray(a)){m.set(a.name,w(p,a.at,d,m));continue}let[u,A,k={}]=a;void 0!==k.at&&(p=w(p,k.at,d,m));let R=0;const S=(t,n,i,a=0,u=0)=>{const h=F(t),{delay:f=0,times:m=T(h),type:d="keyframes",repeat:g,repeatType:A,repeatDelay:x=0,...w}=n;let{ease:k=e.ease||"easeOut",duration:W}=n;const E="function"==typeof f?f(a,u):f,B=h.length,S=c(d)?d:null==o?void 0:o[d];if(B<=2&&S){let t=100;if(2===B&&$(h)){const e=h[1]-h[0];t=Math.abs(e)}const e={...w};void 0!==W&&(e.duration=r(W));const n=l(e,t,S);k=n.ease,W=n.duration}null!=W||(W=s);const I=p+E;1===m.length&&0===m[0]&&(m[1]=1);const L=m.length-h.length;if(L>0&&b(m,L),1===h.length&&h.unshift(null),g){W=P(W,g);const t=[...h],e=[...m];k=Array.isArray(k)?[...k]:[k];const n=[...k];for(let i=0;i<g;i++){h.push(...t);for(let a=0;a<t.length;a++)m.push(e[a]+(i+1)),k.push(0===a?"linear":v(n,a-1))}O(m,g)}const V=I+W;M(i,h,k,m,I,V),R=Math.max(E+W,R),y=Math.max(V,y)};if(g=u,Boolean(g&&g.getVelocity)){S(A,k,E("default",W(u,h)))}else{const t=x(u,A,i,f),e=t.length;for(let n=0;n<e;n++){A=A,k=k;const i=W(t[n],h);for(const t in A)S(A[t],B(k,t),E(t,i),n,e)}}d=p,p+=R}var g;return h.forEach((t,i)=>{for(const r in t){const o=t[r];o.sort(R);const s=[],l=[],c=[];for(let t=0;t<o.length;t++){const{at:e,value:n,easing:i}=o[t];s.push(n),l.push(a(0,y,e)),c.push(i||"easeOut")}0!==l[0]&&(l.unshift(0),s.unshift(s[0]),c.unshift("easeInOut")),1!==l[l.length-1]&&(l.push(1),s.push(null)),u.has(i)||u.set(i,{keyframes:{},transition:{}});const h=u.get(i);h.keyframes[r]=s,h.transition[r]={...e,duration:y,ease:c,times:l,...n}}}),u}(t,e).forEach(({keyframes:t,transition:e},i)=>{n.push(...X(i,t,e))}),new u(n)}}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Motion={})}(this,(function(t){"use strict";const e=t=>t;let n=e;function i(t){let e;return()=>(void 0===e&&(e=t()),e)}const a=(t,e,n)=>{const i=e-t;return 0===i?1:(n-t)/i},s=t=>1e3*t,o=t=>t/1e3,r=i(()=>void 0!==window.ScrollTimeline);class u extends class{constructor(t){this.stop=()=>this.runAll("stop"),this.animations=t.filter(Boolean)}get finished(){return Promise.all(this.animations.map(t=>"finished"in t?t.finished:t))}getAll(t){return this.animations[0][t]}setAll(t,e){for(let n=0;n<this.animations.length;n++)this.animations[n][t]=e}attachTimeline(t,e){const n=this.animations.map(n=>r()&&n.attachTimeline?n.attachTimeline(t):"function"==typeof e?e(n):void 0);return()=>{n.forEach((t,e)=>{t&&t(),this.animations[e].stop()})}}get time(){return this.getAll("time")}set time(t){this.setAll("time",t)}get speed(){return this.getAll("speed")}set speed(t){this.setAll("speed",t)}get startTime(){return this.getAll("startTime")}get duration(){let t=0;for(let e=0;e<this.animations.length;e++)t=Math.max(t,this.animations[e].duration);return t}runAll(t){this.animations.forEach(e=>e[t]())}flatten(){this.runAll("flatten")}play(){this.runAll("play")}pause(){this.runAll("pause")}cancel(){this.runAll("cancel")}complete(){this.runAll("complete")}}{then(t,e){return Promise.all(this.animations).then(t).catch(e)}}function l(t,e=100,n){const i=n({...t,keyframes:[0,e]}),a=Math.min(function(t){let e=0,n=t.next(e);for(;!n.done&&e<2e4;)e+=50,n=t.next(e);return e>=2e4?1/0:e}(i),2e4);return{type:"keyframes",ease:t=>i.next(a*t).value/e,duration:o(a)}}function c(t){return"function"==typeof t}const h={linearEasing:void 0};function f(t,e){const n=i(t);return()=>{var t;return null!==(t=h[e])&&void 0!==t?t:n()}}const m=f(()=>{try{document.createElement("div").animate({opacity:0},{easing:"linear(0, 1)"})}catch(t){return!1}return!0},"linearEasing"),d=([t,e,n,i])=>`cubic-bezier(${t}, ${e}, ${n}, ${i})`,p={linear:"linear",ease:"ease",easeIn:"ease-in",easeOut:"ease-out",easeInOut:"ease-in-out",circIn:d([0,.65,.55,1]),circOut:d([.55,0,1,.45]),backIn:d([.31,.01,.66,-.59]),backOut:d([.33,1.53,.69,.99])};function y(t,e){return t?"function"==typeof t&&m()?((t,e,n=10)=>{let i="";const s=Math.max(Math.round(e/n),2);for(let e=0;e<s;e++)i+=t(a(0,s-1,e))+", ";return`linear(${i.substring(0,i.length-2)})`})(t,e):(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?d(t):Array.isArray(t)?t.map(t=>y(t,e)||p.easeOut):p[t]:void 0}function g(t,e,n){var i;if(t instanceof Element)return[t];if("string"==typeof t){let a=document;e&&(a=e.current);const s=null!==(i=null==n?void 0:n[t])&&void 0!==i?i:a.querySelectorAll(t);return s?Array.from(s):[]}return Array.from(t)}function v(t,e){return n=t,Array.isArray(n)&&"number"!=typeof n[0]?t[((t,e,n)=>{const i=e-t;return((n-t)%i+i)%i+t})(0,t.length,e)]:t;var n}const A=(t,e,n)=>t+(e-t)*n;function b(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const s=a(0,e,i);t.push(A(n,1,s))}}function T(t){const e=[0];return b(e,t.length-1),e}function x(t,e,n,i){return"string"==typeof t&&function(t){return"object"==typeof t&&!Array.isArray(t)}(e)?g(t,n,i):t instanceof NodeList?Array.from(t):Array.isArray(t)?t:[t]}function P(t,e,n){return t*(e+1)}function w(t,e,n,i){var a;return"number"==typeof e?e:e.startsWith("-")||e.startsWith("+")?Math.max(0,t+parseFloat(e)):"<"===e?n:null!==(a=i.get(e))&&void 0!==a?a:t}function k(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}function M(t,e,n,i,a,s){!function(t,e,n){for(let i=0;i<t.length;i++){const a=t[i];a.at>e&&a.at<n&&(k(t,a),i--)}}(t,a,s);for(let o=0;o<e.length;o++)t.push({value:e[o],at:A(a,s,i[o]),easing:v(n,o)})}function O(t,e){for(let n=0;n<t.length;n++)t[n]=t[n]/(e+1)}function R(t,e){return t.at===e.at?null===t.value?1:null===e.value?-1:0:t.at-e.at}function W(t,e){return!e.has(t)&&e.set(t,{}),e.get(t)}function E(t,e){return e[t]||(e[t]=[]),e[t]}function F(t){return Array.isArray(t)?t:[t]}function B(t,e){return t&&t[e]?{...t,...t[e]}:{...t}}const S=t=>"number"==typeof t,$=t=>t.every(S);const I=(t=>({test:e=>"string"==typeof e&&e.endsWith(t)&&1===e.split(" ").length,parse:parseFloat,transform:e=>`${e}${t}`}))("px"),L={borderWidth:I,borderTopWidth:I,borderRightWidth:I,borderBottomWidth:I,borderLeftWidth:I,borderRadius:I,radius:I,borderTopLeftRadius:I,borderTopRightRadius:I,borderBottomRightRadius:I,borderBottomLeftRadius:I,width:I,maxWidth:I,height:I,maxHeight:I,top:I,right:I,bottom:I,left:I,padding:I,paddingTop:I,paddingRight:I,paddingBottom:I,paddingLeft:I,margin:I,marginTop:I,marginRight:I,marginBottom:I,marginLeft:I,backgroundPositionX:I,backgroundPositionY:I},V=t=>null!==t;function j(t,e,n){t.style.setProperty("--"+e,n)}function q(t,e,n){t.style[e]=n}const C=i(()=>{try{document.createElement("div").animate({opacity:[1]})}catch(t){return!1}return!0}),N=i(()=>Object.hasOwnProperty.call(Element.prototype,"animate")),z=new WeakMap;function D(t){const e=z.get(t)||new Map;return z.set(t,e),z.get(t)}class H extends class{constructor(t){this.animation=t}get duration(){var t,e,n;const i=(null===(e=null===(t=this.animation)||void 0===t?void 0:t.effect)||void 0===e?void 0:e.getComputedTiming().duration)||(null===(n=this.options)||void 0===n?void 0:n.duration)||300;return o(Number(i))}get time(){var t;return this.animation?o((null===(t=this.animation)||void 0===t?void 0:t.currentTime)||0):0}set time(t){this.animation&&(this.animation.currentTime=s(t))}get speed(){return this.animation?this.animation.playbackRate:1}set speed(t){this.animation&&(this.animation.playbackRate=t)}get state(){return this.animation?this.animation.playState:"finished"}get startTime(){return this.animation?this.animation.startTime:null}get finished(){return this.animation?this.animation.finished:Promise.resolve()}play(){this.animation&&this.animation.play()}pause(){this.animation&&this.animation.pause()}stop(){this.animation&&"idle"!==this.state&&"finished"!==this.state&&(this.animation.commitStyles&&this.animation.commitStyles(),this.cancel())}flatten(){var t;this.animation&&(null===(t=this.animation.effect)||void 0===t||t.updateTiming({easing:"linear"}))}attachTimeline(t){return this.animation&&function(t,e){t.timeline=e,t.onfinish=null}(this.animation,t),e}complete(){this.animation&&this.animation.finish()}cancel(){try{this.animation&&this.animation.cancel()}catch(t){}}}{constructor(t,e,i,a){const o=e.startsWith("--");n("string"!=typeof a.type);const r=D(t).get(e);r&&r.stop();if(Array.isArray(i)||(i=[i]),function(t,e,n){for(let i=0;i<e.length;i++)null===e[i]&&(e[i]=0===i?n():e[i-1]),"number"==typeof e[i]&&L[t]&&(e[i]=L[t].transform(e[i]));!C()&&e.length<2&&e.unshift(n())}(e,i,()=>e.startsWith("--")?t.style.getPropertyValue(e):window.getComputedStyle(t)[e]),c(a.type)){const t=l(a,100,a.type);a.ease=m()?t.ease:"easeOut",a.duration=s(t.duration),a.type="keyframes"}else a.ease=a.ease||"easeOut";const u=()=>{this.setValue(t,e,function(t,{repeat:e,repeatType:n="loop"},i){const a=t.filter(V),s=e&&"loop"!==n&&e%2==1?0:a.length-1;return s&&void 0!==i?i:a[s]}(i,a)),this.cancel(),this.resolveFinishedPromise()},h=()=>{this.setValue=o?j:q,this.options=a,this.updateFinishedPromise(),this.removeAnimation=()=>{const n=z.get(t);n&&n.delete(e)}};N()?(super(function(t,e,n,{delay:i=0,duration:a=300,repeat:s=0,repeatType:o="loop",ease:r="easeInOut",times:u}={}){const l={[e]:n};u&&(l.offset=u);const c=y(r,a);return Array.isArray(c)&&(l.easing=c),t.animate(l,{delay:i,duration:a,easing:Array.isArray(c)?"linear":c,fill:"both",iterations:s+1,direction:"reverse"===o?"alternate":"normal"})}(t,e,i,a)),h(),!1===a.autoplay&&this.animation.pause(),this.animation.onfinish=u,D(t).set(e,this)):(super(),h(),u())}then(t,e){return this.currentFinishedPromise.then(t,e)}updateFinishedPromise(){this.currentFinishedPromise=new Promise(t=>{this.resolveFinishedPromise=t})}play(){"finished"===this.state&&this.updateFinishedPromise(),super.play()}cancel(){this.removeAnimation(),super.cancel()}}function X(t,e,n,i){const a=g(t,i),o=a.length,r=[];for(let t=0;t<o;t++){const i=a[t],c={...n};"function"==typeof c.delay&&(c.delay=c.delay(t,o));for(const t in e){const n=e[t],a={...(u=c,l=t,u?u[l]||u.default||u:void 0)};a.duration=a.duration?s(a.duration):a.duration,a.delay=s(a.delay||0),r.push(new H(i,t,n,a))}}var u,l;return r}const Y=(t=>function(e,n,i){return new u(X(e,n,i,t))})();t.animate=Y,t.animateSequence=function(t,e){const n=[];return function(t,{defaultTransition:e={},...n}={},i,o){const r=e.duration||.3,u=new Map,h=new Map,f={},m=new Map;let d=0,p=0,y=0;for(let n=0;n<t.length;n++){const a=t[n];if("string"==typeof a){m.set(a,p);continue}if(!Array.isArray(a)){m.set(a.name,w(p,a.at,d,m));continue}let[u,A,k={}]=a;void 0!==k.at&&(p=w(p,k.at,d,m));let R=0;const S=(t,n,i,a=0,u=0)=>{const h=F(t),{delay:f=0,times:m=T(h),type:d="keyframes",repeat:g,repeatType:A,repeatDelay:x=0,...w}=n;let{ease:k=e.ease||"easeOut",duration:W}=n;const E="function"==typeof f?f(a,u):f,B=h.length,S=c(d)?d:null==o?void 0:o[d];if(B<=2&&S){let t=100;if(2===B&&$(h)){const e=h[1]-h[0];t=Math.abs(e)}const e={...w};void 0!==W&&(e.duration=s(W));const n=l(e,t,S);k=n.ease,W=n.duration}null!=W||(W=r);const I=p+E;1===m.length&&0===m[0]&&(m[1]=1);const L=m.length-h.length;if(L>0&&b(m,L),1===h.length&&h.unshift(null),g){W=P(W,g);const t=[...h],e=[...m];k=Array.isArray(k)?[...k]:[k];const n=[...k];for(let i=0;i<g;i++){h.push(...t);for(let a=0;a<t.length;a++)m.push(e[a]+(i+1)),k.push(0===a?"linear":v(n,a-1))}O(m,g)}const V=I+W;M(i,h,k,m,I,V),R=Math.max(E+W,R),y=Math.max(V,y)};if(g=u,Boolean(g&&g.getVelocity)){S(A,k,E("default",W(u,h)))}else{const t=x(u,A,i,f),e=t.length;for(let n=0;n<e;n++){A=A,k=k;const i=W(t[n],h);for(const t in A)S(A[t],B(k,t),E(t,i),n,e)}}d=p,p+=R}var g;return h.forEach((t,i)=>{for(const s in t){const o=t[s];o.sort(R);const r=[],l=[],c=[];for(let t=0;t<o.length;t++){const{at:e,value:n,easing:i}=o[t];r.push(n),l.push(a(0,y,e)),c.push(i||"easeOut")}0!==l[0]&&(l.unshift(0),r.unshift(r[0]),c.unshift("easeInOut")),1!==l[l.length-1]&&(l.push(1),r.push(null)),u.has(i)||u.set(i,{keyframes:{},transition:{}});const h=u.get(i);h.keyframes[s]=r,h.transition[s]={...e,duration:y,ease:c,times:l,...n}}}),u}(t,e).forEach(({keyframes:t,transition:e},i)=>{n.push(...X(i,t,e))}),new u(n)}}));

package/dist/dom.d.ts

@@ -1,5 +1,5 @@
 import * as motion_dom from 'motion-dom';
-import { AnimationPlaybackControls, UnresolvedValueKeyframe, Transition, ElementOrSelector, DOMKeyframesDefinition, AnimationOptions, AnimationPlaybackOptions, Easing, AnimationScope, ValueAnimationTransition, EasingFunction, ProgressTimeline, EasingModifier, ValueAnimationOptions, KeyframeGenerator, DynamicOption } from 'motion-dom';
+import { AnimationPlaybackControls, TransformProperties, UnresolvedValueKeyframe, Transition, ElementOrSelector, DOMKeyframesDefinition, AnimationOptions, AnimationPlaybackOptions, Easing, AnimationScope, ValueAnimationTransition, EasingFunction, ProgressTimeline, EasingModifier, ValueAnimationOptions, KeyframeGenerator, DynamicOption } from 'motion-dom';
 export * from 'motion-dom';
 export { BezierDefinition, Easing, EasingDefinition, EasingFunction, EasingModifier, isDragActive } from 'motion-dom';
 export { invariant, noop, progress } from 'motion-utils';
@@ -26,6 +26,7 @@ interface Owner {
     current: HTMLElement | unknown;
     getProps: () => {
         onUpdate?: (latest: ResolvedValues) => void;
+        transformTemplate?: (transform: TransformProperties, generatedTransform: string) => string;
     };
 }
 interface MotionValueOptions {