@motionone/dom - npm Package Compare versions

Comparing version 10.13.2 to 10.14.0

dist/animate/animate-style.cjs.js

@@ -16,2 +16,3 @@ 'use strict';
 var stopAnimation = require('./utils/stop-animation.cjs.js');
+var getUnit = require('./utils/get-unit.cjs.js');
 
@@ -59,9 +60,11 @@ function getDevToolsRecord() {
         let keyframes$1 = keyframes.hydrateKeyframes(keyframes.keyframesList(keyframesDefinition), readInitialValue);
+        /**
+         * Detect unit type of keyframes.
+         */
+        const toUnit = getUnit.getUnitConverter(keyframes$1, definition);
         if (utils.isEasingGenerator(easing$1)) {
-            const custom = easing$1.createAnimation(keyframes$1, readInitialValue, valueIsTransform, name, motionValue);
+            const custom = easing$1.createAnimation(keyframes$1, key !== "opacity", readInitialValue, name, motionValue);
             easing$1 = custom.easing;
-            if (custom.keyframes !== undefined)
-                keyframes$1 = custom.keyframes;
-            if (custom.duration !== undefined)
-                duration = custom.duration;
+            keyframes$1 = custom.keyframes || keyframes$1;
+            duration = custom.duration || duration;
         }
@@ -176,8 +179,5 @@ /**
             }
-            const render = (latest) => {
-                if (definition)
-                    latest = definition.toDefaultUnit(latest);
-                style.style.set(element, name, latest);
-            };
-            animation$1 = new animation.Animation(render, keyframes$1, Object.assign(Object.assign({}, options), { duration,
+            animation$1 = new animation.Animation((latest) => {
+                style.style.set(element, name, toUnit ? toUnit(latest) : latest);
+            }, keyframes$1, Object.assign(Object.assign({}, options), { duration,
                 easing: easing$1 }));
@@ -184,0 +184,0 @@ }

dist/animate/animate-style.es.js

@@ -12,2 +12,3 @@ import { getAnimationData, getMotionValue } from './data.es.js';
 import { stopAnimation } from './utils/stop-animation.es.js';
+import { getUnitConverter } from './utils/get-unit.es.js';
 
@@ -55,9 +56,11 @@ function getDevToolsRecord() {
         let keyframes = hydrateKeyframes(keyframesList(keyframesDefinition), readInitialValue);
+        /**
+         * Detect unit type of keyframes.
+         */
+        const toUnit = getUnitConverter(keyframes, definition);
         if (isEasingGenerator(easing)) {
-            const custom = easing.createAnimation(keyframes, readInitialValue, valueIsTransform, name, motionValue);
+            const custom = easing.createAnimation(keyframes, key !== "opacity", readInitialValue, name, motionValue);
             easing = custom.easing;
-            if (custom.keyframes !== undefined)
-                keyframes = custom.keyframes;
-            if (custom.duration !== undefined)
-                duration = custom.duration;
+            keyframes = custom.keyframes || keyframes;
+            duration = custom.duration || duration;
         }
@@ -172,8 +175,5 @@ /**
             }
-            const render = (latest) => {
-                if (definition)
-                    latest = definition.toDefaultUnit(latest);
-                style.set(element, name, latest);
-            };
-            animation = new Animation(render, keyframes, Object.assign(Object.assign({}, options), { duration,
+            animation = new Animation((latest) => {
+                style.set(element, name, toUnit ? toUnit(latest) : latest);
+            }, keyframes, Object.assign(Object.assign({}, options), { duration,
                 easing }));
@@ -180,0 +180,0 @@ }

dist/easing/create-generator-easing.cjs.js

@@ -6,3 +6,13 @@ 'use strict';
 var generators = require('@motionone/generators');
+var utils = require('@motionone/utils');
+var getUnit = require('../animate/utils/get-unit.cjs.js');
+var transforms = require('../animate/utils/transforms.cjs.js');
+var getStyleName = require('../animate/utils/get-style-name.cjs.js');
 
+function canGenerate(value) {
+    return utils.isNumber(value) && !isNaN(value);
+}
+function getAsNumber(value) {
+    return utils.isString(value) ? parseFloat(value) : value;
+}
 function createGeneratorEasing(createGenerator) {
@@ -21,5 +31,5 @@ const keyframesCache = new WeakMap();
         };
-        const getKeyframes = (generator) => {
+        const getKeyframes = (generator, toUnit) => {
             if (!keyframesCache.has(generator)) {
-                keyframesCache.set(generator, generators.pregenerateKeyframes(generator));
+                keyframesCache.set(generator, generators.pregenerateKeyframes(generator, toUnit));
             }
@@ -29,36 +39,56 @@ return keyframesCache.get(generator);
         return {
-            createAnimation: (keyframes, getOrigin, canUseGenerator, name, motionValue) => {
-                var _a, _b;
+            createAnimation: (keyframes, shouldGenerate = true, getOrigin, name, motionValue) => {
                 let settings;
+                let origin;
+                let target;
+                let velocity = 0;
+                let toUnit = utils.noopReturn;
                 const numKeyframes = keyframes.length;
-                let shouldUseGenerator = canUseGenerator &&
-                    numKeyframes <= 2 &&
-                    keyframes.every(isNumberOrNull);
-                if (shouldUseGenerator) {
-                    const target = keyframes[numKeyframes - 1];
-                    const unresolvedOrigin = numKeyframes === 1 ? null : keyframes[0];
-                    let velocity = 0;
-                    let origin = 0;
-                    const prevGenerator = motionValue === null || motionValue === void 0 ? void 0 : motionValue.generator;
-                    if (prevGenerator) {
+                /**
+                 * If we should generate an animation for this value, run some preperation
+                 * like resolving target/origin, finding a unit (if any) and determine if
+                 * it is actually possible to generate.
+                 */
+                if (shouldGenerate) {
+                    toUnit = getUnit.getUnitConverter(keyframes, name ? transforms.transformDefinitions.get(getStyleName.getStyleName(name)) : undefined);
+                    const targetDefinition = keyframes[numKeyframes - 1];
+                    target = getAsNumber(targetDefinition);
+                    if (numKeyframes > 1 && keyframes[0] !== null) {
                         /**
-                         * If we have a generator for this value we can use it to resolve
-                         * the animations's current value and velocity.
+                         * If we have multiple keyframes, take the initial keyframe as the origin.
                          */
-                        const { animation, generatorStartTime } = motionValue;
-                        const startTime = (animation === null || animation === void 0 ? void 0 : animation.startTime) || generatorStartTime || 0;
-                        const currentTime = (animation === null || animation === void 0 ? void 0 : animation.currentTime) || performance.now() - startTime;
-                        const prevGeneratorCurrent = prevGenerator(currentTime).current;
-                        origin = (_a = unresolvedOrigin) !== null && _a !== void 0 ? _a : prevGeneratorCurrent;
-                        if (numKeyframes === 1 ||
-                            (numKeyframes === 2 && keyframes[0] === null)) {
+                        origin = getAsNumber(keyframes[0]);
+                    }
+                    else {
+                        const prevGenerator = motionValue === null || motionValue === void 0 ? void 0 : motionValue.generator;
+                        /**
+                         * If we have an existing generator for this value we can use it to resolve
+                         * the animation's current value and velocity.
+                         */
+                        if (prevGenerator) {
+                            /**
+                             * If we have a generator for this value we can use it to resolve
+                             * the animations's current value and velocity.
+                             */
+                            const { animation, generatorStartTime } = motionValue;
+                            const startTime = (animation === null || animation === void 0 ? void 0 : animation.startTime) || generatorStartTime || 0;
+                            const currentTime = (animation === null || animation === void 0 ? void 0 : animation.currentTime) || performance.now() - startTime;
+                            const prevGeneratorCurrent = prevGenerator(currentTime).current;
+                            origin = prevGeneratorCurrent;
                             velocity = generators.calcGeneratorVelocity((t) => prevGenerator(t).current, currentTime, prevGeneratorCurrent);
                         }
+                        else if (getOrigin) {
+                            /**
+                             * As a last resort, read the origin from the DOM.
+                             */
+                            origin = getAsNumber(getOrigin());
+                        }
                     }
-                    else {
-                        origin = (_b = unresolvedOrigin) !== null && _b !== void 0 ? _b : parseFloat(getOrigin());
-                    }
+                }
+                /**
+                 * If we've determined it is possible to generate an animation, do so.
+                 */
+                if (canGenerate(origin) && canGenerate(target)) {
                     const generator = getGenerator(origin, target, velocity, name === null || name === void 0 ? void 0 : name.includes("scale"));
-                    const keyframesMetadata = getKeyframes(generator);
-                    settings = Object.assign(Object.assign({}, keyframesMetadata), { easing: "linear" });
+                    settings = Object.assign(Object.assign({}, getKeyframes(generator, toUnit)), { easing: "linear" });
                     // TODO Add test for this
@@ -70,3 +100,9 @@ if (motionValue) {
                 }
-                else {
+                /**
+                 * If by now we haven't generated a set of keyframes, create a generic generator
+                 * based on the provided props that animates from 0-100 to fetch a rough
+                 * "overshootDuration" - the moment when the generator first hits the animation target.
+                 * Then return animation settings that will run a normal animation for that duration.
+                 */
+                if (!settings) {
                     const keyframesMetadata = getKeyframes(getGenerator(0, 100));
@@ -83,4 +119,3 @@ settings = {
 }
-const isNumberOrNull = (value) => typeof value !== "string";
 
 exports.createGeneratorEasing = createGeneratorEasing;

dist/easing/create-generator-easing.es.js

 import { calcGeneratorVelocity, pregenerateKeyframes } from '@motionone/generators';
+import { isNumber, isString, noopReturn } from '@motionone/utils';
+import { getUnitConverter } from '../animate/utils/get-unit.es.js';
+import { transformDefinitions } from '../animate/utils/transforms.es.js';
+import { getStyleName } from '../animate/utils/get-style-name.es.js';
 
+function canGenerate(value) {
+    return isNumber(value) && !isNaN(value);
+}
+function getAsNumber(value) {
+    return isString(value) ? parseFloat(value) : value;
+}
 function createGeneratorEasing(createGenerator) {
@@ -16,5 +26,5 @@ const keyframesCache = new WeakMap();
         };
-        const getKeyframes = (generator) => {
+        const getKeyframes = (generator, toUnit) => {
             if (!keyframesCache.has(generator)) {
-                keyframesCache.set(generator, pregenerateKeyframes(generator));
+                keyframesCache.set(generator, pregenerateKeyframes(generator, toUnit));
             }
@@ -24,36 +34,56 @@ return keyframesCache.get(generator);
         return {
-            createAnimation: (keyframes, getOrigin, canUseGenerator, name, motionValue) => {
-                var _a, _b;
+            createAnimation: (keyframes, shouldGenerate = true, getOrigin, name, motionValue) => {
                 let settings;
+                let origin;
+                let target;
+                let velocity = 0;
+                let toUnit = noopReturn;
                 const numKeyframes = keyframes.length;
-                let shouldUseGenerator = canUseGenerator &&
-                    numKeyframes <= 2 &&
-                    keyframes.every(isNumberOrNull);
-                if (shouldUseGenerator) {
-                    const target = keyframes[numKeyframes - 1];
-                    const unresolvedOrigin = numKeyframes === 1 ? null : keyframes[0];
-                    let velocity = 0;
-                    let origin = 0;
-                    const prevGenerator = motionValue === null || motionValue === void 0 ? void 0 : motionValue.generator;
-                    if (prevGenerator) {
+                /**
+                 * If we should generate an animation for this value, run some preperation
+                 * like resolving target/origin, finding a unit (if any) and determine if
+                 * it is actually possible to generate.
+                 */
+                if (shouldGenerate) {
+                    toUnit = getUnitConverter(keyframes, name ? transformDefinitions.get(getStyleName(name)) : undefined);
+                    const targetDefinition = keyframes[numKeyframes - 1];
+                    target = getAsNumber(targetDefinition);
+                    if (numKeyframes > 1 && keyframes[0] !== null) {
                         /**
-                         * If we have a generator for this value we can use it to resolve
-                         * the animations's current value and velocity.
+                         * If we have multiple keyframes, take the initial keyframe as the origin.
                          */
-                        const { animation, generatorStartTime } = motionValue;
-                        const startTime = (animation === null || animation === void 0 ? void 0 : animation.startTime) || generatorStartTime || 0;
-                        const currentTime = (animation === null || animation === void 0 ? void 0 : animation.currentTime) || performance.now() - startTime;
-                        const prevGeneratorCurrent = prevGenerator(currentTime).current;
-                        origin = (_a = unresolvedOrigin) !== null && _a !== void 0 ? _a : prevGeneratorCurrent;
-                        if (numKeyframes === 1 ||
-                            (numKeyframes === 2 && keyframes[0] === null)) {
+                        origin = getAsNumber(keyframes[0]);
+                    }
+                    else {
+                        const prevGenerator = motionValue === null || motionValue === void 0 ? void 0 : motionValue.generator;
+                        /**
+                         * If we have an existing generator for this value we can use it to resolve
+                         * the animation's current value and velocity.
+                         */
+                        if (prevGenerator) {
+                            /**
+                             * If we have a generator for this value we can use it to resolve
+                             * the animations's current value and velocity.
+                             */
+                            const { animation, generatorStartTime } = motionValue;
+                            const startTime = (animation === null || animation === void 0 ? void 0 : animation.startTime) || generatorStartTime || 0;
+                            const currentTime = (animation === null || animation === void 0 ? void 0 : animation.currentTime) || performance.now() - startTime;
+                            const prevGeneratorCurrent = prevGenerator(currentTime).current;
+                            origin = prevGeneratorCurrent;
                             velocity = calcGeneratorVelocity((t) => prevGenerator(t).current, currentTime, prevGeneratorCurrent);
                         }
+                        else if (getOrigin) {
+                            /**
+                             * As a last resort, read the origin from the DOM.
+                             */
+                            origin = getAsNumber(getOrigin());
+                        }
                     }
-                    else {
-                        origin = (_b = unresolvedOrigin) !== null && _b !== void 0 ? _b : parseFloat(getOrigin());
-                    }
+                }
+                /**
+                 * If we've determined it is possible to generate an animation, do so.
+                 */
+                if (canGenerate(origin) && canGenerate(target)) {
                     const generator = getGenerator(origin, target, velocity, name === null || name === void 0 ? void 0 : name.includes("scale"));
-                    const keyframesMetadata = getKeyframes(generator);
-                    settings = Object.assign(Object.assign({}, keyframesMetadata), { easing: "linear" });
+                    settings = Object.assign(Object.assign({}, getKeyframes(generator, toUnit)), { easing: "linear" });
                     // TODO Add test for this
@@ -65,3 +95,9 @@ if (motionValue) {
                 }
-                else {
+                /**
+                 * If by now we haven't generated a set of keyframes, create a generic generator
+                 * based on the provided props that animates from 0-100 to fetch a rough
+                 * "overshootDuration" - the moment when the generator first hits the animation target.
+                 * Then return animation settings that will run a normal animation for that duration.
+                 */
+                if (!settings) {
                     const keyframesMetadata = getKeyframes(getGenerator(0, 100));
@@ -78,4 +114,3 @@ settings = {
 }
-const isNumberOrNull = (value) => typeof value !== "string";
 
 export { createGeneratorEasing };

dist/size-animate-style.js

@@ -1,1 +0,1 @@
-class t{setAnimation(t){this.animation=t,null==t||t.finished.then((()=>this.clearAnimation())).catch((()=>{}))}clearAnimation(){this.animation=this.generator=void 0}}const e=new WeakMap;function i(t){return e.has(t)||e.set(t,{transforms:[],values:new Map}),e.get(t)}const a=(t,e,i)=>Math.min(Math.max(i,t),e),n={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},s=t=>"number"==typeof t,r=t=>Array.isArray(t)&&!s(t[0]);const o=(t,e,i)=>-i*t+i*e+t,l=()=>{},h=t=>t,c=(t,e,i)=>e-t==0?1:(i-t)/(e-t);function u(t,e){const i=t[t.length-1];for(let a=1;a<=e;a++){const n=c(0,e,a);t.push(o(i,1,n))}}function d(t,e=function(t){const e=[0];return u(e,t-1),e}(t.length),i=h){const n=t.length,s=n-e.length;return s>0&&u(e,s),s=>{let l=0;for(;l<n-2&&!(s<e[l+1]);l++);let h=a(0,1,c(e[l],e[l+1],s));const u=function(t,e){return r(t)?t[((t,e,i)=>{const a=e-t;return((i-t)%a+a)%a+t})(0,t.length,e)]:t}(i,l);return h=u(h),o(t[l],t[l+1],h)}}const f=t=>Array.isArray(t)&&s(t[0]),p=t=>"object"==typeof t&&Boolean(t.createAnimation),m=t=>"function"==typeof t,y=t=>1e3*t,g=["","X","Y","Z"],v={x:"translateX",y:"translateY",z:"translateZ"},T={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},S={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:T,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:h},skew:T},w=new Map,D=t=>`--motion-${t}`,x=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{g.forEach((e=>{x.push(t+e),w.set(D(t+e),S[t])}))}));const A=(t,e)=>x.indexOf(t)-x.indexOf(e),b=new Set(x),k=t=>b.has(t),M=t=>t.sort(A).reduce(O,"").trim(),O=(t,e)=>`${t} ${e}(var(${D(e)}))`,R=t=>t.startsWith("--"),P=new Set;const E=(t,e,i)=>(((1-3*i+3*e)*t+(3*i-6*e))*t+3*e)*t;function V(t,e,i,a){if(t===e&&i===a)return h;const n=e=>function(t,e,i,a,n){let s,r,o=0;do{r=e+(i-e)/2,s=E(r,a,n)-t,s>0?i=r:e=r}while(Math.abs(s)>1e-7&&++o<12);return r}(e,0,1,t,i);return t=>0===t||1===t?t:E(n(t),e,a)}const $={ease:V(.25,.1,.25,1),"ease-in":V(.42,0,1,1),"ease-in-out":V(.42,0,.58,1),"ease-out":V(0,0,.58,1)},j=/\((.*?)\)/;function q(t){if(m(t))return t;if(f(t))return V(...t);if($[t])return $[t];if(t.startsWith("steps")){const e=j.exec(t);if(e){const t=e[1].split(",");return((t,e="end")=>i=>{const n=(i="end"===e?Math.min(i,.999):Math.max(i,.001))*t,s="end"===e?Math.floor(n):Math.ceil(n);return a(0,1,s/t)})(parseFloat(t[0]),t[1].trim())}}return h}class F{constructor(t,e=[0,1],{easing:i,duration:a=n.duration,delay:s=n.delay,endDelay:o=n.endDelay,repeat:l=n.repeat,offset:c,direction:u="normal"}={}){if(this.startTime=null,this.rate=1,this.t=0,this.cancelTimestamp=null,this.easing=h,this.duration=0,this.totalDuration=0,this.repeat=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e})),i=i||n.easing,p(i)){const t=i.createAnimation(e,(()=>"0"),!0);i=t.easing,void 0!==t.keyframes&&(e=t.keyframes),void 0!==t.duration&&(a=t.duration)}this.repeat=l,this.easing=r(i)?h:q(i),this.updateDuration(a);const f=d(e,c,r(i)?i.map(q):h);this.tick=e=>{var i;let a=0;a=void 0!==this.pauseTime?this.pauseTime:(e-this.startTime)*this.rate,this.t=a,a/=1e3,a=Math.max(a-s,0),"finished"===this.playState&&void 0===this.pauseTime&&(a=this.totalDuration);const n=a/this.duration;let r=Math.floor(n),l=n%1;!l&&n>=1&&(l=1),1===l&&r--;const h=r%2;("reverse"===u||"alternate"===u&&h||"alternate-reverse"===u&&!h)&&(l=1-l);const c=a>=this.totalDuration?1:Math.min(l,1),d=f(this.easing(c));t(d);void 0===this.pauseTime&&("finished"===this.playState||a>=this.totalDuration+o)?(this.playState="finished",null===(i=this.resolve)||void 0===i||i.call(this,d)):"idle"!==this.playState&&(this.frameRequestId=requestAnimationFrame(this.tick))},this.play()}play(){const t=performance.now();this.playState="running",void 0!==this.pauseTime?this.startTime=t-this.pauseTime:this.startTime||(this.startTime=t),this.cancelTimestamp=this.startTime,this.pauseTime=void 0,this.frameRequestId=requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=this.t}finish(){this.playState="finished",this.tick(0)}stop(){var t;this.playState="idle",void 0!==this.frameRequestId&&cancelAnimationFrame(this.frameRequestId),null===(t=this.reject)||void 0===t||t.call(this,!1)}cancel(){this.stop(),this.tick(this.cancelTimestamp)}reverse(){this.rate*=-1}commitStyles(){}updateDuration(t){this.duration=t,this.totalDuration=t*(this.repeat+1)}get currentTime(){return this.t}set currentTime(t){void 0!==this.pauseTime||0===this.rate?this.pauseTime=t:this.startTime=performance.now()-t/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}const U=(t,e)=>document.createElement("div").animate(t,e),C={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{U({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(U({opacity:[0,1]},{duration:.001}).finished),linearEasing:()=>{try{U({opacity:0},{easing:"linear(0, 1)"})}catch(t){return!1}return!0}},I={},_={};for(const t in C)_[t]=()=>(void 0===I[t]&&(I[t]=C[t]()),I[t]);const W=(t,e)=>m(t)?_.linearEasing()?`linear(${((t,e)=>{let i="";const a=Math.round(e/.015);for(let e=0;e<a;e++)i+=t(c(0,a-1,e))+", ";return i.substring(0,i.length-2)})(t,e)})`:n.easing:f(t)?z(t):t,z=([t,e,i,a])=>`cubic-bezier(${t}, ${e}, ${i}, ${a})`;function B(t){return v[t]&&(t=v[t]),k(t)?D(t):t}const K=(t,e)=>{e=B(e);let i=R(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!i&&0!==i){const t=w.get(e);t&&(i=t.initialValue)}return i},X=(t,e,i)=>{e=B(e),R(e)?t.style.setProperty(e,i):t.style[e]=i};function Y(e,a,o,h={}){const c=window.__MOTION_DEV_TOOLS_RECORD,u=!1!==h.record&&c;let d,{duration:f=n.duration,delay:g=n.delay,endDelay:T=n.endDelay,repeat:S=n.repeat,easing:D=n.easing,direction:x,offset:A,allowWebkitAcceleration:b=!1}=h;const O=i(e),E=k(a);let V=_.waapi();E&&((t,e)=>{v[e]&&(e=v[e]);const{transforms:a}=i(t);var n,s;s=e,-1===(n=a).indexOf(s)&&n.push(s),t.style.transform=M(a)})(e,a);const $=B(a),j=function(e,i){return e.has(i)||e.set(i,new t),e.get(i)}(O.values,$),q=w.get($);return function(t,e=!0){if(t&&"finished"!==t.playState)try{t.stop?t.stop():(e&&t.commitStyles(),t.cancel())}catch(t){}}(j.animation,!(p(D)&&j.generator)&&!1!==h.record),()=>{const t=()=>{var t,i;return null!==(i=null!==(t=K(e,$))&&void 0!==t?t:null==q?void 0:q.initialValue)&&void 0!==i?i:0};let i=function(t,e){for(let i=0;i<t.length;i++)null===t[i]&&(t[i]=i?t[i-1]:e());return t}((t=>Array.isArray(t)?t:[t])(o),t);if(p(D)){const e=D.createAnimation(i,t,E,$,j);D=e.easing,void 0!==e.keyframes&&(i=e.keyframes),void 0!==e.duration&&(f=e.duration)}if(R($)&&(_.cssRegisterProperty()?function(t){if(!P.has(t)){P.add(t);try{const{syntax:e,initialValue:i}=w.has(t)?w.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:i})}catch(t){}}}($):V=!1),E&&!_.linearEasing()&&(m(D)||r(D)&&D.some(m))&&(V=!1),V){q&&(i=i.map((t=>s(t)?q.toDefaultUnit(t):t))),1!==i.length||_.partialKeyframes()&&!u||i.unshift(t());const a={delay:y(g),duration:y(f),endDelay:y(T),easing:r(D)?void 0:W(D,f),direction:x,iterations:S+1,fill:"both"};d=e.animate({[$]:i,offset:A,easing:r(D)?D.map((t=>W(t,f))):void 0},a),d.finished||(d.finished=new Promise(((t,e)=>{d.onfinish=t,d.oncancel=e})));const n=i[i.length-1];d.finished.then((()=>{X(e,$,n),d.cancel()})).catch(l),b||(d.playbackRate=1.000001)}else if(E){i=i.map((t=>"string"==typeof t?parseFloat(t):t)),1===i.length&&i.unshift(parseFloat(t()));d=new F((t=>{q&&(t=q.toDefaultUnit(t)),X(e,$,t)}),i,Object.assign(Object.assign({},h),{duration:f,easing:D}))}else{const t=i[i.length-1];X(e,$,q&&s(t)?q.toDefaultUnit(t):t)}return u&&c(e,a,i,{duration:f,delay:g,easing:D,repeat:S,offset:A},"motion-one"),j.setAnimation(d),d}}export{Y as animateStyle};
+class t{setAnimation(t){this.animation=t,null==t||t.finished.then((()=>this.clearAnimation())).catch((()=>{}))}clearAnimation(){this.animation=this.generator=void 0}}const e=new WeakMap;function i(t){return e.has(t)||e.set(t,{transforms:[],values:new Map}),e.get(t)}const a=(t,e,i)=>Math.min(Math.max(i,t),e),n={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},s=t=>"number"==typeof t,r=t=>Array.isArray(t)&&!s(t[0]);const o=(t,e,i)=>-i*t+i*e+t,l=()=>{},c=t=>t,h=(t,e,i)=>e-t==0?1:(i-t)/(e-t);function u(t,e){const i=t[t.length-1];for(let a=1;a<=e;a++){const n=h(0,e,a);t.push(o(i,1,n))}}function d(t,e=function(t){const e=[0];return u(e,t-1),e}(t.length),i=c){const n=t.length,s=n-e.length;return s>0&&u(e,s),s=>{let l=0;for(;l<n-2&&!(s<e[l+1]);l++);let c=a(0,1,h(e[l],e[l+1],s));const u=function(t,e){return r(t)?t[((t,e,i)=>{const a=e-t;return((i-t)%a+a)%a+t})(0,t.length,e)]:t}(i,l);return c=u(c),o(t[l],t[l+1],c)}}const f=t=>Array.isArray(t)&&s(t[0]),p=t=>"object"==typeof t&&Boolean(t.createAnimation),m=t=>"function"==typeof t,y=t=>1e3*t,g=["","X","Y","Z"],v={x:"translateX",y:"translateY",z:"translateZ"},T={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},S={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:T,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:c},skew:T},w=new Map,D=t=>`--motion-${t}`,x=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{g.forEach((e=>{x.push(t+e),w.set(D(t+e),S[t])}))}));const A=(t,e)=>x.indexOf(t)-x.indexOf(e),b=new Set(x),M=t=>b.has(t),k=t=>t.sort(A).reduce(O,"").trim(),O=(t,e)=>`${t} ${e}(var(${D(e)}))`,R=t=>t.startsWith("--"),P=new Set;const E=(t,e,i)=>(((1-3*i+3*e)*t+(3*i-6*e))*t+3*e)*t;function V(t,e,i,a){if(t===e&&i===a)return c;const n=e=>function(t,e,i,a,n){let s,r,o=0;do{r=e+(i-e)/2,s=E(r,a,n)-t,s>0?i=r:e=r}while(Math.abs(s)>1e-7&&++o<12);return r}(e,0,1,t,i);return t=>0===t||1===t?t:E(n(t),e,a)}const $={ease:V(.25,.1,.25,1),"ease-in":V(.42,0,1,1),"ease-in-out":V(.42,0,.58,1),"ease-out":V(0,0,.58,1)},j=/\((.*?)\)/;function q(t){if(m(t))return t;if(f(t))return V(...t);if($[t])return $[t];if(t.startsWith("steps")){const e=j.exec(t);if(e){const t=e[1].split(",");return((t,e="end")=>i=>{const n=(i="end"===e?Math.min(i,.999):Math.max(i,.001))*t,s="end"===e?Math.floor(n):Math.ceil(n);return a(0,1,s/t)})(parseFloat(t[0]),t[1].trim())}}return c}class F{constructor(t,e=[0,1],{easing:i,duration:a=n.duration,delay:s=n.delay,endDelay:o=n.endDelay,repeat:l=n.repeat,offset:h,direction:u="normal"}={}){if(this.startTime=null,this.rate=1,this.t=0,this.cancelTimestamp=null,this.easing=c,this.duration=0,this.totalDuration=0,this.repeat=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e})),i=i||n.easing,p(i)){const t=i.createAnimation(e);i=t.easing,e=t.keyframes||e,a=t.duration||a}this.repeat=l,this.easing=r(i)?c:q(i),this.updateDuration(a);const f=d(e,h,r(i)?i.map(q):c);this.tick=e=>{var i;let a=0;a=void 0!==this.pauseTime?this.pauseTime:(e-this.startTime)*this.rate,this.t=a,a/=1e3,a=Math.max(a-s,0),"finished"===this.playState&&void 0===this.pauseTime&&(a=this.totalDuration);const n=a/this.duration;let r=Math.floor(n),l=n%1;!l&&n>=1&&(l=1),1===l&&r--;const c=r%2;("reverse"===u||"alternate"===u&&c||"alternate-reverse"===u&&!c)&&(l=1-l);const h=a>=this.totalDuration?1:Math.min(l,1),d=f(this.easing(h));t(d);void 0===this.pauseTime&&("finished"===this.playState||a>=this.totalDuration+o)?(this.playState="finished",null===(i=this.resolve)||void 0===i||i.call(this,d)):"idle"!==this.playState&&(this.frameRequestId=requestAnimationFrame(this.tick))},this.play()}play(){const t=performance.now();this.playState="running",void 0!==this.pauseTime?this.startTime=t-this.pauseTime:this.startTime||(this.startTime=t),this.cancelTimestamp=this.startTime,this.pauseTime=void 0,this.frameRequestId=requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=this.t}finish(){this.playState="finished",this.tick(0)}stop(){var t;this.playState="idle",void 0!==this.frameRequestId&&cancelAnimationFrame(this.frameRequestId),null===(t=this.reject)||void 0===t||t.call(this,!1)}cancel(){this.stop(),this.tick(this.cancelTimestamp)}reverse(){this.rate*=-1}commitStyles(){}updateDuration(t){this.duration=t,this.totalDuration=t*(this.repeat+1)}get currentTime(){return this.t}set currentTime(t){void 0!==this.pauseTime||0===this.rate?this.pauseTime=t:this.startTime=performance.now()-t/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}const U=(t,e)=>document.createElement("div").animate(t,e),C={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{U({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(U({opacity:[0,1]},{duration:.001}).finished),linearEasing:()=>{try{U({opacity:0},{easing:"linear(0, 1)"})}catch(t){return!1}return!0}},I={},_={};for(const t in C)_[t]=()=>(void 0===I[t]&&(I[t]=C[t]()),I[t]);const z=(t,e)=>m(t)?_.linearEasing()?`linear(${((t,e)=>{let i="";const a=Math.round(e/.015);for(let e=0;e<a;e++)i+=t(h(0,a-1,e))+", ";return i.substring(0,i.length-2)})(t,e)})`:n.easing:f(t)?W(t):t,W=([t,e,i,a])=>`cubic-bezier(${t}, ${e}, ${i}, ${a})`;function B(t){return v[t]&&(t=v[t]),M(t)?D(t):t}const K=(t,e)=>{e=B(e);let i=R(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!i&&0!==i){const t=w.get(e);t&&(i=t.initialValue)}return i},X=(t,e,i)=>{e=B(e),R(e)?t.style.setProperty(e,i):t.style[e]=i};function Y(e,a,o,h={}){const u=window.__MOTION_DEV_TOOLS_RECORD,d=!1!==h.record&&u;let f,{duration:g=n.duration,delay:T=n.delay,endDelay:S=n.endDelay,repeat:D=n.repeat,easing:x=n.easing,direction:A,offset:b,allowWebkitAcceleration:O=!1}=h;const E=i(e),V=M(a);let $=_.waapi();V&&((t,e)=>{v[e]&&(e=v[e]);const{transforms:a}=i(t);var n,s;s=e,-1===(n=a).indexOf(s)&&n.push(s),t.style.transform=k(a)})(e,a);const j=B(a),q=function(e,i){return e.has(i)||e.set(i,new t),e.get(i)}(E.values,j),U=w.get(j);return function(t,e=!0){if(t&&"finished"!==t.playState)try{t.stop?t.stop():(e&&t.commitStyles(),t.cancel())}catch(t){}}(q.animation,!(p(x)&&q.generator)&&!1!==h.record),()=>{const t=()=>{var t,i;return null!==(i=null!==(t=K(e,j))&&void 0!==t?t:null==U?void 0:U.initialValue)&&void 0!==i?i:0};let i=function(t,e){for(let i=0;i<t.length;i++)null===t[i]&&(t[i]=i?t[i-1]:e());return t}((t=>Array.isArray(t)?t:[t])(o),t);const n=function(t,e){var i;let a=(null==e?void 0:e.toDefaultUnit)||c;const n=t[t.length-1];if("string"==typeof n){const t=(null===(i=n.match(/(-?[\d.]+)([a-z%]*)/))||void 0===i?void 0:i[2])||"";t&&(a=e=>e+t)}return a}(i,U);if(p(x)){const e=x.createAnimation(i,"opacity"!==a,t,j,q);x=e.easing,i=e.keyframes||i,g=e.duration||g}if(R(j)&&(_.cssRegisterProperty()?function(t){if(!P.has(t)){P.add(t);try{const{syntax:e,initialValue:i}=w.has(t)?w.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:i})}catch(t){}}}(j):$=!1),V&&!_.linearEasing()&&(m(x)||r(x)&&x.some(m))&&($=!1),$){U&&(i=i.map((t=>s(t)?U.toDefaultUnit(t):t))),1!==i.length||_.partialKeyframes()&&!d||i.unshift(t());const a={delay:y(T),duration:y(g),endDelay:y(S),easing:r(x)?void 0:z(x,g),direction:A,iterations:D+1,fill:"both"};f=e.animate({[j]:i,offset:b,easing:r(x)?x.map((t=>z(t,g))):void 0},a),f.finished||(f.finished=new Promise(((t,e)=>{f.onfinish=t,f.oncancel=e})));const n=i[i.length-1];f.finished.then((()=>{X(e,j,n),f.cancel()})).catch(l),O||(f.playbackRate=1.000001)}else if(V)i=i.map((t=>"string"==typeof t?parseFloat(t):t)),1===i.length&&i.unshift(parseFloat(t())),f=new F((t=>{X(e,j,n?n(t):t)}),i,Object.assign(Object.assign({},h),{duration:g,easing:x}));else{const t=i[i.length-1];X(e,j,U&&s(t)?U.toDefaultUnit(t):t)}return d&&u(e,a,i,{duration:g,delay:T,easing:x,repeat:D,offset:b},"motion-one"),q.setAnimation(f),f}}export{Y as animateStyle};

dist/size-animate.js

@@ -1,1 +0,1 @@
-class t{setAnimation(t){this.animation=t,null==t||t.finished.then((()=>this.clearAnimation())).catch((()=>{}))}clearAnimation(){this.animation=this.generator=void 0}}const e=new WeakMap;function i(t){return e.has(t)||e.set(t,{transforms:[],values:new Map}),e.get(t)}const n=(t,e,i)=>Math.min(Math.max(i,t),e),a={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},s=t=>"number"==typeof t,r=t=>Array.isArray(t)&&!s(t[0]);const o=(t,e,i)=>-i*t+i*e+t,l=()=>{},c=t=>t,u=(t,e,i)=>e-t==0?1:(i-t)/(e-t);function h(t,e){const i=t[t.length-1];for(let n=1;n<=e;n++){const a=u(0,e,n);t.push(o(i,1,a))}}function d(t,e=function(t){const e=[0];return h(e,t-1),e}(t.length),i=c){const a=t.length,s=a-e.length;return s>0&&h(e,s),s=>{let l=0;for(;l<a-2&&!(s<e[l+1]);l++);let c=n(0,1,u(e[l],e[l+1],s));const h=function(t,e){return r(t)?t[((t,e,i)=>{const n=e-t;return((i-t)%n+n)%n+t})(0,t.length,e)]:t}(i,l);return c=h(c),o(t[l],t[l+1],c)}}const f=t=>Array.isArray(t)&&s(t[0]),m=t=>"object"==typeof t&&Boolean(t.createAnimation),p=t=>"function"==typeof t,y=t=>1e3*t,g=t=>t/1e3,v=["","X","Y","Z"],T={x:"translateX",y:"translateY",z:"translateZ"},S={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},w={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:S,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:c},skew:S},b=new Map,D=t=>`--motion-${t}`,A=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{v.forEach((e=>{A.push(t+e),b.set(D(t+e),w[t])}))}));const k=(t,e)=>A.indexOf(t)-A.indexOf(e),x=new Set(A),O=t=>x.has(t),M=t=>t.sort(k).reduce(E,"").trim(),E=(t,e)=>`${t} ${e}(var(${D(e)}))`,R=t=>t.startsWith("--"),P=new Set;const j=(t,e,i)=>(((1-3*i+3*e)*t+(3*i-6*e))*t+3*e)*t;function V(t,e,i,n){if(t===e&&i===n)return c;const a=e=>function(t,e,i,n,a){let s,r,o=0;do{r=e+(i-e)/2,s=j(r,n,a)-t,s>0?i=r:e=r}while(Math.abs(s)>1e-7&&++o<12);return r}(e,0,1,t,i);return t=>0===t||1===t?t:j(a(t),e,n)}const $={ease:V(.25,.1,.25,1),"ease-in":V(.42,0,1,1),"ease-in-out":V(.42,0,.58,1),"ease-out":V(0,0,.58,1)},q=/\((.*?)\)/;function F(t){if(p(t))return t;if(f(t))return V(...t);if($[t])return $[t];if(t.startsWith("steps")){const e=q.exec(t);if(e){const t=e[1].split(",");return((t,e="end")=>i=>{const a=(i="end"===e?Math.min(i,.999):Math.max(i,.001))*t,s="end"===e?Math.floor(a):Math.ceil(a);return n(0,1,s/t)})(parseFloat(t[0]),t[1].trim())}}return c}class U{constructor(t,e=[0,1],{easing:i,duration:n=a.duration,delay:s=a.delay,endDelay:o=a.endDelay,repeat:l=a.repeat,offset:u,direction:h="normal"}={}){if(this.startTime=null,this.rate=1,this.t=0,this.cancelTimestamp=null,this.easing=c,this.duration=0,this.totalDuration=0,this.repeat=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e})),i=i||a.easing,m(i)){const t=i.createAnimation(e,(()=>"0"),!0);i=t.easing,void 0!==t.keyframes&&(e=t.keyframes),void 0!==t.duration&&(n=t.duration)}this.repeat=l,this.easing=r(i)?c:F(i),this.updateDuration(n);const f=d(e,u,r(i)?i.map(F):c);this.tick=e=>{var i;let n=0;n=void 0!==this.pauseTime?this.pauseTime:(e-this.startTime)*this.rate,this.t=n,n/=1e3,n=Math.max(n-s,0),"finished"===this.playState&&void 0===this.pauseTime&&(n=this.totalDuration);const a=n/this.duration;let r=Math.floor(a),l=a%1;!l&&a>=1&&(l=1),1===l&&r--;const c=r%2;("reverse"===h||"alternate"===h&&c||"alternate-reverse"===h&&!c)&&(l=1-l);const u=n>=this.totalDuration?1:Math.min(l,1),d=f(this.easing(u));t(d);void 0===this.pauseTime&&("finished"===this.playState||n>=this.totalDuration+o)?(this.playState="finished",null===(i=this.resolve)||void 0===i||i.call(this,d)):"idle"!==this.playState&&(this.frameRequestId=requestAnimationFrame(this.tick))},this.play()}play(){const t=performance.now();this.playState="running",void 0!==this.pauseTime?this.startTime=t-this.pauseTime:this.startTime||(this.startTime=t),this.cancelTimestamp=this.startTime,this.pauseTime=void 0,this.frameRequestId=requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=this.t}finish(){this.playState="finished",this.tick(0)}stop(){var t;this.playState="idle",void 0!==this.frameRequestId&&cancelAnimationFrame(this.frameRequestId),null===(t=this.reject)||void 0===t||t.call(this,!1)}cancel(){this.stop(),this.tick(this.cancelTimestamp)}reverse(){this.rate*=-1}commitStyles(){}updateDuration(t){this.duration=t,this.totalDuration=t*(this.repeat+1)}get currentTime(){return this.t}set currentTime(t){void 0!==this.pauseTime||0===this.rate?this.pauseTime=t:this.startTime=performance.now()-t/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}const C=(t,e)=>document.createElement("div").animate(t,e),I={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{C({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(C({opacity:[0,1]},{duration:.001}).finished),linearEasing:()=>{try{C({opacity:0},{easing:"linear(0, 1)"})}catch(t){return!1}return!0}},_={},W={};for(const t in I)W[t]=()=>(void 0===_[t]&&(_[t]=I[t]()),_[t]);const z=(t,e)=>p(t)?W.linearEasing()?`linear(${((t,e)=>{let i="";const n=Math.round(e/.015);for(let e=0;e<n;e++)i+=t(u(0,n-1,e))+", ";return i.substring(0,i.length-2)})(t,e)})`:a.easing:f(t)?B(t):t,B=([t,e,i,n])=>`cubic-bezier(${t}, ${e}, ${i}, ${n})`;function K(t){return T[t]&&(t=T[t]),O(t)?D(t):t}const N=(t,e)=>{e=K(e);let i=R(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!i&&0!==i){const t=b.get(e);t&&(i=t.initialValue)}return i},X=(t,e,i)=>{e=K(e),R(e)?t.style.setProperty(e,i):t.style[e]=i};function Y(t,e=!0){if(t&&"finished"!==t.playState)try{t.stop?t.stop():(e&&t.commitStyles(),t.cancel())}catch(t){}}function Z(e,n,o,c={}){const u=window.__MOTION_DEV_TOOLS_RECORD,h=!1!==c.record&&u;let d,{duration:f=a.duration,delay:g=a.delay,endDelay:v=a.endDelay,repeat:S=a.repeat,easing:w=a.easing,direction:D,offset:A,allowWebkitAcceleration:k=!1}=c;const x=i(e),E=O(n);let j=W.waapi();E&&((t,e)=>{T[e]&&(e=T[e]);const{transforms:n}=i(t);var a,s;s=e,-1===(a=n).indexOf(s)&&a.push(s),t.style.transform=M(n)})(e,n);const V=K(n),$=function(e,i){return e.has(i)||e.set(i,new t),e.get(i)}(x.values,V),q=b.get(V);return Y($.animation,!(m(w)&&$.generator)&&!1!==c.record),()=>{const t=()=>{var t,i;return null!==(i=null!==(t=N(e,V))&&void 0!==t?t:null==q?void 0:q.initialValue)&&void 0!==i?i:0};let i=function(t,e){for(let i=0;i<t.length;i++)null===t[i]&&(t[i]=i?t[i-1]:e());return t}((t=>Array.isArray(t)?t:[t])(o),t);if(m(w)){const e=w.createAnimation(i,t,E,V,$);w=e.easing,void 0!==e.keyframes&&(i=e.keyframes),void 0!==e.duration&&(f=e.duration)}if(R(V)&&(W.cssRegisterProperty()?function(t){if(!P.has(t)){P.add(t);try{const{syntax:e,initialValue:i}=b.has(t)?b.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:i})}catch(t){}}}(V):j=!1),E&&!W.linearEasing()&&(p(w)||r(w)&&w.some(p))&&(j=!1),j){q&&(i=i.map((t=>s(t)?q.toDefaultUnit(t):t))),1!==i.length||W.partialKeyframes()&&!h||i.unshift(t());const n={delay:y(g),duration:y(f),endDelay:y(v),easing:r(w)?void 0:z(w,f),direction:D,iterations:S+1,fill:"both"};d=e.animate({[V]:i,offset:A,easing:r(w)?w.map((t=>z(t,f))):void 0},n),d.finished||(d.finished=new Promise(((t,e)=>{d.onfinish=t,d.oncancel=e})));const a=i[i.length-1];d.finished.then((()=>{X(e,V,a),d.cancel()})).catch(l),k||(d.playbackRate=1.000001)}else if(E){i=i.map((t=>"string"==typeof t?parseFloat(t):t)),1===i.length&&i.unshift(parseFloat(t()));d=new U((t=>{q&&(t=q.toDefaultUnit(t)),X(e,V,t)}),i,Object.assign(Object.assign({},c),{duration:f,easing:w}))}else{const t=i[i.length-1];X(e,V,q&&s(t)?q.toDefaultUnit(t):t)}return h&&u(e,n,i,{duration:f,delay:g,easing:w,repeat:S,offset:A},"motion-one"),$.setAnimation(d),d}}const L=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):Object.assign({},t);const G=t=>t(),H={get:(t,e)=>{const i=t.animations[0];switch(e){case"duration":return t.duration;case"currentTime":return g((null==i?void 0:i[e])||0);case"playbackRate":case"playState":return null==i?void 0:i[e];case"finished":return t.finished||(t.finished=Promise.all(t.animations.map(J)).catch(l)),t.finished;case"stop":return()=>{t.animations.forEach((t=>Y(t)))};case"forEachNative":return e=>{t.animations.forEach((i=>e(i,t)))};default:return void 0===(null==i?void 0:i[e])?void 0:()=>t.animations.forEach((t=>t[e]()))}},set:(t,e,i)=>{switch(e){case"currentTime":i=y(i);case"currentTime":case"playbackRate":for(let n=0;n<t.animations.length;n++)t.animations[n][e]=i;return!0}return!1}},J=t=>t.finished;function Q(t,e,i){return p(t)?t(e,i):t}function tt(t,e,i={}){const n=(t=function(t,e){var i;return"string"==typeof t?e?(null!==(i=e[t])&&void 0!==i||(e[t]=document.querySelectorAll(t)),t=e[t]):t=document.querySelectorAll(t):t instanceof Element&&(t=[t]),Array.from(t||[])}(t)).length,s=[];for(let a=0;a<n;a++){const r=t[a];for(const t in e){const o=L(i,t);o.delay=Q(o.delay,a,n);const l=Z(r,t,e[t],o);s.push(l)}}return((t,e,i=a.duration)=>new Proxy({animations:t.map(G).filter(Boolean),duration:i,options:e},H))(s,i,i.duration)}export{tt as animate};
+class t{setAnimation(t){this.animation=t,null==t||t.finished.then((()=>this.clearAnimation())).catch((()=>{}))}clearAnimation(){this.animation=this.generator=void 0}}const e=new WeakMap;function i(t){return e.has(t)||e.set(t,{transforms:[],values:new Map}),e.get(t)}const n=(t,e,i)=>Math.min(Math.max(i,t),e),a={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},s=t=>"number"==typeof t,r=t=>Array.isArray(t)&&!s(t[0]);const o=(t,e,i)=>-i*t+i*e+t,l=()=>{},c=t=>t,u=(t,e,i)=>e-t==0?1:(i-t)/(e-t);function h(t,e){const i=t[t.length-1];for(let n=1;n<=e;n++){const a=u(0,e,n);t.push(o(i,1,a))}}function d(t,e=function(t){const e=[0];return h(e,t-1),e}(t.length),i=c){const a=t.length,s=a-e.length;return s>0&&h(e,s),s=>{let l=0;for(;l<a-2&&!(s<e[l+1]);l++);let c=n(0,1,u(e[l],e[l+1],s));const h=function(t,e){return r(t)?t[((t,e,i)=>{const n=e-t;return((i-t)%n+n)%n+t})(0,t.length,e)]:t}(i,l);return c=h(c),o(t[l],t[l+1],c)}}const f=t=>Array.isArray(t)&&s(t[0]),m=t=>"object"==typeof t&&Boolean(t.createAnimation),p=t=>"function"==typeof t,y=t=>1e3*t,g=t=>t/1e3,v=["","X","Y","Z"],T={x:"translateX",y:"translateY",z:"translateZ"},S={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},w={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:S,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:c},skew:S},b=new Map,D=t=>`--motion-${t}`,A=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{v.forEach((e=>{A.push(t+e),b.set(D(t+e),w[t])}))}));const x=(t,e)=>A.indexOf(t)-A.indexOf(e),O=new Set(A),k=t=>O.has(t),M=t=>t.sort(x).reduce(E,"").trim(),E=(t,e)=>`${t} ${e}(var(${D(e)}))`,R=t=>t.startsWith("--"),P=new Set;const j=(t,e,i)=>(((1-3*i+3*e)*t+(3*i-6*e))*t+3*e)*t;function V(t,e,i,n){if(t===e&&i===n)return c;const a=e=>function(t,e,i,n,a){let s,r,o=0;do{r=e+(i-e)/2,s=j(r,n,a)-t,s>0?i=r:e=r}while(Math.abs(s)>1e-7&&++o<12);return r}(e,0,1,t,i);return t=>0===t||1===t?t:j(a(t),e,n)}const $={ease:V(.25,.1,.25,1),"ease-in":V(.42,0,1,1),"ease-in-out":V(.42,0,.58,1),"ease-out":V(0,0,.58,1)},q=/\((.*?)\)/;function F(t){if(p(t))return t;if(f(t))return V(...t);if($[t])return $[t];if(t.startsWith("steps")){const e=q.exec(t);if(e){const t=e[1].split(",");return((t,e="end")=>i=>{const a=(i="end"===e?Math.min(i,.999):Math.max(i,.001))*t,s="end"===e?Math.floor(a):Math.ceil(a);return n(0,1,s/t)})(parseFloat(t[0]),t[1].trim())}}return c}class U{constructor(t,e=[0,1],{easing:i,duration:n=a.duration,delay:s=a.delay,endDelay:o=a.endDelay,repeat:l=a.repeat,offset:u,direction:h="normal"}={}){if(this.startTime=null,this.rate=1,this.t=0,this.cancelTimestamp=null,this.easing=c,this.duration=0,this.totalDuration=0,this.repeat=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e})),i=i||a.easing,m(i)){const t=i.createAnimation(e);i=t.easing,e=t.keyframes||e,n=t.duration||n}this.repeat=l,this.easing=r(i)?c:F(i),this.updateDuration(n);const f=d(e,u,r(i)?i.map(F):c);this.tick=e=>{var i;let n=0;n=void 0!==this.pauseTime?this.pauseTime:(e-this.startTime)*this.rate,this.t=n,n/=1e3,n=Math.max(n-s,0),"finished"===this.playState&&void 0===this.pauseTime&&(n=this.totalDuration);const a=n/this.duration;let r=Math.floor(a),l=a%1;!l&&a>=1&&(l=1),1===l&&r--;const c=r%2;("reverse"===h||"alternate"===h&&c||"alternate-reverse"===h&&!c)&&(l=1-l);const u=n>=this.totalDuration?1:Math.min(l,1),d=f(this.easing(u));t(d);void 0===this.pauseTime&&("finished"===this.playState||n>=this.totalDuration+o)?(this.playState="finished",null===(i=this.resolve)||void 0===i||i.call(this,d)):"idle"!==this.playState&&(this.frameRequestId=requestAnimationFrame(this.tick))},this.play()}play(){const t=performance.now();this.playState="running",void 0!==this.pauseTime?this.startTime=t-this.pauseTime:this.startTime||(this.startTime=t),this.cancelTimestamp=this.startTime,this.pauseTime=void 0,this.frameRequestId=requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=this.t}finish(){this.playState="finished",this.tick(0)}stop(){var t;this.playState="idle",void 0!==this.frameRequestId&&cancelAnimationFrame(this.frameRequestId),null===(t=this.reject)||void 0===t||t.call(this,!1)}cancel(){this.stop(),this.tick(this.cancelTimestamp)}reverse(){this.rate*=-1}commitStyles(){}updateDuration(t){this.duration=t,this.totalDuration=t*(this.repeat+1)}get currentTime(){return this.t}set currentTime(t){void 0!==this.pauseTime||0===this.rate?this.pauseTime=t:this.startTime=performance.now()-t/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}const C=(t,e)=>document.createElement("div").animate(t,e),I={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{C({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(C({opacity:[0,1]},{duration:.001}).finished),linearEasing:()=>{try{C({opacity:0},{easing:"linear(0, 1)"})}catch(t){return!1}return!0}},_={},z={};for(const t in I)z[t]=()=>(void 0===_[t]&&(_[t]=I[t]()),_[t]);const W=(t,e)=>p(t)?z.linearEasing()?`linear(${((t,e)=>{let i="";const n=Math.round(e/.015);for(let e=0;e<n;e++)i+=t(u(0,n-1,e))+", ";return i.substring(0,i.length-2)})(t,e)})`:a.easing:f(t)?B(t):t,B=([t,e,i,n])=>`cubic-bezier(${t}, ${e}, ${i}, ${n})`;function K(t){return T[t]&&(t=T[t]),k(t)?D(t):t}const N=(t,e)=>{e=K(e);let i=R(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!i&&0!==i){const t=b.get(e);t&&(i=t.initialValue)}return i},X=(t,e,i)=>{e=K(e),R(e)?t.style.setProperty(e,i):t.style[e]=i};function Y(t,e=!0){if(t&&"finished"!==t.playState)try{t.stop?t.stop():(e&&t.commitStyles(),t.cancel())}catch(t){}}function Z(e,n,o,u={}){const h=window.__MOTION_DEV_TOOLS_RECORD,d=!1!==u.record&&h;let f,{duration:g=a.duration,delay:v=a.delay,endDelay:S=a.endDelay,repeat:w=a.repeat,easing:D=a.easing,direction:A,offset:x,allowWebkitAcceleration:O=!1}=u;const E=i(e),j=k(n);let V=z.waapi();j&&((t,e)=>{T[e]&&(e=T[e]);const{transforms:n}=i(t);var a,s;s=e,-1===(a=n).indexOf(s)&&a.push(s),t.style.transform=M(n)})(e,n);const $=K(n),q=function(e,i){return e.has(i)||e.set(i,new t),e.get(i)}(E.values,$),F=b.get($);return Y(q.animation,!(m(D)&&q.generator)&&!1!==u.record),()=>{const t=()=>{var t,i;return null!==(i=null!==(t=N(e,$))&&void 0!==t?t:null==F?void 0:F.initialValue)&&void 0!==i?i:0};let i=function(t,e){for(let i=0;i<t.length;i++)null===t[i]&&(t[i]=i?t[i-1]:e());return t}((t=>Array.isArray(t)?t:[t])(o),t);const a=function(t,e){var i;let n=(null==e?void 0:e.toDefaultUnit)||c;const a=t[t.length-1];if("string"==typeof a){const t=(null===(i=a.match(/(-?[\d.]+)([a-z%]*)/))||void 0===i?void 0:i[2])||"";t&&(n=e=>e+t)}return n}(i,F);if(m(D)){const e=D.createAnimation(i,"opacity"!==n,t,$,q);D=e.easing,i=e.keyframes||i,g=e.duration||g}if(R($)&&(z.cssRegisterProperty()?function(t){if(!P.has(t)){P.add(t);try{const{syntax:e,initialValue:i}=b.has(t)?b.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:i})}catch(t){}}}($):V=!1),j&&!z.linearEasing()&&(p(D)||r(D)&&D.some(p))&&(V=!1),V){F&&(i=i.map((t=>s(t)?F.toDefaultUnit(t):t))),1!==i.length||z.partialKeyframes()&&!d||i.unshift(t());const n={delay:y(v),duration:y(g),endDelay:y(S),easing:r(D)?void 0:W(D,g),direction:A,iterations:w+1,fill:"both"};f=e.animate({[$]:i,offset:x,easing:r(D)?D.map((t=>W(t,g))):void 0},n),f.finished||(f.finished=new Promise(((t,e)=>{f.onfinish=t,f.oncancel=e})));const a=i[i.length-1];f.finished.then((()=>{X(e,$,a),f.cancel()})).catch(l),O||(f.playbackRate=1.000001)}else if(j)i=i.map((t=>"string"==typeof t?parseFloat(t):t)),1===i.length&&i.unshift(parseFloat(t())),f=new U((t=>{X(e,$,a?a(t):t)}),i,Object.assign(Object.assign({},u),{duration:g,easing:D}));else{const t=i[i.length-1];X(e,$,F&&s(t)?F.toDefaultUnit(t):t)}return d&&h(e,n,i,{duration:g,delay:v,easing:D,repeat:w,offset:x},"motion-one"),q.setAnimation(f),f}}const L=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):Object.assign({},t);const G=t=>t(),H={get:(t,e)=>{const i=t.animations[0];switch(e){case"duration":return t.duration;case"currentTime":return g((null==i?void 0:i[e])||0);case"playbackRate":case"playState":return null==i?void 0:i[e];case"finished":return t.finished||(t.finished=Promise.all(t.animations.map(J)).catch(l)),t.finished;case"stop":return()=>{t.animations.forEach((t=>Y(t)))};case"forEachNative":return e=>{t.animations.forEach((i=>e(i,t)))};default:return void 0===(null==i?void 0:i[e])?void 0:()=>t.animations.forEach((t=>t[e]()))}},set:(t,e,i)=>{switch(e){case"currentTime":i=y(i);case"currentTime":case"playbackRate":for(let n=0;n<t.animations.length;n++)t.animations[n][e]=i;return!0}return!1}},J=t=>t.finished;function Q(t,e,i){return p(t)?t(e,i):t}function tt(t,e,i={}){const n=(t=function(t,e){var i;return"string"==typeof t?e?(null!==(i=e[t])&&void 0!==i||(e[t]=document.querySelectorAll(t)),t=e[t]):t=document.querySelectorAll(t):t instanceof Element&&(t=[t]),Array.from(t||[])}(t)).length,s=[];for(let a=0;a<n;a++){const r=t[a];for(const t in e){const o=L(i,t);o.delay=Q(o.delay,a,n);const l=Z(r,t,e[t],o);s.push(l)}}return((t,e,i=a.duration)=>new Proxy({animations:t.map(G).filter(Boolean),duration:i,options:e},H))(s,i,i.duration)}export{tt as animate};

