framer-motion 12.7.4 → 12.7.5-alpha.1

package/dist/cjs/m.js

@@ -381,41 +381,10 @@ function getProjectionFunctionality(props) {
     };
 }
 
-const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
-const isCSSVariableName = 
-/*@__PURE__*/ checkStringStartsWith("--");
-
 const scaleCorrectors = {};
 
-/**
- * Generate a list of every possible transform key.
- */
-const transformPropOrder = [
-    "transformPerspective",
-    "x",
-    "y",
-    "z",
-    "translateX",
-    "translateY",
-    "translateZ",
-    "scale",
-    "scaleX",
-    "scaleY",
-    "rotate",
-    "rotateX",
-    "rotateY",
-    "rotateZ",
-    "skew",
-    "skewX",
-    "skewY",
-];
-/**
- * A quick lookup for transform props.
- */
-const transformProps = new Set(transformPropOrder);
-
 function isForcedMotionValue(key, { layout, layoutId }) {
-    return (transformProps.has(key) ||
+    return (motionDom.transformProps.has(key) ||
         key.startsWith("origin") ||
         ((layout || layoutId !== undefined) &&
             (!!scaleCorrectors[key] || key === "opacity")));
@@ -423,139 +392,13 @@ function isForcedMotionValue(key, { layout, layoutId }) {
 
 const isMotionValue = (value) => Boolean(value && value.getVelocity);
 
-/**
- * Provided a value and a ValueType, returns the value as that value type.
- */
-const getValueAsType = (value, type) => {
-    return type && typeof value === "number"
-        ? type.transform(value)
-        : value;
-};
-
-const clamp = (min, max, v) => {
-    if (v > max)
-        return max;
-    if (v < min)
-        return min;
-    return v;
-};
-
-const number = {
-    test: (v) => typeof v === "number",
-    parse: parseFloat,
-    transform: (v) => v,
-};
-const alpha = {
-    ...number,
-    transform: (v) => clamp(0, 1, v),
-};
-const scale = {
-    ...number,
-    default: 1,
-};
-
-const createUnitType = (unit) => ({
-    test: (v) => typeof v === "string" && v.endsWith(unit) && v.split(" ").length === 1,
-    parse: parseFloat,
-    transform: (v) => `${v}${unit}`,
-});
-const degrees = /*@__PURE__*/ createUnitType("deg");
-const percent = /*@__PURE__*/ createUnitType("%");
-const px = /*@__PURE__*/ createUnitType("px");
-const progressPercentage = {
-    ...percent,
-    parse: (v) => percent.parse(v) / 100,
-    transform: (v) => percent.transform(v * 100),
-};
-
-const browserNumberValueTypes = {
-    // Border props
-    borderWidth: px,
-    borderTopWidth: px,
-    borderRightWidth: px,
-    borderBottomWidth: px,
-    borderLeftWidth: px,
-    borderRadius: px,
-    radius: px,
-    borderTopLeftRadius: px,
-    borderTopRightRadius: px,
-    borderBottomRightRadius: px,
-    borderBottomLeftRadius: px,
-    // Positioning props
-    width: px,
-    maxWidth: px,
-    height: px,
-    maxHeight: px,
-    top: px,
-    right: px,
-    bottom: px,
-    left: px,
-    // Spacing props
-    padding: px,
-    paddingTop: px,
-    paddingRight: px,
-    paddingBottom: px,
-    paddingLeft: px,
-    margin: px,
-    marginTop: px,
-    marginRight: px,
-    marginBottom: px,
-    marginLeft: px,
-    // Misc
-    backgroundPositionX: px,
-    backgroundPositionY: px,
-};
-
-const transformValueTypes = {
-    rotate: degrees,
-    rotateX: degrees,
-    rotateY: degrees,
-    rotateZ: degrees,
-    scale,
-    scaleX: scale,
-    scaleY: scale,
-    scaleZ: scale,
-    skew: degrees,
-    skewX: degrees,
-    skewY: degrees,
-    distance: px,
-    translateX: px,
-    translateY: px,
-    translateZ: px,
-    x: px,
-    y: px,
-    z: px,
-    perspective: px,
-    transformPerspective: px,
-    opacity: alpha,
-    originX: progressPercentage,
-    originY: progressPercentage,
-    originZ: px,
-};
-
-const int = {
-    ...number,
-    transform: Math.round,
-};
-
-const numberValueTypes = {
-    ...browserNumberValueTypes,
-    ...transformValueTypes,
-    zIndex: int,
-    size: px,
-    // SVG
-    fillOpacity: alpha,
-    strokeOpacity: alpha,
-    numOctaves: int,
-};
-
 const translateAlias = {
     x: "translateX",
     y: "translateY",
     z: "translateZ",
     transformPerspective: "perspective",
 };
-const numTransforms = transformPropOrder.length;
+const numTransforms = motionDom.transformPropOrder.length;
 /**
  * Build a CSS transform style from individual x/y/scale etc properties.
  *
@@ -571,7 +414,7 @@ function buildTransform(latestValues, transform, transformTemplate) {
      * are present to the transform string.
      */
     for (let i = 0; i < numTransforms; i++) {
-        const key = transformPropOrder[i];
+        const key = motionDom.transformPropOrder[i];
         const value = latestValues[key];
         if (value === undefined)
             continue;
@@ -583,7 +426,7 @@ function buildTransform(latestValues, transform, transformTemplate) {
             valueIsDefault = parseFloat(value) === 0;
         }
         if (!valueIsDefault || transformTemplate) {
-            const valueAsType = getValueAsType(value, numberValueTypes[key]);
+            const valueAsType = motionDom.getValueAsType(value, motionDom.numberValueTypes[key]);
             if (!valueIsDefault) {
                 transformIsDefault = false;
                 const transformName = translateAlias[key] || key;
@@ -619,18 +462,18 @@ function buildHTMLStyles(state, latestValues, transformTemplate) {
      */
     for (const key in latestValues) {
         const value = latestValues[key];
-        if (transformProps.has(key)) {
+        if (motionDom.transformProps.has(key)) {
             // If this is a transform, flag to enable further transform processing
             hasTransform = true;
             continue;
         }
-        else if (isCSSVariableName(key)) {
+        else if (motionDom.isCSSVariableName(key)) {
             vars[key] = value;
             continue;
         }
         else {
             // Convert the value to its default value type, ie 0 -> "0px"
-            const valueAsType = getValueAsType(value, numberValueTypes[key]);
+            const valueAsType = motionDom.getValueAsType(value, motionDom.numberValueTypes[key]);
             if (key.startsWith("origin")) {
                 // If this is a transform origin, flag and enable further transform-origin processing
                 hasTransformOrigin = true;
@@ -914,17 +757,17 @@ function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true
     // when defining props on a React component.
     const keys = useDashCase ? dashKeys : camelKeys;
     // Build the dash offset
-    attrs[keys.offset] = px.transform(-offset);
+    attrs[keys.offset] = motionDom.px.transform(-offset);
     // Build the dash array
-    const pathLength = px.transform(length);
-    const pathSpacing = px.transform(spacing);
+    const pathLength = motionDom.px.transform(length);
+    const pathSpacing = motionDom.px.transform(spacing);
     attrs[keys.array] = `${pathLength} ${pathSpacing}`;
 }
 
 function calcOrigin(origin, offset, size) {
     return typeof origin === "string"
         ? origin
-        : px.transform(offset + size * origin);
+        : motionDom.px.transform(offset + size * origin);
 }
 /**
  * The SVG transform origin defaults are different to CSS and is less intuitive,
@@ -1265,7 +1108,7 @@ function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
     for (const key in props) {
         if (isMotionValue(props[key]) ||
             isMotionValue(prevProps[key])) {
-            const targetKey = transformPropOrder.indexOf(key) !== -1
+            const targetKey = motionDom.transformPropOrder.indexOf(key) !== -1
                 ? "attr" + key.charAt(0).toUpperCase() + key.substring(1)
                 : key;
             newValues[targetKey] = props[key];
@@ -1285,7 +1128,7 @@ const svgMotionConfig = {
             let hasTransform = !!props.drag;
             if (!hasTransform) {
                 for (const key in latestValues) {
-                    if (transformProps.has(key)) {
+                    if (motionDom.transformProps.has(key)) {
                         hasTransform = true;
                         break;
                     }

package/dist/cjs/mini.js

@@ -29,7 +29,27 @@ function animateElements(elementOrSelector, keyframes, options, scope) {
     const elements = motionDom.resolveElements(elementOrSelector, scope);
     const numElements = elements.length;
     motionUtils.invariant(Boolean(numElements), "No valid element provided.");
-    const animations = [];
+    /**
+     * WAAPI doesn't support interrupting animations.
+     *
+     * Therefore, starting animations requires a three-step process:
+     * 1. Stop existing animations (write styles to DOM)
+     * 2. Resolve keyframes (read styles from DOM)
+     * 3. Create new animations (write styles to DOM)
+     *
+     * The hybrid `animate()` function uses AsyncAnimation to resolve
+     * keyframes before creating new animations, which removes style
+     * thrashing. Here, we have much stricter filesize constraints.
+     * Therefore we do this in a synchronous way that ensures that
+     * at least within `animate()` calls there is no style thrashing.
+     *
+     * In the motion-native-animate-mini-interrupt benchmark this
+     * was 80% faster than a single loop.
+     */
+    const animationDefinitions = [];
+    /**
+     * Step 1: Build options and stop existing animations (write)
+     */
     for (let i = 0; i < numElements; i++) {
         const element = elements[i];
         const elementTransition = { ...options };
@@ -40,20 +60,68 @@ function animateElements(elementOrSelector, keyframes, options, scope) {
             elementTransition.delay = elementTransition.delay(i, numElements);
         }
         for (const valueName in keyframes) {
-            const valueKeyframes = keyframes[valueName];
+            let valueKeyframes = keyframes[valueName];
+            if (!Array.isArray(valueKeyframes)) {
+                valueKeyframes = [valueKeyframes];
+            }
             const valueOptions = {
                 ...motionDom.getValueTransition(elementTransition, valueName),
             };
             valueOptions.duration && (valueOptions.duration = motionUtils.secondsToMilliseconds(valueOptions.duration));
             valueOptions.delay && (valueOptions.delay = motionUtils.secondsToMilliseconds(valueOptions.delay));
-            animations.push(new motionDom.NativeAnimation({
-                element,
-                name: valueName,
-                keyframes: valueKeyframes,
-                transition: valueOptions,
-                allowFlatten: !elementTransition.type && !elementTransition.ease,
-            }));
+            /**
+             * If there's an existing animation playing on this element then stop it
+             * before creating a new one.
+             */
+            const map = motionDom.getAnimationMap(element);
+            const key = motionDom.animationMapKey(valueName, valueOptions.pseudoElement || "");
+            const currentAnimation = map.get(key);
+            currentAnimation && currentAnimation.stop();
+            animationDefinitions.push({
+                map,
+                key,
+                unresolvedKeyframes: valueKeyframes,
+                options: {
+                    ...valueOptions,
+                    element,
+                    name: valueName,
+                    allowFlatten: !elementTransition.type && !elementTransition.ease,
+                },
+            });
+        }
+    }
+    /**
+     * Step 2: Resolve keyframes (read)
+     */
+    for (let i = 0; i < animationDefinitions.length; i++) {
+        const { unresolvedKeyframes, options: animationOptions } = animationDefinitions[i];
+        const { element, name, pseudoElement } = animationOptions;
+        if (!pseudoElement && unresolvedKeyframes[0] === null) {
+            unresolvedKeyframes[0] = motionDom.getComputedStyle(element, name);
+        }
+        motionDom.fillWildcards(unresolvedKeyframes);
+        motionDom.applyPxDefaults(unresolvedKeyframes, name);
+        /**
+         * If we only have one keyframe, explicitly read the initial keyframe
+         * from the computed style. This is to ensure consistency with WAAPI behaviour
+         * for restarting animations, for instance .play() after finish, when it
+         * has one vs two keyframes.
+         */
+        if (!pseudoElement && unresolvedKeyframes.length < 2) {
+            unresolvedKeyframes.unshift(motionDom.getComputedStyle(element, name));
         }
+        animationOptions.keyframes = unresolvedKeyframes;
+    }
+    /**
+     * Step 3: Create new animations (write)
+     */
+    const animations = [];
+    for (let i = 0; i < animationDefinitions.length; i++) {
+        const { map, key, options: animationOptions } = animationDefinitions[i];
+        const animation = new motionDom.NativeAnimation(animationOptions);
+        map.set(key, animation);
+        animation.finished.finally(() => map.delete(key));
+        animations.push(animation);
     }
     return animations;
 }

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

package/dist/dom.d.ts

@@ -1,13 +1,7 @@
-import * as motion_dom from 'motion-dom';
-import { MotionValue, UnresolvedValueKeyframe, Transition, ElementOrSelector, DOMKeyframesDefinition, AnimationOptions, AnimationPlaybackOptions, Easing, AnimationScope, AnimationPlaybackControlsWithThen, ValueAnimationTransition, EasingFunction, ProgressTimeline, AnimationPlaybackControls, EasingModifier, ValueAnimationOptions, KeyframeGenerator, DynamicOption } from 'motion-dom';
+import { MotionValue, UnresolvedValueKeyframe, Transition, ElementOrSelector, DOMKeyframesDefinition, AnimationOptions, AnimationPlaybackOptions, AnimationScope, AnimationPlaybackControlsWithThen, ValueAnimationTransition, AnimationPlaybackControls, DynamicOption } from 'motion-dom';
 export * from 'motion-dom';
-export { BezierDefinition, Easing, EasingDefinition, EasingFunction, EasingModifier, MotionValue, cancelFrame, cancelSync, frame, frameData, hover, isDragActive, motionValue, press, sync, time } from 'motion-dom';
-export { invariant, noop, progress } from 'motion-utils';
-
-interface Point {
-    x: number;
-    y: number;
-}
+import { Easing, EasingFunction, Point } from 'motion-utils';
+export * from 'motion-utils';
 
 type GenericKeyframesTarget<V> = V[] | Array<null | V>;
 
@@ -136,19 +130,7 @@ interface ScrollInfoOptions {
     offset?: ScrollOffset;
 }
 
-declare global {
-    interface Window {
-        ScrollTimeline: ScrollTimeline;
-    }
-}
-declare class ScrollTimeline implements ProgressTimeline {
-    constructor(options: ScrollOptions);
-    currentTime: null | {
-        value: number;
-    };
-    cancel?: VoidFunction;
-}
-declare function scroll(onScroll: OnScroll | AnimationPlaybackControls, { axis, ...options }?: ScrollOptions): VoidFunction;
+declare function scroll(onScroll: OnScroll | AnimationPlaybackControls, { axis, container, ...options }?: ScrollOptions): VoidFunction;
 
 declare function scrollInfo(onScroll: OnScrollInfo, { container, ...options }?: ScrollInfoOptions): () => void;
 
@@ -162,38 +144,6 @@ interface InViewOptions {
 }
 declare function inView(elementOrSelector: ElementOrSelector, onStart: (element: Element, entry: IntersectionObserverEntry) => void | ViewChangeHandler, { root, margin: rootMargin, amount }?: InViewOptions): VoidFunction;
 
-declare const anticipate: (p: number) => number;
-
-declare const backOut: (t: number) => number;
-declare const backIn: motion_dom.EasingFunction;
-declare const backInOut: motion_dom.EasingFunction;
-
-declare const circIn: EasingFunction;
-declare const circOut: EasingFunction;
-declare const circInOut: EasingFunction;
-
-declare function cubicBezier(mX1: number, mY1: number, mX2: number, mY2: number): (t: number) => number;
-
-declare const easeIn: (t: number) => number;
-declare const easeOut: (t: number) => number;
-declare const easeInOut: (t: number) => number;
-
-declare const mirrorEasing: EasingModifier;
-
-declare const reverseEasing: EasingModifier;
-
-type Direction = "start" | "end";
-declare function steps(numSteps: number, direction?: Direction): EasingFunction;
-
-declare function inertia({ keyframes, velocity, power, timeConstant, bounceDamping, bounceStiffness, modifyTarget, min, max, restDelta, restSpeed, }: ValueAnimationOptions<number>): KeyframeGenerator<number>;
-
-declare function keyframes<T extends string | number>({ duration, keyframes: keyframeValues, times, ease, }: ValueAnimationOptions<T>): KeyframeGenerator<T>;
-
-declare function spring(optionsOrVisualDuration?: ValueAnimationOptions<number> | number, bounce?: number): KeyframeGenerator<number>;
-declare namespace spring {
-    var applyToOptions: (options: Transition) => Transition;
-}
-
 type StaggerOrigin = "first" | "last" | "center" | number;
 type StaggerOptions = {
     startDelay?: number;
@@ -202,49 +152,12 @@ type StaggerOptions = {
 };
 declare function stagger(duration?: number, { startDelay, from, ease }?: StaggerOptions): DynamicOption<number>;
 
-declare const clamp: (min: number, max: number, v: number) => number;
-
 type DelayedFunction = (overshoot: number) => void;
 declare function delayInSeconds(callback: DelayedFunction, timeout: number): () => void;
 
 declare const distance: (a: number, b: number) => number;
 declare function distance2D(a: Point, b: Point): number;
 
-type Mix<T> = (v: number) => T;
-type MixerFactory<T> = (from: T, to: T) => Mix<T>;
-interface InterpolateOptions<T> {
-    clamp?: boolean;
-    ease?: EasingFunction | EasingFunction[];
-    mixer?: MixerFactory<T>;
-}
-/**
- * Create a function that maps from a numerical input array to a generic output array.
- *
- * Accepts:
- *   - Numbers
- *   - Colors (hex, hsl, hsla, rgb, rgba)
- *   - Complex (combinations of one or more numbers or strings)
- *
- * ```jsx
- * const mixColor = interpolate([0, 1], ['#fff', '#000'])
- *
- * mixColor(0.5) // 'rgba(128, 128, 128, 1)'
- * ```
- *
- * TODO Revist this approach once we've moved to data models for values,
- * probably not needed to pregenerate mixer functions.
- *
- * @public
- */
-declare function interpolate<T>(input: number[], output: T[], { clamp: isClamp, ease, mixer }?: InterpolateOptions<T>): (v: number) => T;
-
-type Mixer<T> = (p: number) => T;
-
-declare function mix<T>(from: T, to: T): Mixer<T>;
-declare function mix(from: number, to: number, p: number): number;
-
-declare const pipe: (...transformers: Function[]) => Function;
-
 /**
  * @public
  */
@@ -338,6 +251,4 @@ declare function transform<T>(inputValue: number, inputRange: number[], outputRa
  */
 declare function transform<T>(inputRange: number[], outputRange: T[], options?: TransformOptions<T>): (inputValue: number) => T;
 
-declare const wrap: (min: number, max: number, v: number) => number;
-
-export { type AbsoluteKeyframe, type AnimationSequence, type At, type DOMSegment, type DOMSegmentWithTransition, type DelayedFunction, type Direction, type InterpolateOptions, type MixerFactory, type MotionValueSegment, type MotionValueSegmentWithTransition, type ObjectSegment, type ObjectSegmentWithTransition, type ObjectTarget, type ResolvedAnimationDefinition, type ResolvedAnimationDefinitions, type Segment, type SequenceLabel, type SequenceLabelWithTime, type SequenceMap, type SequenceOptions, type SequenceTime, type ValueSequence, animate, animateMini, anticipate, backIn, backInOut, backOut, circIn, circInOut, circOut, clamp, createScopedAnimate, cubicBezier, delayInSeconds as delay, distance, distance2D, easeIn, easeInOut, easeOut, inView, inertia, interpolate, keyframes, mirrorEasing, mix, pipe, reverseEasing, scroll, scrollInfo, spring, stagger, steps, transform, wrap };
+export { type AbsoluteKeyframe, type AnimationSequence, type At, type DOMSegment, type DOMSegmentWithTransition, type DelayedFunction, type MotionValueSegment, type MotionValueSegmentWithTransition, type ObjectSegment, type ObjectSegmentWithTransition, type ObjectTarget, type ResolvedAnimationDefinition, type ResolvedAnimationDefinitions, type Segment, type SequenceLabel, type SequenceLabelWithTime, type SequenceMap, type SequenceOptions, type SequenceTime, type ValueSequence, animate, animateMini, createScopedAnimate, delayInSeconds as delay, distance, distance2D, inView, scroll, scrollInfo, stagger, transform };