dist/size-spring.js

@@ -1,1 +0,1 @@
-const e=e=>e/1e3;function t(e,t,n){const r=Math.max(t-5,0);return a=n-e(r),(s=t-r)?a*(1e3/s):0;var a,s}const n=100,r=10,a=1;const s=e=>"string"!=typeof e,o=function(e){const n=new WeakMap;return(r={})=>{const a=new Map,o=(t=0,n=100,s=0,o=!1)=>{const c=`${t}-${n}-${s}-${o}`;return a.has(c)||a.set(c,e(Object.assign({from:t,to:n,velocity:s,restSpeed:o?.05:2,restDistance:o?.01:.5},r))),a.get(c)},c=e=>(n.has(e)||n.set(e,function(e){let t,n=10,r=e(0);const a=[r.current];for(;!r.done&&n<1e4;)r=e(n),a.push(r.done?r.target:r.current),void 0===t&&r.hasReachedTarget&&(t=n),n+=10;const s=n-10;return 1===a.length&&a.push(r.current),{keyframes:a,duration:s/1e3,overshootDuration:(null!=t?t:s)/1e3}}(e)),n.get(e));return{createAnimation:(e,n,r,a,i)=>{var u,l;let h;const d=e.length;if(r&&d<=2&&e.every(s)){const r=e[d-1],s=1===d?null:e[0];let g=0,f=0;const v=null==i?void 0:i.generator;if(v){const{animation:n,generatorStartTime:r}=i,a=(null==n?void 0:n.startTime)||r||0,o=(null==n?void 0:n.currentTime)||performance.now()-a,c=v(o).current;f=null!==(u=s)&&void 0!==u?u:c,(1===d||2===d&&null===e[0])&&(g=t((e=>v(e).current),o,c))}else f=null!==(l=s)&&void 0!==l?l:parseFloat(n());const m=o(f,r,g,null==a?void 0:a.includes("scale")),p=c(m);h=Object.assign(Object.assign({},p),{easing:"linear"}),i&&(i.generator=m,i.generatorStartTime=performance.now())}else{h={easing:"ease",duration:c(o(0,100)).overshootDuration}}return h}}}}((({stiffness:s=n,damping:o=r,mass:c=a,from:i=0,to:u=1,velocity:l=0,restSpeed:h=2,restDistance:d=.5}={})=>{l=l?e(l):0;const g={done:!1,hasReachedTarget:!1,current:i,target:u},f=u-i,v=Math.sqrt(s/c)/1e3,m=((e=n,t=r,s=a)=>t/(2*Math.sqrt(e*s)))(s,o,c);let p;if(m<1){const e=v*Math.sqrt(1-m*m);p=t=>u-Math.exp(-m*v*t)*((m*v*f-l)/e*Math.sin(e*t)+f*Math.cos(e*t))}else p=e=>u-Math.exp(-v*e)*(f+(v*f-l)*e);return e=>{g.current=p(e);const n=0===e?l:t(p,e,g.current),r=Math.abs(n)<=h,a=Math.abs(u-g.current)<=d;var s,o,c;return g.done=r&&a,g.hasReachedTarget=(s=i,o=u,c=g.current,s<o&&c>=o||s>o&&c<=o),g}}));export{o as spring};
+const t=t=>t,e=t=>"string"==typeof t,n=t=>t/1e3;function r(t,e,n){const r=Math.max(e-5,0);return a=n-t(r),(s=e-r)?a*(1e3/s):0;var a,s}const a=100,s=10,o=1;const i=["","X","Y","Z"],c={x:"translateX",y:"translateY",z:"translateZ"},u={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},l={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:u,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:t},skew:u},h=new Map,f=t=>`--motion-${t}`,g=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{i.forEach((e=>{g.push(t+e),h.set(f(t+e),l[t])}))}));const d=new Set(g);function p(t){return c[t]&&(t=c[t]),e=t,d.has(e)?f(t):t;var e}function m(t){return(t=>"number"==typeof t)(t)&&!isNaN(t)}function v(t){return e(t)?parseFloat(t):t}const M=function(n){const a=new WeakMap;return(s={})=>{const o=new Map,i=(t=0,e=100,r=0,a=!1)=>{const i=`${t}-${e}-${r}-${a}`;return o.has(i)||o.set(i,n(Object.assign({from:t,to:e,velocity:r,restSpeed:a?.05:2,restDistance:a?.01:.5},s))),o.get(i)},c=(e,n)=>(a.has(e)||a.set(e,function(e,n=t){let r,a=10,s=e(0);const o=[n(s.current)];for(;!s.done&&a<1e4;)s=e(a),o.push(n(s.done?s.target:s.current)),void 0===r&&s.hasReachedTarget&&(r=a),a+=10;const i=a-10;return 1===o.length&&o.push(s.current),{keyframes:o,duration:i/1e3,overshootDuration:(null!=r?r:i)/1e3}}(e,n)),a.get(e));return{createAnimation:(n,a=!0,s,o,u)=>{let l,f,g,d=0,M=t;const x=n.length;if(a){M=function(n,r){var a;let s=(null==r?void 0:r.toDefaultUnit)||t;const o=n[n.length-1];if(e(o)){const t=(null===(a=o.match(/(-?[\d.]+)([a-z%]*)/))||void 0===a?void 0:a[2])||"";t&&(s=e=>e+t)}return s}(n,o?h.get(p(o)):void 0);if(g=v(n[x-1]),x>1&&null!==n[0])f=v(n[0]);else{const t=null==u?void 0:u.generator;if(t){const{animation:e,generatorStartTime:n}=u,a=(null==e?void 0:e.startTime)||n||0,s=(null==e?void 0:e.currentTime)||performance.now()-a,o=t(s).current;f=o,d=r((e=>t(e).current),s,o)}else s&&(f=v(s()))}}if(m(f)&&m(g)){const t=i(f,g,d,null==o?void 0:o.includes("scale"));l=Object.assign(Object.assign({},c(t,M)),{easing:"linear"}),u&&(u.generator=t,u.generatorStartTime=performance.now())}if(!l){l={easing:"ease",duration:c(i(0,100)).overshootDuration}}return l}}}}((({stiffness:t=a,damping:e=s,mass:i=o,from:c=0,to:u=1,velocity:l=0,restSpeed:h=2,restDistance:f=.5}={})=>{l=l?n(l):0;const g={done:!1,hasReachedTarget:!1,current:c,target:u},d=u-c,p=Math.sqrt(t/i)/1e3,m=((t=a,e=s,n=o)=>e/(2*Math.sqrt(t*n)))(t,e,i);let v;if(m<1){const t=p*Math.sqrt(1-m*m);v=e=>u-Math.exp(-m*p*e)*((m*p*d-l)/t*Math.sin(t*e)+d*Math.cos(t*e))}else v=t=>u-Math.exp(-p*t)*(d+(p*d-l)*t);return t=>{g.current=v(t);const e=0===t?l:r(v,t,g.current),n=Math.abs(e)<=h,a=Math.abs(u-g.current)<=f;var s,o,i;return g.done=n&&a,g.hasReachedTarget=(s=c,o=u,i=g.current,s<o&&i>=o||s>o&&i<=o),g}}));export{M as spring};

dist/size-timeline.js

@@ -1,1 +0,1 @@
-var t=function(){};function e(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}"production"!==process.env.NODE_ENV&&(t=function(t,e){if(!t)throw new Error(e)});const n=(t,e,n)=>Math.min(Math.max(n,t),e),i={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},a=t=>"number"==typeof t,s=t=>Array.isArray(t)&&!a(t[0]);function r(t,e){return s(t)?t[((t,e,n)=>{const i=e-t;return((n-t)%i+i)%i+t})(0,t.length,e)]:t}const o=(t,e,n)=>-n*t+n*e+t,l=()=>{},c=t=>t,u=(t,e,n)=>e-t==0?1:(n-t)/(e-t);function h(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const a=u(0,e,i);t.push(o(n,1,a))}}function f(t){const e=[0];return h(e,t-1),e}const d=t=>Array.isArray(t)&&a(t[0]),p=t=>"object"==typeof t&&Boolean(t.createAnimation),m=t=>"function"==typeof t,y=t=>1e3*t,g=t=>t/1e3,v=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function O(t,e,n,i){if(t===e&&n===i)return c;const a=e=>function(t,e,n,i,a){let s,r,o=0;do{r=e+(n-e)/2,s=v(r,i,a)-t,s>0?n=r:e=r}while(Math.abs(s)>1e-7&&++o<12);return r}(e,0,1,t,n);return t=>0===t||1===t?t:v(a(t),e,i)}const b={ease:O(.25,.1,.25,1),"ease-in":O(.42,0,1,1),"ease-in-out":O(.42,0,.58,1),"ease-out":O(0,0,.58,1)},w=/\((.*?)\)/;function S(t){if(m(t))return t;if(d(t))return O(...t);if(b[t])return b[t];if(t.startsWith("steps")){const e=w.exec(t);if(e){const t=e[1].split(",");return((t,e="end")=>i=>{const a=(i="end"===e?Math.min(i,.999):Math.max(i,.001))*t,s="end"===e?Math.floor(a):Math.ceil(a);return n(0,1,s/t)})(parseFloat(t[0]),t[1].trim())}}return c}class T{constructor(t,e=[0,1],{easing:a,duration:l=i.duration,delay:d=i.delay,endDelay:m=i.endDelay,repeat:y=i.repeat,offset:g,direction:v="normal"}={}){if(this.startTime=null,this.rate=1,this.t=0,this.cancelTimestamp=null,this.easing=c,this.duration=0,this.totalDuration=0,this.repeat=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e})),a=a||i.easing,p(a)){const t=a.createAnimation(e,(()=>"0"),!0);a=t.easing,void 0!==t.keyframes&&(e=t.keyframes),void 0!==t.duration&&(l=t.duration)}this.repeat=y,this.easing=s(a)?c:S(a),this.updateDuration(l);const O=function(t,e=f(t.length),i=c){const a=t.length,s=a-e.length;return s>0&&h(e,s),s=>{let l=0;for(;l<a-2&&!(s<e[l+1]);l++);let c=n(0,1,u(e[l],e[l+1],s));return c=r(i,l)(c),o(t[l],t[l+1],c)}}(e,g,s(a)?a.map(S):c);this.tick=e=>{var n;let i=0;i=void 0!==this.pauseTime?this.pauseTime:(e-this.startTime)*this.rate,this.t=i,i/=1e3,i=Math.max(i-d,0),"finished"===this.playState&&void 0===this.pauseTime&&(i=this.totalDuration);const a=i/this.duration;let s=Math.floor(a),r=a%1;!r&&a>=1&&(r=1),1===r&&s--;const o=s%2;("reverse"===v||"alternate"===v&&o||"alternate-reverse"===v&&!o)&&(r=1-r);const l=i>=this.totalDuration?1:Math.min(r,1),c=O(this.easing(l));t(c);void 0===this.pauseTime&&("finished"===this.playState||i>=this.totalDuration+m)?(this.playState="finished",null===(n=this.resolve)||void 0===n||n.call(this,c)):"idle"!==this.playState&&(this.frameRequestId=requestAnimationFrame(this.tick))},this.play()}play(){const t=performance.now();this.playState="running",void 0!==this.pauseTime?this.startTime=t-this.pauseTime:this.startTime||(this.startTime=t),this.cancelTimestamp=this.startTime,this.pauseTime=void 0,this.frameRequestId=requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=this.t}finish(){this.playState="finished",this.tick(0)}stop(){var t;this.playState="idle",void 0!==this.frameRequestId&&cancelAnimationFrame(this.frameRequestId),null===(t=this.reject)||void 0===t||t.call(this,!1)}cancel(){this.stop(),this.tick(this.cancelTimestamp)}reverse(){this.rate*=-1}commitStyles(){}updateDuration(t){this.duration=t,this.totalDuration=t*(this.repeat+1)}get currentTime(){return this.t}set currentTime(t){void 0!==this.pauseTime||0===this.rate?this.pauseTime=t:this.startTime=performance.now()-t/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}function x(t,e,n){return m(t)?t(e,n):t}class A{setAnimation(t){this.animation=t,null==t||t.finished.then((()=>this.clearAnimation())).catch((()=>{}))}clearAnimation(){this.animation=this.generator=void 0}}const D=new WeakMap;function k(t){return D.has(t)||D.set(t,{transforms:[],values:new Map}),D.get(t)}const M=["","X","Y","Z"],E={x:"translateX",y:"translateY",z:"translateZ"},j={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},P={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:j,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:c},skew:j},R=new Map,V=t=>`--motion-${t}`,$=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{M.forEach((e=>{$.push(t+e),R.set(V(t+e),P[t])}))}));const q=(t,e)=>$.indexOf(t)-$.indexOf(e),F=new Set($),I=t=>F.has(t),U=t=>t.sort(q).reduce(W,"").trim(),W=(t,e)=>`${t} ${e}(var(${V(e)}))`,_=t=>t.startsWith("--"),C=new Set;const B=(t,e)=>document.createElement("div").animate(t,e),N={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{B({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(B({opacity:[0,1]},{duration:.001}).finished),linearEasing:()=>{try{B({opacity:0},{easing:"linear(0, 1)"})}catch(t){return!1}return!0}},z={},K={};for(const t in N)K[t]=()=>(void 0===z[t]&&(z[t]=N[t]()),z[t]);const X=(t,e)=>m(t)?K.linearEasing()?`linear(${((t,e)=>{let n="";const i=Math.round(e/.015);for(let e=0;e<i;e++)n+=t(u(0,i-1,e))+", ";return n.substring(0,n.length-2)})(t,e)})`:i.easing:d(t)?Y(t):t,Y=([t,e,n,i])=>`cubic-bezier(${t}, ${e}, ${n}, ${i})`;const Z=t=>Array.isArray(t)?t:[t];function L(t){return E[t]&&(t=E[t]),I(t)?V(t):t}const G=(t,e)=>{e=L(e);let n=_(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!n&&0!==n){const t=R.get(e);t&&(n=t.initialValue)}return n},H=(t,e,n)=>{e=L(e),_(e)?t.style.setProperty(e,n):t.style[e]=n};function J(t,e=!0){if(t&&"finished"!==t.playState)try{t.stop?t.stop():(e&&t.commitStyles(),t.cancel())}catch(t){}}function Q(t,e,n,r={}){const o=window.__MOTION_DEV_TOOLS_RECORD,c=!1!==r.record&&o;let u,{duration:h=i.duration,delay:f=i.delay,endDelay:d=i.endDelay,repeat:g=i.repeat,easing:v=i.easing,direction:O,offset:b,allowWebkitAcceleration:w=!1}=r;const S=k(t),x=I(e);let D=K.waapi();x&&((t,e)=>{E[e]&&(e=E[e]);const{transforms:n}=k(t);var i,a;a=e,-1===(i=n).indexOf(a)&&i.push(a),t.style.transform=U(n)})(t,e);const M=L(e),j=function(t,e){return t.has(e)||t.set(e,new A),t.get(e)}(S.values,M),P=R.get(M);return J(j.animation,!(p(v)&&j.generator)&&!1!==r.record),()=>{const i=()=>{var e,n;return null!==(n=null!==(e=G(t,M))&&void 0!==e?e:null==P?void 0:P.initialValue)&&void 0!==n?n:0};let S=function(t,e){for(let n=0;n<t.length;n++)null===t[n]&&(t[n]=n?t[n-1]:e());return t}(Z(n),i);if(p(v)){const t=v.createAnimation(S,i,x,M,j);v=t.easing,void 0!==t.keyframes&&(S=t.keyframes),void 0!==t.duration&&(h=t.duration)}if(_(M)&&(K.cssRegisterProperty()?function(t){if(!C.has(t)){C.add(t);try{const{syntax:e,initialValue:n}=R.has(t)?R.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}(M):D=!1),x&&!K.linearEasing()&&(m(v)||s(v)&&v.some(m))&&(D=!1),D){P&&(S=S.map((t=>a(t)?P.toDefaultUnit(t):t))),1!==S.length||K.partialKeyframes()&&!c||S.unshift(i());const e={delay:y(f),duration:y(h),endDelay:y(d),easing:s(v)?void 0:X(v,h),direction:O,iterations:g+1,fill:"both"};u=t.animate({[M]:S,offset:b,easing:s(v)?v.map((t=>X(t,h))):void 0},e),u.finished||(u.finished=new Promise(((t,e)=>{u.onfinish=t,u.oncancel=e})));const n=S[S.length-1];u.finished.then((()=>{H(t,M,n),u.cancel()})).catch(l),w||(u.playbackRate=1.000001)}else if(x){S=S.map((t=>"string"==typeof t?parseFloat(t):t)),1===S.length&&S.unshift(parseFloat(i()));u=new T((e=>{P&&(e=P.toDefaultUnit(e)),H(t,M,e)}),S,Object.assign(Object.assign({},r),{duration:h,easing:v}))}else{const e=S[S.length-1];H(t,M,P&&a(e)?P.toDefaultUnit(e):e)}return c&&o(t,e,S,{duration:h,delay:f,easing:v,repeat:g,offset:b},"motion-one"),j.setAnimation(u),u}}const tt=t=>t(),et={get:(t,e)=>{const n=t.animations[0];switch(e){case"duration":return t.duration;case"currentTime":return g((null==n?void 0:n[e])||0);case"playbackRate":case"playState":return null==n?void 0:n[e];case"finished":return t.finished||(t.finished=Promise.all(t.animations.map(nt)).catch(l)),t.finished;case"stop":return()=>{t.animations.forEach((t=>J(t)))};case"forEachNative":return e=>{t.animations.forEach((n=>e(n,t)))};default:return void 0===(null==n?void 0:n[e])?void 0:()=>t.animations.forEach((t=>t[e]()))}},set:(t,e,n)=>{switch(e){case"currentTime":n=y(n);case"currentTime":case"playbackRate":for(let i=0;i<t.animations.length;i++)t.animations[i][e]=n;return!0}return!1}},nt=t=>t.finished,it=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):Object.assign({},t);function at(t,e){var n;return"string"==typeof t?e?(null!==(n=e[t])&&void 0!==n||(e[t]=document.querySelectorAll(t)),t=e[t]):t=document.querySelectorAll(t):t instanceof Element&&(t=[t]),Array.from(t||[])}function st(t,e,n,i){var s;return a(e)?e:e.startsWith("-")||e.startsWith("+")?Math.max(0,t+parseFloat(e)):"<"===e?n:null!==(s=i.get(e))&&void 0!==s?s:t}function rt(t,n,i,a,s,l){!function(t,n,i){for(let a=0;a<t.length;a++){const s=t[a];s.at>n&&s.at<i&&(e(t,s),a--)}}(t,s,l);for(let e=0;e<n.length;e++)t.push({value:n[e],at:o(s,l,a[e]),easing:r(i,e)})}function ot(t,e){return t.at===e.at?null===t.value?1:-1:t.at-e.at}function lt(t,e={}){var n;const a=ct(t,e),s=a.map((t=>Q(...t))).filter(Boolean);return((t,e,n=i.duration)=>new Proxy({animations:t.map(tt).filter(Boolean),duration:n,options:e},et))(s,e,null===(n=a[0])||void 0===n?void 0:n[3].duration)}function ct(e,n={}){var{defaultOptions:a={}}=n,s=function(t,e){var n={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(i=Object.getOwnPropertySymbols(t);a<i.length;a++)e.indexOf(i[a])<0&&Object.prototype.propertyIsEnumerable.call(t,i[a])&&(n[i[a]]=t[i[a]])}return n}(n,["defaultOptions"]);const r=[],o=new Map,l={},c=new Map;let d=0,m=0,y=0;for(let n=0;n<e.length;n++){const s=e[n];if("string"==typeof s){c.set(s,m);continue}if(!Array.isArray(s)){c.set(s.name,st(m,s.at,d,c));continue}const[r,u,g={}]=s;void 0!==g.at&&(m=st(m,g.at,d,c));let v=0;const O=at(r,l),b=O.length;for(let e=0;e<b;e++){const n=ut(O[e],o);for(const s in u){const r=ht(s,n);let o=Z(u[s]);const l=it(g,s);let{duration:c=a.duration||i.duration,easing:d=a.easing||i.easing}=l;if(p(d)){const e=I(s);t(2===o.length||!e,"spring must be provided 2 keyframes within timeline");const n=d.createAnimation(o,(()=>"0"),e);d=n.easing,void 0!==n.keyframes&&(o=n.keyframes),void 0!==n.duration&&(c=n.duration)}const O=x(g.delay,e,b)||0,w=m+O,S=w+c;let{offset:T=f(o.length)}=l;1===T.length&&0===T[0]&&(T[1]=1);const A=length-o.length;A>0&&h(T,A),1===o.length&&o.unshift(null),rt(r,o,d,T,w,S),v=Math.max(O+c,v),y=Math.max(S,y)}}d=m,m+=v}return o.forEach(((t,e)=>{for(const n in t){const o=t[n];o.sort(ot);const l=[],c=[],h=[];for(let t=0;t<o.length;t++){const{at:e,value:n,easing:a}=o[t];l.push(n),c.push(u(0,y,e)),h.push(a||i.easing)}0!==c[0]&&(c.unshift(0),l.unshift(l[0]),h.unshift("linear")),1!==c[c.length-1]&&(c.push(1),l.push(null)),r.push([e,n,l,Object.assign(Object.assign(Object.assign({},a),{duration:y,easing:h,offset:c}),s)])}})),r}function ut(t,e){return!e.has(t)&&e.set(t,{}),e.get(t)}function ht(t,e){return e[t]||(e[t]=[]),e[t]}export{ct as createAnimationsFromTimeline,lt as timeline};
+var t=function(){};function e(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}"production"!==process.env.NODE_ENV&&(t=function(t,e){if(!t)throw new Error(e)});const n=(t,e,n)=>Math.min(Math.max(n,t),e),i={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},a=t=>"number"==typeof t,s=t=>Array.isArray(t)&&!a(t[0]);function r(t,e){return s(t)?t[((t,e,n)=>{const i=e-t;return((n-t)%i+i)%i+t})(0,t.length,e)]:t}const o=(t,e,n)=>-n*t+n*e+t,l=()=>{},c=t=>t,u=(t,e,n)=>e-t==0?1:(n-t)/(e-t);function h(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const a=u(0,e,i);t.push(o(n,1,a))}}function f(t){const e=[0];return h(e,t-1),e}const d=t=>Array.isArray(t)&&a(t[0]),p=t=>"object"==typeof t&&Boolean(t.createAnimation),m=t=>"function"==typeof t,y=t=>"string"==typeof t,g=t=>1e3*t,v=t=>t/1e3,O=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function b(t,e,n,i){if(t===e&&n===i)return c;const a=e=>function(t,e,n,i,a){let s,r,o=0;do{r=e+(n-e)/2,s=O(r,i,a)-t,s>0?n=r:e=r}while(Math.abs(s)>1e-7&&++o<12);return r}(e,0,1,t,n);return t=>0===t||1===t?t:O(a(t),e,i)}const w={ease:b(.25,.1,.25,1),"ease-in":b(.42,0,1,1),"ease-in-out":b(.42,0,.58,1),"ease-out":b(0,0,.58,1)},S=/\((.*?)\)/;function T(t){if(m(t))return t;if(d(t))return b(...t);if(w[t])return w[t];if(t.startsWith("steps")){const e=S.exec(t);if(e){const t=e[1].split(",");return((t,e="end")=>i=>{const a=(i="end"===e?Math.min(i,.999):Math.max(i,.001))*t,s="end"===e?Math.floor(a):Math.ceil(a);return n(0,1,s/t)})(parseFloat(t[0]),t[1].trim())}}return c}class x{constructor(t,e=[0,1],{easing:a,duration:l=i.duration,delay:d=i.delay,endDelay:m=i.endDelay,repeat:y=i.repeat,offset:g,direction:v="normal"}={}){if(this.startTime=null,this.rate=1,this.t=0,this.cancelTimestamp=null,this.easing=c,this.duration=0,this.totalDuration=0,this.repeat=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e})),a=a||i.easing,p(a)){const t=a.createAnimation(e);a=t.easing,e=t.keyframes||e,l=t.duration||l}this.repeat=y,this.easing=s(a)?c:T(a),this.updateDuration(l);const O=function(t,e=f(t.length),i=c){const a=t.length,s=a-e.length;return s>0&&h(e,s),s=>{let l=0;for(;l<a-2&&!(s<e[l+1]);l++);let c=n(0,1,u(e[l],e[l+1],s));return c=r(i,l)(c),o(t[l],t[l+1],c)}}(e,g,s(a)?a.map(T):c);this.tick=e=>{var n;let i=0;i=void 0!==this.pauseTime?this.pauseTime:(e-this.startTime)*this.rate,this.t=i,i/=1e3,i=Math.max(i-d,0),"finished"===this.playState&&void 0===this.pauseTime&&(i=this.totalDuration);const a=i/this.duration;let s=Math.floor(a),r=a%1;!r&&a>=1&&(r=1),1===r&&s--;const o=s%2;("reverse"===v||"alternate"===v&&o||"alternate-reverse"===v&&!o)&&(r=1-r);const l=i>=this.totalDuration?1:Math.min(r,1),c=O(this.easing(l));t(c);void 0===this.pauseTime&&("finished"===this.playState||i>=this.totalDuration+m)?(this.playState="finished",null===(n=this.resolve)||void 0===n||n.call(this,c)):"idle"!==this.playState&&(this.frameRequestId=requestAnimationFrame(this.tick))},this.play()}play(){const t=performance.now();this.playState="running",void 0!==this.pauseTime?this.startTime=t-this.pauseTime:this.startTime||(this.startTime=t),this.cancelTimestamp=this.startTime,this.pauseTime=void 0,this.frameRequestId=requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=this.t}finish(){this.playState="finished",this.tick(0)}stop(){var t;this.playState="idle",void 0!==this.frameRequestId&&cancelAnimationFrame(this.frameRequestId),null===(t=this.reject)||void 0===t||t.call(this,!1)}cancel(){this.stop(),this.tick(this.cancelTimestamp)}reverse(){this.rate*=-1}commitStyles(){}updateDuration(t){this.duration=t,this.totalDuration=t*(this.repeat+1)}get currentTime(){return this.t}set currentTime(t){void 0!==this.pauseTime||0===this.rate?this.pauseTime=t:this.startTime=performance.now()-t/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}function A(t,e,n){return m(t)?t(e,n):t}class D{setAnimation(t){this.animation=t,null==t||t.finished.then((()=>this.clearAnimation())).catch((()=>{}))}clearAnimation(){this.animation=this.generator=void 0}}const M=new WeakMap;function E(t){return M.has(t)||M.set(t,{transforms:[],values:new Map}),M.get(t)}const k=["","X","Y","Z"],j={x:"translateX",y:"translateY",z:"translateZ"},P={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},R={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:P,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:c},skew:P},V=new Map,$=t=>`--motion-${t}`,q=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{k.forEach((e=>{q.push(t+e),V.set($(t+e),R[t])}))}));const F=(t,e)=>q.indexOf(t)-q.indexOf(e),I=new Set(q),U=t=>I.has(t),W=t=>t.sort(F).reduce(_,"").trim(),_=(t,e)=>`${t} ${e}(var(${$(e)}))`,C=t=>t.startsWith("--"),z=new Set;const B=(t,e)=>document.createElement("div").animate(t,e),N={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{B({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(B({opacity:[0,1]},{duration:.001}).finished),linearEasing:()=>{try{B({opacity:0},{easing:"linear(0, 1)"})}catch(t){return!1}return!0}},K={},X={};for(const t in N)X[t]=()=>(void 0===K[t]&&(K[t]=N[t]()),K[t]);const Y=(t,e)=>m(t)?X.linearEasing()?`linear(${((t,e)=>{let n="";const i=Math.round(e/.015);for(let e=0;e<i;e++)n+=t(u(0,i-1,e))+", ";return n.substring(0,n.length-2)})(t,e)})`:i.easing:d(t)?Z(t):t,Z=([t,e,n,i])=>`cubic-bezier(${t}, ${e}, ${n}, ${i})`;const L=t=>Array.isArray(t)?t:[t];function G(t){return j[t]&&(t=j[t]),U(t)?$(t):t}const H=(t,e)=>{e=G(e);let n=C(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!n&&0!==n){const t=V.get(e);t&&(n=t.initialValue)}return n},J=(t,e,n)=>{e=G(e),C(e)?t.style.setProperty(e,n):t.style[e]=n};function Q(t,e=!0){if(t&&"finished"!==t.playState)try{t.stop?t.stop():(e&&t.commitStyles(),t.cancel())}catch(t){}}function tt(t,e,n,r={}){const o=window.__MOTION_DEV_TOOLS_RECORD,u=!1!==r.record&&o;let h,{duration:f=i.duration,delay:d=i.delay,endDelay:v=i.endDelay,repeat:O=i.repeat,easing:b=i.easing,direction:w,offset:S,allowWebkitAcceleration:T=!1}=r;const A=E(t),M=U(e);let k=X.waapi();M&&((t,e)=>{j[e]&&(e=j[e]);const{transforms:n}=E(t);var i,a;a=e,-1===(i=n).indexOf(a)&&i.push(a),t.style.transform=W(n)})(t,e);const P=G(e),R=function(t,e){return t.has(e)||t.set(e,new D),t.get(e)}(A.values,P),$=V.get(P);return Q(R.animation,!(p(b)&&R.generator)&&!1!==r.record),()=>{const i=()=>{var e,n;return null!==(n=null!==(e=H(t,P))&&void 0!==e?e:null==$?void 0:$.initialValue)&&void 0!==n?n:0};let A=function(t,e){for(let n=0;n<t.length;n++)null===t[n]&&(t[n]=n?t[n-1]:e());return t}(L(n),i);const D=function(t,e){var n;let i=(null==e?void 0:e.toDefaultUnit)||c;const a=t[t.length-1];if(y(a)){const t=(null===(n=a.match(/(-?[\d.]+)([a-z%]*)/))||void 0===n?void 0:n[2])||"";t&&(i=e=>e+t)}return i}(A,$);if(p(b)){const t=b.createAnimation(A,"opacity"!==e,i,P,R);b=t.easing,A=t.keyframes||A,f=t.duration||f}if(C(P)&&(X.cssRegisterProperty()?function(t){if(!z.has(t)){z.add(t);try{const{syntax:e,initialValue:n}=V.has(t)?V.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}(P):k=!1),M&&!X.linearEasing()&&(m(b)||s(b)&&b.some(m))&&(k=!1),k){$&&(A=A.map((t=>a(t)?$.toDefaultUnit(t):t))),1!==A.length||X.partialKeyframes()&&!u||A.unshift(i());const e={delay:g(d),duration:g(f),endDelay:g(v),easing:s(b)?void 0:Y(b,f),direction:w,iterations:O+1,fill:"both"};h=t.animate({[P]:A,offset:S,easing:s(b)?b.map((t=>Y(t,f))):void 0},e),h.finished||(h.finished=new Promise(((t,e)=>{h.onfinish=t,h.oncancel=e})));const n=A[A.length-1];h.finished.then((()=>{J(t,P,n),h.cancel()})).catch(l),T||(h.playbackRate=1.000001)}else if(M)A=A.map((t=>"string"==typeof t?parseFloat(t):t)),1===A.length&&A.unshift(parseFloat(i())),h=new x((e=>{J(t,P,D?D(e):e)}),A,Object.assign(Object.assign({},r),{duration:f,easing:b}));else{const e=A[A.length-1];J(t,P,$&&a(e)?$.toDefaultUnit(e):e)}return u&&o(t,e,A,{duration:f,delay:d,easing:b,repeat:O,offset:S},"motion-one"),R.setAnimation(h),h}}const et=t=>t(),nt={get:(t,e)=>{const n=t.animations[0];switch(e){case"duration":return t.duration;case"currentTime":return v((null==n?void 0:n[e])||0);case"playbackRate":case"playState":return null==n?void 0:n[e];case"finished":return t.finished||(t.finished=Promise.all(t.animations.map(it)).catch(l)),t.finished;case"stop":return()=>{t.animations.forEach((t=>Q(t)))};case"forEachNative":return e=>{t.animations.forEach((n=>e(n,t)))};default:return void 0===(null==n?void 0:n[e])?void 0:()=>t.animations.forEach((t=>t[e]()))}},set:(t,e,n)=>{switch(e){case"currentTime":n=g(n);case"currentTime":case"playbackRate":for(let i=0;i<t.animations.length;i++)t.animations[i][e]=n;return!0}return!1}},it=t=>t.finished,at=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):Object.assign({},t);function st(t,e){var n;return"string"==typeof t?e?(null!==(n=e[t])&&void 0!==n||(e[t]=document.querySelectorAll(t)),t=e[t]):t=document.querySelectorAll(t):t instanceof Element&&(t=[t]),Array.from(t||[])}function rt(t,e,n,i){var s;return a(e)?e:e.startsWith("-")||e.startsWith("+")?Math.max(0,t+parseFloat(e)):"<"===e?n:null!==(s=i.get(e))&&void 0!==s?s:t}function ot(t,n,i,a,s,l){!function(t,n,i){for(let a=0;a<t.length;a++){const s=t[a];s.at>n&&s.at<i&&(e(t,s),a--)}}(t,s,l);for(let e=0;e<n.length;e++)t.push({value:n[e],at:o(s,l,a[e]),easing:r(i,e)})}function lt(t,e){return t.at===e.at?null===t.value?1:-1:t.at-e.at}function ct(t,e={}){var n;const a=ut(t,e),s=a.map((t=>tt(...t))).filter(Boolean);return((t,e,n=i.duration)=>new Proxy({animations:t.map(et).filter(Boolean),duration:n,options:e},nt))(s,e,null===(n=a[0])||void 0===n?void 0:n[3].duration)}function ut(e,n={}){var{defaultOptions:a={}}=n,s=function(t,e){var n={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(i=Object.getOwnPropertySymbols(t);a<i.length;a++)e.indexOf(i[a])<0&&Object.prototype.propertyIsEnumerable.call(t,i[a])&&(n[i[a]]=t[i[a]])}return n}(n,["defaultOptions"]);const r=[],o=new Map,l={},c=new Map;let d=0,m=0,g=0;for(let n=0;n<e.length;n++){const s=e[n];if(y(s)){c.set(s,m);continue}if(!Array.isArray(s)){c.set(s.name,rt(m,s.at,d,c));continue}const[r,u,v={}]=s;void 0!==v.at&&(m=rt(m,v.at,d,c));let O=0;const b=st(r,l),w=b.length;for(let e=0;e<w;e++){const n=ht(b[e],o);for(const s in u){const r=ft(s,n);let o=L(u[s]);const l=at(v,s);let{duration:c=a.duration||i.duration,easing:d=a.easing||i.easing}=l;if(p(d)){t("opacity"===s||o.length>1,"spring must be provided 2 keyframes within timeline()");const e=d.createAnimation(o,"opacity"!==s,(()=>0),s);d=e.easing,o=e.keyframes||o,c=e.duration||c}const y=A(v.delay,e,w)||0,b=m+y,S=b+c;let{offset:T=f(o.length)}=l;1===T.length&&0===T[0]&&(T[1]=1);const x=length-o.length;x>0&&h(T,x),1===o.length&&o.unshift(null),ot(r,o,d,T,b,S),O=Math.max(y+c,O),g=Math.max(S,g)}}d=m,m+=O}return o.forEach(((t,e)=>{for(const n in t){const o=t[n];o.sort(lt);const l=[],c=[],h=[];for(let t=0;t<o.length;t++){const{at:e,value:n,easing:a}=o[t];l.push(n),c.push(u(0,g,e)),h.push(a||i.easing)}0!==c[0]&&(c.unshift(0),l.unshift(l[0]),h.unshift("linear")),1!==c[c.length-1]&&(c.push(1),l.push(null)),r.push([e,n,l,Object.assign(Object.assign(Object.assign({},a),{duration:g,easing:h,offset:c}),s)])}})),r}function ht(t,e){return!e.has(t)&&e.set(t,{}),e.get(t)}function ft(t,e){return e[t]||(e[t]=[]),e[t]}export{ut as createAnimationsFromTimeline,ct as timeline};

dist/size-webpack-animate.js

@@ -1,1 +0,1 @@
-var t={d:(e,i)=>{for(var a in i)t.o(i,a)&&!t.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:i[a]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};t.d(e,{j:()=>J});class i{setAnimation(t){this.animation=t,null==t||t.finished.then((()=>this.clearAnimation())).catch((()=>{}))}clearAnimation(){this.animation=this.generator=void 0}}const a=new WeakMap;function n(t){return a.has(t)||a.set(t,{transforms:[],values:new Map}),a.get(t)}const s=()=>{},r=t=>t,o=["","X","Y","Z"],l={x:"translateX",y:"translateY",z:"translateZ"},c={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},u={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:c,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:r},skew:c},h=new Map,d=t=>`--motion-${t}`,f=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{o.forEach((e=>{f.push(t+e),h.set(d(t+e),u[t])}))}));const m=(t,e)=>f.indexOf(t)-f.indexOf(e),p=new Set(f),y=t=>p.has(t),g=(t,e)=>`${t} ${e}(var(${d(e)}))`,v=t=>t.startsWith("--"),T=new Set,w={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},b=t=>"object"==typeof t&&Boolean(t.createAnimation),S=t=>"number"==typeof t,D=t=>Array.isArray(t)&&!S(t[0]),O=(t,e,i)=>-i*t+i*e+t,A=(t,e,i)=>e-t==0?1:(i-t)/(e-t);function k(t,e){const i=t[t.length-1];for(let a=1;a<=e;a++){const n=A(0,e,a);t.push(O(i,1,n))}}const x=(t,e,i)=>Math.min(Math.max(i,t),e);const M=(t,e,i)=>(((1-3*i+3*e)*t+(3*i-6*e))*t+3*e)*t;function j(t,e,i,a){if(t===e&&i===a)return r;return n=>0===n||1===n?n:M(function(t,e,i,a,n){let s,r,o=0;do{r=e+(i-e)/2,s=M(r,a,n)-t,s>0?i=r:e=r}while(Math.abs(s)>1e-7&&++o<12);return r}(n,0,1,t,i),e,a)}const E=t=>"function"==typeof t,P=t=>Array.isArray(t)&&S(t[0]),R={ease:j(.25,.1,.25,1),"ease-in":j(.42,0,1,1),"ease-in-out":j(.42,0,.58,1),"ease-out":j(0,0,.58,1)},V=/\((.*?)\)/;function $(t){if(E(t))return t;if(P(t))return j(...t);if(R[t])return R[t];if(t.startsWith("steps")){const e=V.exec(t);if(e){const t=e[1].split(",");return((t,e="end")=>i=>{const a=(i="end"===e?Math.min(i,.999):Math.max(i,.001))*t,n="end"===e?Math.floor(a):Math.ceil(a);return x(0,1,n/t)})(parseFloat(t[0]),t[1].trim())}}return r}class q{constructor(t,e=[0,1],{easing:i,duration:a=w.duration,delay:n=w.delay,endDelay:s=w.endDelay,repeat:o=w.repeat,offset:l,direction:c="normal"}={}){if(this.startTime=null,this.rate=1,this.t=0,this.cancelTimestamp=null,this.easing=r,this.duration=0,this.totalDuration=0,this.repeat=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e})),i=i||w.easing,b(i)){const t=i.createAnimation(e,(()=>"0"),!0);i=t.easing,void 0!==t.keyframes&&(e=t.keyframes),void 0!==t.duration&&(a=t.duration)}this.repeat=o,this.easing=D(i)?r:$(i),this.updateDuration(a);const u=function(t,e=function(t){const e=[0];return k(e,t-1),e}(t.length),i=r){const a=t.length,n=a-e.length;return n>0&&k(e,n),n=>{let s=0;for(;s<a-2&&!(n<e[s+1]);s++);let r=x(0,1,A(e[s],e[s+1],n));const o=function(t,e){return D(t)?t[((t,e,i)=>{const a=e-0;return((i-0)%a+a)%a+0})(0,t.length,e)]:t}(i,s);return r=o(r),O(t[s],t[s+1],r)}}(e,l,D(i)?i.map($):r);this.tick=e=>{var i;let a=0;a=void 0!==this.pauseTime?this.pauseTime:(e-this.startTime)*this.rate,this.t=a,a/=1e3,a=Math.max(a-n,0),"finished"===this.playState&&void 0===this.pauseTime&&(a=this.totalDuration);const r=a/this.duration;let o=Math.floor(r),l=r%1;!l&&r>=1&&(l=1),1===l&&o--;const h=o%2;("reverse"===c||"alternate"===c&&h||"alternate-reverse"===c&&!h)&&(l=1-l);const d=a>=this.totalDuration?1:Math.min(l,1),f=u(this.easing(d));t(f),void 0===this.pauseTime&&("finished"===this.playState||a>=this.totalDuration+s)?(this.playState="finished",null===(i=this.resolve)||void 0===i||i.call(this,f)):"idle"!==this.playState&&(this.frameRequestId=requestAnimationFrame(this.tick))},this.play()}play(){const t=performance.now();this.playState="running",void 0!==this.pauseTime?this.startTime=t-this.pauseTime:this.startTime||(this.startTime=t),this.cancelTimestamp=this.startTime,this.pauseTime=void 0,this.frameRequestId=requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=this.t}finish(){this.playState="finished",this.tick(0)}stop(){var t;this.playState="idle",void 0!==this.frameRequestId&&cancelAnimationFrame(this.frameRequestId),null===(t=this.reject)||void 0===t||t.call(this,!1)}cancel(){this.stop(),this.tick(this.cancelTimestamp)}reverse(){this.rate*=-1}commitStyles(){}updateDuration(t){this.duration=t,this.totalDuration=t*(this.repeat+1)}get currentTime(){return this.t}set currentTime(t){void 0!==this.pauseTime||0===this.rate?this.pauseTime=t:this.startTime=performance.now()-t/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}const F=t=>1e3*t,U=(t,e)=>document.createElement("div").animate(t,e),C={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{U({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(U({opacity:[0,1]},{duration:.001}).finished),linearEasing:()=>{try{U({opacity:0},{easing:"linear(0, 1)"})}catch(t){return!1}return!0}},I={},_={};for(const t in C)_[t]=()=>(void 0===I[t]&&(I[t]=C[t]()),I[t]);const W=(t,e)=>E(t)?_.linearEasing()?`linear(${((t,e)=>{let i="";const a=Math.round(e/.015);for(let e=0;e<a;e++)i+=t(A(0,a-1,e))+", ";return i.substring(0,i.length-2)})(t,e)})`:w.easing:P(t)?z(t):t,z=([t,e,i,a])=>`cubic-bezier(${t}, ${e}, ${i}, ${a})`;function B(t){return l[t]&&(t=l[t]),y(t)?d(t):t}const K=(t,e,i)=>{e=B(e),v(e)?t.style.setProperty(e,i):t.style[e]=i};function N(t,e=!0){if(t&&"finished"!==t.playState)try{t.stop?t.stop():(e&&t.commitStyles(),t.cancel())}catch(t){}}function X(t,e,a,r={}){const o=window.__MOTION_DEV_TOOLS_RECORD,c=!1!==r.record&&o;let u,{duration:d=w.duration,delay:f=w.delay,endDelay:p=w.endDelay,repeat:O=w.repeat,easing:A=w.easing,direction:k,offset:x,allowWebkitAcceleration:M=!1}=r;const j=n(t),P=y(e);let R=_.waapi();P&&((t,e)=>{l[e]&&(e=l[e]);const{transforms:i}=n(t);var a,s;s=e,-1===(a=i).indexOf(s)&&a.push(s),t.style.transform=(t=>t.sort(m).reduce(g,"").trim())(i)})(t,e);const V=B(e),$=function(t,e){return t.has(e)||t.set(e,new i),t.get(e)}(j.values,V),U=h.get(V);return N($.animation,!(b(A)&&$.generator)&&!1!==r.record),()=>{const i=()=>{var e,i;return null!==(i=null!==(e=((t,e)=>{e=B(e);let i=v(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!i&&0!==i){const t=h.get(e);t&&(i=t.initialValue)}return i})(t,V))&&void 0!==e?e:null==U?void 0:U.initialValue)&&void 0!==i?i:0};let n=function(t,e){for(let i=0;i<t.length;i++)null===t[i]&&(t[i]=i?t[i-1]:e());return t}((t=>Array.isArray(t)?t:[t])(a),i);if(b(A)){const t=A.createAnimation(n,i,P,V,$);A=t.easing,void 0!==t.keyframes&&(n=t.keyframes),void 0!==t.duration&&(d=t.duration)}if(v(V)&&(_.cssRegisterProperty()?function(t){if(!T.has(t)){T.add(t);try{const{syntax:e,initialValue:i}=h.has(t)?h.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:i})}catch(t){}}}(V):R=!1),P&&!_.linearEasing()&&(E(A)||D(A)&&A.some(E))&&(R=!1),R){U&&(n=n.map((t=>S(t)?U.toDefaultUnit(t):t))),1!==n.length||_.partialKeyframes()&&!c||n.unshift(i());const e={delay:F(f),duration:F(d),endDelay:F(p),easing:D(A)?void 0:W(A,d),direction:k,iterations:O+1,fill:"both"};u=t.animate({[V]:n,offset:x,easing:D(A)?A.map((t=>W(t,d))):void 0},e),u.finished||(u.finished=new Promise(((t,e)=>{u.onfinish=t,u.oncancel=e})));const a=n[n.length-1];u.finished.then((()=>{K(t,V,a),u.cancel()})).catch(s),M||(u.playbackRate=1.000001)}else if(P)n=n.map((t=>"string"==typeof t?parseFloat(t):t)),1===n.length&&n.unshift(parseFloat(i())),u=new q((e=>{U&&(e=U.toDefaultUnit(e)),K(t,V,e)}),n,Object.assign(Object.assign({},r),{duration:d,easing:A}));else{const e=n[n.length-1];K(t,V,U&&S(e)?U.toDefaultUnit(e):e)}return c&&o(t,e,n,{duration:d,delay:f,easing:A,repeat:O,offset:x},"motion-one"),$.setAnimation(u),u}}const Y=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):Object.assign({},t),Z=t=>t(),L={get:(t,e)=>{const i=t.animations[0];switch(e){case"duration":return t.duration;case"currentTime":return((null==i?void 0:i[e])||0)/1e3;case"playbackRate":case"playState":return null==i?void 0:i[e];case"finished":return t.finished||(t.finished=Promise.all(t.animations.map(G)).catch(s)),t.finished;case"stop":return()=>{t.animations.forEach((t=>N(t)))};case"forEachNative":return e=>{t.animations.forEach((i=>e(i,t)))};default:return void 0===(null==i?void 0:i[e])?void 0:()=>t.animations.forEach((t=>t[e]()))}},set:(t,e,i)=>{switch(e){case"currentTime":i=F(i);case"currentTime":case"playbackRate":for(let a=0;a<t.animations.length;a++)t.animations[a][e]=i;return!0}return!1}},G=t=>t.finished;function H(t,e,i){return E(t)?t(e,i):t}function J(t,e,i={}){const a=(t=function(t,e){return"string"==typeof t?t=document.querySelectorAll(t):t instanceof Element&&(t=[t]),Array.from(t||[])}(t)).length,n=[];for(let s=0;s<a;s++){const r=t[s];for(const t in e){const o=Y(i,t);o.delay=H(o.delay,s,a);const l=X(r,t,e[t],o);n.push(l)}}return((t,e,i=w.duration)=>new Proxy({animations:t.map(Z).filter(Boolean),duration:i,options:e},L))(n,i,i.duration)}var Q=e.j;export{Q as animate};
+var t={d:(e,i)=>{for(var n in i)t.o(i,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:i[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};t.d(e,{j:()=>J});class i{setAnimation(t){this.animation=t,null==t||t.finished.then((()=>this.clearAnimation())).catch((()=>{}))}clearAnimation(){this.animation=this.generator=void 0}}const n=new WeakMap;function a(t){return n.has(t)||n.set(t,{transforms:[],values:new Map}),n.get(t)}const s=()=>{},r=t=>t,o=["","X","Y","Z"],l={x:"translateX",y:"translateY",z:"translateZ"},c={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},u={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:c,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:r},skew:c},h=new Map,d=t=>`--motion-${t}`,f=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{o.forEach((e=>{f.push(t+e),h.set(d(t+e),u[t])}))}));const m=(t,e)=>f.indexOf(t)-f.indexOf(e),p=new Set(f),y=t=>p.has(t),g=(t,e)=>`${t} ${e}(var(${d(e)}))`,v=t=>t.startsWith("--"),T=new Set,w={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},b=t=>"object"==typeof t&&Boolean(t.createAnimation),S=t=>"number"==typeof t,D=t=>Array.isArray(t)&&!S(t[0]),O=(t,e,i)=>-i*t+i*e+t,A=(t,e,i)=>e-t==0?1:(i-t)/(e-t);function x(t,e){const i=t[t.length-1];for(let n=1;n<=e;n++){const a=A(0,e,n);t.push(O(i,1,a))}}const k=(t,e,i)=>Math.min(Math.max(i,t),e);const M=(t,e,i)=>(((1-3*i+3*e)*t+(3*i-6*e))*t+3*e)*t;function j(t,e,i,n){if(t===e&&i===n)return r;return a=>0===a||1===a?a:M(function(t,e,i,n,a){let s,r,o=0;do{r=e+(i-e)/2,s=M(r,n,a)-t,s>0?i=r:e=r}while(Math.abs(s)>1e-7&&++o<12);return r}(a,0,1,t,i),e,n)}const E=t=>"function"==typeof t,P=t=>Array.isArray(t)&&S(t[0]),R={ease:j(.25,.1,.25,1),"ease-in":j(.42,0,1,1),"ease-in-out":j(.42,0,.58,1),"ease-out":j(0,0,.58,1)},V=/\((.*?)\)/;function $(t){if(E(t))return t;if(P(t))return j(...t);if(R[t])return R[t];if(t.startsWith("steps")){const e=V.exec(t);if(e){const t=e[1].split(",");return((t,e="end")=>i=>{const n=(i="end"===e?Math.min(i,.999):Math.max(i,.001))*t,a="end"===e?Math.floor(n):Math.ceil(n);return k(0,1,a/t)})(parseFloat(t[0]),t[1].trim())}}return r}class q{constructor(t,e=[0,1],{easing:i,duration:n=w.duration,delay:a=w.delay,endDelay:s=w.endDelay,repeat:o=w.repeat,offset:l,direction:c="normal"}={}){if(this.startTime=null,this.rate=1,this.t=0,this.cancelTimestamp=null,this.easing=r,this.duration=0,this.totalDuration=0,this.repeat=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e})),i=i||w.easing,b(i)){const t=i.createAnimation(e);i=t.easing,e=t.keyframes||e,n=t.duration||n}this.repeat=o,this.easing=D(i)?r:$(i),this.updateDuration(n);const u=function(t,e=function(t){const e=[0];return x(e,t-1),e}(t.length),i=r){const n=t.length,a=n-e.length;return a>0&&x(e,a),a=>{let s=0;for(;s<n-2&&!(a<e[s+1]);s++);let r=k(0,1,A(e[s],e[s+1],a));const o=function(t,e){return D(t)?t[((t,e,i)=>{const n=e-0;return((i-0)%n+n)%n+0})(0,t.length,e)]:t}(i,s);return r=o(r),O(t[s],t[s+1],r)}}(e,l,D(i)?i.map($):r);this.tick=e=>{var i;let n=0;n=void 0!==this.pauseTime?this.pauseTime:(e-this.startTime)*this.rate,this.t=n,n/=1e3,n=Math.max(n-a,0),"finished"===this.playState&&void 0===this.pauseTime&&(n=this.totalDuration);const r=n/this.duration;let o=Math.floor(r),l=r%1;!l&&r>=1&&(l=1),1===l&&o--;const h=o%2;("reverse"===c||"alternate"===c&&h||"alternate-reverse"===c&&!h)&&(l=1-l);const d=n>=this.totalDuration?1:Math.min(l,1),f=u(this.easing(d));t(f),void 0===this.pauseTime&&("finished"===this.playState||n>=this.totalDuration+s)?(this.playState="finished",null===(i=this.resolve)||void 0===i||i.call(this,f)):"idle"!==this.playState&&(this.frameRequestId=requestAnimationFrame(this.tick))},this.play()}play(){const t=performance.now();this.playState="running",void 0!==this.pauseTime?this.startTime=t-this.pauseTime:this.startTime||(this.startTime=t),this.cancelTimestamp=this.startTime,this.pauseTime=void 0,this.frameRequestId=requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=this.t}finish(){this.playState="finished",this.tick(0)}stop(){var t;this.playState="idle",void 0!==this.frameRequestId&&cancelAnimationFrame(this.frameRequestId),null===(t=this.reject)||void 0===t||t.call(this,!1)}cancel(){this.stop(),this.tick(this.cancelTimestamp)}reverse(){this.rate*=-1}commitStyles(){}updateDuration(t){this.duration=t,this.totalDuration=t*(this.repeat+1)}get currentTime(){return this.t}set currentTime(t){void 0!==this.pauseTime||0===this.rate?this.pauseTime=t:this.startTime=performance.now()-t/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}const F=t=>1e3*t,U=(t,e)=>document.createElement("div").animate(t,e),C={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{U({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(U({opacity:[0,1]},{duration:.001}).finished),linearEasing:()=>{try{U({opacity:0},{easing:"linear(0, 1)"})}catch(t){return!1}return!0}},I={},_={};for(const t in C)_[t]=()=>(void 0===I[t]&&(I[t]=C[t]()),I[t]);const z=(t,e)=>E(t)?_.linearEasing()?`linear(${((t,e)=>{let i="";const n=Math.round(e/.015);for(let e=0;e<n;e++)i+=t(A(0,n-1,e))+", ";return i.substring(0,i.length-2)})(t,e)})`:w.easing:P(t)?W(t):t,W=([t,e,i,n])=>`cubic-bezier(${t}, ${e}, ${i}, ${n})`;function B(t){return l[t]&&(t=l[t]),y(t)?d(t):t}const K=(t,e,i)=>{e=B(e),v(e)?t.style.setProperty(e,i):t.style[e]=i};function N(t,e=!0){if(t&&"finished"!==t.playState)try{t.stop?t.stop():(e&&t.commitStyles(),t.cancel())}catch(t){}}function X(t,e,n,o={}){const c=window.__MOTION_DEV_TOOLS_RECORD,u=!1!==o.record&&c;let d,{duration:f=w.duration,delay:p=w.delay,endDelay:O=w.endDelay,repeat:A=w.repeat,easing:x=w.easing,direction:k,offset:M,allowWebkitAcceleration:j=!1}=o;const P=a(t),R=y(e);let V=_.waapi();R&&((t,e)=>{l[e]&&(e=l[e]);const{transforms:i}=a(t);var n,s;s=e,-1===(n=i).indexOf(s)&&n.push(s),t.style.transform=(t=>t.sort(m).reduce(g,"").trim())(i)})(t,e);const $=B(e),U=function(t,e){return t.has(e)||t.set(e,new i),t.get(e)}(P.values,$),C=h.get($);return N(U.animation,!(b(x)&&U.generator)&&!1!==o.record),()=>{const i=()=>{var e,i;return null!==(i=null!==(e=((t,e)=>{e=B(e);let i=v(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!i&&0!==i){const t=h.get(e);t&&(i=t.initialValue)}return i})(t,$))&&void 0!==e?e:null==C?void 0:C.initialValue)&&void 0!==i?i:0};let a=function(t,e){for(let i=0;i<t.length;i++)null===t[i]&&(t[i]=i?t[i-1]:e());return t}((t=>Array.isArray(t)?t:[t])(n),i);const l=function(t,e){var i;let n=(null==e?void 0:e.toDefaultUnit)||r;const a=t[t.length-1];if("string"==typeof a){const t=(null===(i=a.match(/(-?[\d.]+)([a-z%]*)/))||void 0===i?void 0:i[2])||"";t&&(n=e=>e+t)}return n}(a,C);if(b(x)){const t=x.createAnimation(a,"opacity"!==e,i,$,U);x=t.easing,a=t.keyframes||a,f=t.duration||f}if(v($)&&(_.cssRegisterProperty()?function(t){if(!T.has(t)){T.add(t);try{const{syntax:e,initialValue:i}=h.has(t)?h.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:i})}catch(t){}}}($):V=!1),R&&!_.linearEasing()&&(E(x)||D(x)&&x.some(E))&&(V=!1),V){C&&(a=a.map((t=>S(t)?C.toDefaultUnit(t):t))),1!==a.length||_.partialKeyframes()&&!u||a.unshift(i());const e={delay:F(p),duration:F(f),endDelay:F(O),easing:D(x)?void 0:z(x,f),direction:k,iterations:A+1,fill:"both"};d=t.animate({[$]:a,offset:M,easing:D(x)?x.map((t=>z(t,f))):void 0},e),d.finished||(d.finished=new Promise(((t,e)=>{d.onfinish=t,d.oncancel=e})));const n=a[a.length-1];d.finished.then((()=>{K(t,$,n),d.cancel()})).catch(s),j||(d.playbackRate=1.000001)}else if(R)a=a.map((t=>"string"==typeof t?parseFloat(t):t)),1===a.length&&a.unshift(parseFloat(i())),d=new q((e=>{K(t,$,l?l(e):e)}),a,Object.assign(Object.assign({},o),{duration:f,easing:x}));else{const e=a[a.length-1];K(t,$,C&&S(e)?C.toDefaultUnit(e):e)}return u&&c(t,e,a,{duration:f,delay:p,easing:x,repeat:A,offset:M},"motion-one"),U.setAnimation(d),d}}const Y=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):Object.assign({},t),Z=t=>t(),L={get:(t,e)=>{const i=t.animations[0];switch(e){case"duration":return t.duration;case"currentTime":return((null==i?void 0:i[e])||0)/1e3;case"playbackRate":case"playState":return null==i?void 0:i[e];case"finished":return t.finished||(t.finished=Promise.all(t.animations.map(G)).catch(s)),t.finished;case"stop":return()=>{t.animations.forEach((t=>N(t)))};case"forEachNative":return e=>{t.animations.forEach((i=>e(i,t)))};default:return void 0===(null==i?void 0:i[e])?void 0:()=>t.animations.forEach((t=>t[e]()))}},set:(t,e,i)=>{switch(e){case"currentTime":i=F(i);case"currentTime":case"playbackRate":for(let n=0;n<t.animations.length;n++)t.animations[n][e]=i;return!0}return!1}},G=t=>t.finished;function H(t,e,i){return E(t)?t(e,i):t}function J(t,e,i={}){const n=(t=function(t,e){return"string"==typeof t?t=document.querySelectorAll(t):t instanceof Element&&(t=[t]),Array.from(t||[])}(t)).length,a=[];for(let s=0;s<n;s++){const r=t[s];for(const t in e){const o=Y(i,t);o.delay=H(o.delay,s,n);const l=X(r,t,e[t],o);a.push(l)}}return((t,e,i=w.duration)=>new Proxy({animations:t.map(Z).filter(Boolean),duration:i,options:e},L))(a,i,i.duration)}var Q=e.j;export{Q as animate};

dist/timeline/index.cjs.js

@@ -14,3 +14,2 @@ 'use strict';
 var resolveElements = require('../utils/resolve-elements.cjs.js');
-var transforms = require('../animate/utils/transforms.cjs.js');
 var calcTime = require('./utils/calc-time.cjs.js');
@@ -88,13 +87,7 @@ var edit = require('./utils/edit.cjs.js');
                 if (utils.isEasingGenerator(easing)) {
-                    const valueIsTransform = transforms.isTransform(key);
-                    heyListen.invariant(valueKeyframes.length === 2 || !valueIsTransform, "spring must be provided 2 keyframes within timeline");
-                    const custom = easing.createAnimation(valueKeyframes, 
-                    // TODO We currently only support explicit keyframes
-                    // so this doesn't currently read from the DOM
-                    () => "0", valueIsTransform);
+                    heyListen.invariant(key === "opacity" || valueKeyframes.length > 1, "spring must be provided 2 keyframes within timeline()");
+                    const custom = easing.createAnimation(valueKeyframes, key !== "opacity", () => 0, key);
                     easing = custom.easing;
-                    if (custom.keyframes !== undefined)
-                        valueKeyframes = custom.keyframes;
-                    if (custom.duration !== undefined)
-                        duration = custom.duration;
+                    valueKeyframes = custom.keyframes || valueKeyframes;
+                    duration = custom.duration || duration;
                 }
@@ -101,0 +94,0 @@ const delay = stagger.resolveOption(options$1.delay, elementIndex, numElements) || 0;

dist/timeline/index.es.js

@@ -10,3 +10,2 @@ import { __rest } from 'tslib';
 import { resolveElements } from '../utils/resolve-elements.es.js';
-import { isTransform } from '../animate/utils/transforms.es.js';
 import { calcNextTime } from './utils/calc-time.es.js';
@@ -84,13 +83,7 @@ import { addKeyframes } from './utils/edit.es.js';
                 if (isEasingGenerator(easing)) {
-                    const valueIsTransform = isTransform(key);
-                    invariant(valueKeyframes.length === 2 || !valueIsTransform, "spring must be provided 2 keyframes within timeline");
-                    const custom = easing.createAnimation(valueKeyframes, 
-                    // TODO We currently only support explicit keyframes
-                    // so this doesn't currently read from the DOM
-                    () => "0", valueIsTransform);
+                    invariant(key === "opacity" || valueKeyframes.length > 1, "spring must be provided 2 keyframes within timeline()");
+                    const custom = easing.createAnimation(valueKeyframes, key !== "opacity", () => 0, key);
                     easing = custom.easing;
-                    if (custom.keyframes !== undefined)
-                        valueKeyframes = custom.keyframes;
-                    if (custom.duration !== undefined)
-                        duration = custom.duration;
+                    valueKeyframes = custom.keyframes || valueKeyframes;
+                    duration = custom.duration || duration;
                 }
@@ -97,0 +90,0 @@ const delay = resolveOption(options.delay, elementIndex, numElements) || 0;

lib/animate/animate-style.js

@@ -13,2 +13,3 @@ import { getAnimationData, getMotionValue } from "./data";
 import { stopAnimation } from "./utils/stop-animation";
+import { getUnitConverter } from "./utils/get-unit";
 function getDevToolsRecord() {
@@ -55,9 +56,11 @@ return window.__MOTION_DEV_TOOLS_RECORD;
         let keyframes = hydrateKeyframes(keyframesList(keyframesDefinition), readInitialValue);
+        /**
+         * Detect unit type of keyframes.
+         */
+        const toUnit = getUnitConverter(keyframes, definition);
         if (isEasingGenerator(easing)) {
-            const custom = easing.createAnimation(keyframes, readInitialValue, valueIsTransform, name, motionValue);
+            const custom = easing.createAnimation(keyframes, key !== "opacity", readInitialValue, name, motionValue);
             easing = custom.easing;
-            if (custom.keyframes !== undefined)
-                keyframes = custom.keyframes;
-            if (custom.duration !== undefined)
-                duration = custom.duration;
+            keyframes = custom.keyframes || keyframes;
+            duration = custom.duration || duration;
         }
@@ -172,8 +175,5 @@ /**
             }
-            const render = (latest) => {
-                if (definition)
-                    latest = definition.toDefaultUnit(latest);
-                style.set(element, name, latest);
-            };
-            animation = new Animation(render, keyframes, Object.assign(Object.assign({}, options), { duration,
+            animation = new Animation((latest) => {
+                style.set(element, name, toUnit ? toUnit(latest) : latest);
+            }, keyframes, Object.assign(Object.assign({}, options), { duration,
                 easing }));
@@ -180,0 +180,0 @@ }

lib/easing/create-generator-easing.js

@@ -1,2 +0,13 @@
-import { pregenerateKeyframes, calcGeneratorVelocity, } from "@motionone/generators";
+import { pregenerateKeyframes } from "@motionone/generators";
+import { isNumber, isString, noopReturn } from "@motionone/utils";
+import { getUnitConverter } from "../animate/utils/get-unit";
+import { calcGeneratorVelocity } from "@motionone/generators";
+import { transformDefinitions } from "../animate/utils/transforms";
+import { getStyleName } from "../animate/utils/get-style-name";
+function canGenerate(value) {
+    return isNumber(value) && !isNaN(value);
+}
+function getAsNumber(value) {
+    return isString(value) ? parseFloat(value) : value;
+}
 export function createGeneratorEasing(createGenerator) {
@@ -15,5 +26,5 @@ const keyframesCache = new WeakMap();
         };
-        const getKeyframes = (generator) => {
+        const getKeyframes = (generator, toUnit) => {
             if (!keyframesCache.has(generator)) {
-                keyframesCache.set(generator, pregenerateKeyframes(generator));
+                keyframesCache.set(generator, pregenerateKeyframes(generator, toUnit));
             }
@@ -23,36 +34,56 @@ return keyframesCache.get(generator);
         return {
-            createAnimation: (keyframes, getOrigin, canUseGenerator, name, motionValue) => {
-                var _a, _b;
+            createAnimation: (keyframes, shouldGenerate = true, getOrigin, name, motionValue) => {
                 let settings;
+                let origin;
+                let target;
+                let velocity = 0;
+                let toUnit = noopReturn;
                 const numKeyframes = keyframes.length;
-                let shouldUseGenerator = canUseGenerator &&
-                    numKeyframes <= 2 &&
-                    keyframes.every(isNumberOrNull);
-                if (shouldUseGenerator) {
-                    const target = keyframes[numKeyframes - 1];
-                    const unresolvedOrigin = numKeyframes === 1 ? null : keyframes[0];
-                    let velocity = 0;
-                    let origin = 0;
-                    const prevGenerator = motionValue === null || motionValue === void 0 ? void 0 : motionValue.generator;
-                    if (prevGenerator) {
+                /**
+                 * If we should generate an animation for this value, run some preperation
+                 * like resolving target/origin, finding a unit (if any) and determine if
+                 * it is actually possible to generate.
+                 */
+                if (shouldGenerate) {
+                    toUnit = getUnitConverter(keyframes, name ? transformDefinitions.get(getStyleName(name)) : undefined);
+                    const targetDefinition = keyframes[numKeyframes - 1];
+                    target = getAsNumber(targetDefinition);
+                    if (numKeyframes > 1 && keyframes[0] !== null) {
                         /**
-                         * If we have a generator for this value we can use it to resolve
-                         * the animations's current value and velocity.
+                         * If we have multiple keyframes, take the initial keyframe as the origin.
                          */
-                        const { animation, generatorStartTime } = motionValue;
-                        const startTime = (animation === null || animation === void 0 ? void 0 : animation.startTime) || generatorStartTime || 0;
-                        const currentTime = (animation === null || animation === void 0 ? void 0 : animation.currentTime) || performance.now() - startTime;
-                        const prevGeneratorCurrent = prevGenerator(currentTime).current;
-                        origin = (_a = unresolvedOrigin) !== null && _a !== void 0 ? _a : prevGeneratorCurrent;
-                        if (numKeyframes === 1 ||
-                            (numKeyframes === 2 && keyframes[0] === null)) {
+                        origin = getAsNumber(keyframes[0]);
+                    }
+                    else {
+                        const prevGenerator = motionValue === null || motionValue === void 0 ? void 0 : motionValue.generator;
+                        /**
+                         * If we have an existing generator for this value we can use it to resolve
+                         * the animation's current value and velocity.
+                         */
+                        if (prevGenerator) {
+                            /**
+                             * If we have a generator for this value we can use it to resolve
+                             * the animations's current value and velocity.
+                             */
+                            const { animation, generatorStartTime } = motionValue;
+                            const startTime = (animation === null || animation === void 0 ? void 0 : animation.startTime) || generatorStartTime || 0;
+                            const currentTime = (animation === null || animation === void 0 ? void 0 : animation.currentTime) || performance.now() - startTime;
+                            const prevGeneratorCurrent = prevGenerator(currentTime).current;
+                            origin = prevGeneratorCurrent;
                             velocity = calcGeneratorVelocity((t) => prevGenerator(t).current, currentTime, prevGeneratorCurrent);
                         }
+                        else if (getOrigin) {
+                            /**
+                             * As a last resort, read the origin from the DOM.
+                             */
+                            origin = getAsNumber(getOrigin());
+                        }
                     }
-                    else {
-                        origin = (_b = unresolvedOrigin) !== null && _b !== void 0 ? _b : parseFloat(getOrigin());
-                    }
+                }
+                /**
+                 * If we've determined it is possible to generate an animation, do so.
+                 */
+                if (canGenerate(origin) && canGenerate(target)) {
                     const generator = getGenerator(origin, target, velocity, name === null || name === void 0 ? void 0 : name.includes("scale"));
-                    const keyframesMetadata = getKeyframes(generator);
-                    settings = Object.assign(Object.assign({}, keyframesMetadata), { easing: "linear" });
+                    settings = Object.assign(Object.assign({}, getKeyframes(generator, toUnit)), { easing: "linear" });
                     // TODO Add test for this
@@ -64,3 +95,9 @@ if (motionValue) {
                 }
-                else {
+                /**
+                 * If by now we haven't generated a set of keyframes, create a generic generator
+                 * based on the provided props that animates from 0-100 to fetch a rough
+                 * "overshootDuration" - the moment when the generator first hits the animation target.
+                 * Then return animation settings that will run a normal animation for that duration.
+                 */
+                if (!settings) {
                     const keyframesMetadata = getKeyframes(getGenerator(0, 100));
@@ -77,3 +114,2 @@ settings = {
 }
-const isNumberOrNull = (value) => typeof value !== "string";
 //# sourceMappingURL=create-generator-easing.js.map

lib/timeline/index.js

@@ -10,3 +10,2 @@ import { __rest } from "tslib";
 import { resolveElements } from "../utils/resolve-elements";
-import { isTransform } from "../animate/utils/transforms";
 import { calcNextTime } from "./utils/calc-time";
@@ -83,13 +82,7 @@ import { addKeyframes } from "./utils/edit";
                 if (isEasingGenerator(easing)) {
-                    const valueIsTransform = isTransform(key);
-                    invariant(valueKeyframes.length === 2 || !valueIsTransform, "spring must be provided 2 keyframes within timeline");
-                    const custom = easing.createAnimation(valueKeyframes, 
-                    // TODO We currently only support explicit keyframes
-                    // so this doesn't currently read from the DOM
-                    () => "0", valueIsTransform);
+                    invariant(key === "opacity" || valueKeyframes.length > 1, "spring must be provided 2 keyframes within timeline()");
+                    const custom = easing.createAnimation(valueKeyframes, key !== "opacity", () => 0, key);
                     easing = custom.easing;
-                    if (custom.keyframes !== undefined)
-                        valueKeyframes = custom.keyframes;
-                    if (custom.duration !== undefined)
-                        duration = custom.duration;
+                    valueKeyframes = custom.keyframes || valueKeyframes;
+                    duration = custom.duration || duration;
                 }
@@ -96,0 +89,0 @@ const delay = resolveOption(options.delay, elementIndex, numElements) || 0;

package.json

 {
   "name": "@motionone/dom",
-  "version": "10.13.2",
+  "version": "10.14.0",
   "description": "A tiny, performant animation library for the DOM",
@@ -18,6 +18,6 @@ "license": "MIT",
   "dependencies": {
-    "@motionone/animation": "^10.13.2",
-    "@motionone/generators": "^10.13.2",
-    "@motionone/types": "^10.13.2",
-    "@motionone/utils": "^10.13.2",
+    "@motionone/animation": "^10.14.0",
+    "@motionone/generators": "^10.14.0",
+    "@motionone/types": "^10.14.0",
+    "@motionone/utils": "^10.14.0",
     "hey-listen": "^1.0.8",
@@ -29,19 +29,19 @@ "tslib": "^2.3.1"
       "path": "./dist/size-animate.js",
-      "maxSize": "3.8 kB"
+      "maxSize": "3.9 kB"
     },
     {
       "path": "./dist/size-animate-style.js",
-      "maxSize": "3.35 kB"
+      "maxSize": "3.4 kB"
     },
     {
       "path": "./dist/size-timeline.js",
-      "maxSize": "4.7 kB"
+      "maxSize": "4.8 kB"
     },
     {
       "path": "./dist/size-spring.js",
-      "maxSize": "1.1 kB"
+      "maxSize": "1.5 kB"
     },
     {
       "path": "./dist/size-webpack-animate.js",
-      "maxSize": "3.8 kB"
+      "maxSize": "3.9 kB"
     },
@@ -61,3 +61,3 @@ {
   ],
-  "gitHead": "a33ab88400c8aac4a6755cda6f93c24563d9ddc5"
+  "gitHead": "4c59ce9e5539899722427bd00f857dc80f29fc09"
 }

types/animate/types.d.ts

@@ -6,13 +6,13 @@ import type { AnimationOptions, BasicAnimationControls, UnresolvedValueKeyframe, OptionResolver } from "@motionone/types";
 export interface CSSStyleDeclarationWithTransform extends Omit<CSSStyleDeclaration, "direction" | "transition"> {
-    x: number;
-    y: number;
-    z: number;
-    rotateX: number;
-    rotateY: number;
-    rotateZ: number;
+    x: number | string;
+    y: number | string;
+    z: number | string;
+    rotateX: number | string;
+    rotateY: number | string;
+    rotateZ: number | string;
     scaleX: number;
     scaleY: number;
     scaleZ: number;
-    skewX: number;
-    skewY: number;
+    skewX: number | string;
+    skewY: number | string;
 }
@@ -19,0 +19,0 @@ export declare type StyleAnimationOptions = {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

385151

increased by2.45%

Number of package files

322

increased by1.9%

Lines of code

6231

increased by2.15%

Dependency changes

• Updated@motionone/animation@^10.14.0

• Updated@motionone/generators@^10.14.0

• Updated@motionone/types@^10.14.0

• Updated@motionone/utils@^10.14.0