motion - npm Package Compare versions
Comparing version 6.0.1-alpha.34 to 6.0.1-alpha.35
@@ -1,1 +0,1 @@ | ||
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Motion={})}(this,(function(t){"use strict";function e(t){t.commitStyles();try{t.cancel()}catch(t){}}const n=new WeakMap;function i(t){return n.has(t)||n.set(t,{activeTransforms:[],activeAnimations:{}}),n.get(t)}const a=()=>{},r=t=>t,s=["","X","Y","Z"],o={x:"translateX",y:"translateY",z:"translateZ"},c={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},l={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:c,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:r},skew:c},u=new Map,h=t=>`--motion-${t}`,f=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{s.forEach((e=>{f.push(t+e),u.set(h(t+e),l[t])}))}));const m=(t,e)=>f.indexOf(t)-f.indexOf(e),y=new Set(f),p=t=>t.sort(m).reduce(d,"").trim(),d=(t,e)=>`${t} ${e}(var(${h(e)}))`,g=t=>t.startsWith("--"),v=new Set;const b=t=>1e3*t,T=t=>Array.isArray(t)&&"number"!=typeof t[0],S=t=>(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?w(t):t,w=([t,e,n,i])=>`cubic-bezier(${t}, ${e}, ${n}, ${i})`,x=t=>document.createElement("div").animate(t,{duration:.001}),O={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{x({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(x({opacity:[0,1]}).finished)},A={},P=Object.keys(O).reduce(((t,e)=>(t[e]=()=>(void 0===A[e]&&(A[e]=O[e]()),A[e]),t)),{}),M=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function j(t,e,n,i){if(t===e&&n===i)return r;const a=e=>function(t,e,n,i,a){let r,s,o=0;do{s=e+(n-e)/2,r=M(s,i,a)-t,r>0?n=s:e=s}while(Math.abs(r)>1e-7&&++o<12);return s}(e,0,1,t,n);return t=>0===t||1===t?t:M(a(t),e,i)}var k=function(t,e,n){var i=e-t;return 0===i?1:(n-t)/i},D=function(t,e,n){return-n*t+n*e+t},E=function(t,e){return void 0===e&&(e="end"),function(n){var i,a,r,s=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,o="end"===e?Math.floor(s):Math.ceil(s);return i=0,a=1,r=o/t,Math.min(Math.max(r,i),a)}};const $={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 R(t){if("function"==typeof t)return t;if(Array.isArray(t))return j(...t);if($[t])return $[t];if(t.startsWith("steps")){const e=V.exec(t);if(e){const t=e[1].split(",");return E(parseFloat(t[0]),t[1].trim())}}return r}function U(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const a=k(0,e,i);t.push(D(n,1,a))}}function C(t,e=function(t){const e=[0];return U(e,t-1),e}(t.length),n=r){const i=t.length,a=i-e.length;return a>0&&U(e,a),a=>{let r=0;for(;r<i-2&&!(a<e[r+1]);r++);let s=(o=k(e[r],e[r+1],a),Math.min(1,Math.max(o,0)));var o,c,l,u;if(Array.isArray(n)){const t=(c=0,l=n.length-1,((r-c)%(u=l-c)+u)%u+c);s=n[t](s)}else s=n(s);return D(t[r],t[r+1],s)}}class F{constructor(t,e,{easing:n="ease",duration:i=.3,delay:a=0,endDelay:r=0,offset:s,repeat:o=0,direction:c="normal"}){this.startTime=0,this.rate=1,this.t=0,this.cancelT=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e}));const l=i*(o+1),u=C(e,s,T(n)?n.map(R):R(n));this.tick=e=>{if("finished"===this.playState){const e=u(1);return t(e),void this.resolve(e)}let n=this.pauseTime?this.pauseTime:(e-this.startTime)*this.rate;this.t=n,n/=1e3,n=Math.max(n-a,0);const s=n/i;let o=Math.floor(s),h=s%1;!h&&s>=1&&(h=1),1===h&&o--;const f=o%2;("reverse"===c||"alternate"===c&&f||"alternate-reverse"===c&&!f)&&(h=1-h);const m=n>=l?1:Math.min(h,1),y=u(m);t(y);n>=l+r?(this.playState="finished",this.resolve(y)):"idle"!==this.playState&&requestAnimationFrame(this.tick)},this.play()}play(){const t=performance.now();this.playState="running",this.pauseTime?this.startTime=t-(this.pauseTime-this.startTime):this.startTime||(this.startTime=t),this.pauseTime=void 0,requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=performance.now()}finish(){this.playState="finished",this.tick(0)}cancel(){this.playState="idle",this.tick(this.cancelT),this.reject(!1)}reverse(){this.rate*=-1}commitStyles(){this.cancelT=this.t}get currentTime(){return this.currentTime}set currentTime(t){this.pauseTime||0===this.rate?this.pauseTime=b(t):this.startTime=performance.now()-b(t)/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}function q(t,n,r,s={}){let{duration:c=.3,delay:l=0,endDelay:f=0,repeat:m=0,easing:d="ease",direction:w,offset:x}=s;const O=i(t);let A=P.waapi(),M=a;const j=(t=>y.has(t))(n);r=Array.isArray(r)?r:[r],j&&(o[n]&&(n=o[n]),((t,e)=>{const{activeTransforms:n}=i(t);var a,r;r=e,-1===(a=n).indexOf(r)&&a.push(r),t.style.transform=p(n)})(t,n),n=h(n)),function(t,n){t.activeAnimations[n]&&(e(t.activeAnimations[n]),t.activeAnimations[n]=void 0)}(O,n);const k=u.get(n);if(g(n)?(M=((t,e)=>n=>t.style.setProperty(e,n))(t,n),P.cssRegisterProperty()?function(t){if(!v.has(t)){v.add(t);try{const{syntax:e,initialValue:n}=u.has(t)?u.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}(n):A=!1):M=((t,e)=>n=>t.style[e]=n)(t,n),A){if(k&&(r=r.map((t=>"number"==typeof t?k.toDefaultUnit(t):t))),!P.partialKeyframes()&&1===r.length){const e=g(n)?t.style.getPropertyValue(n):getComputedStyle(t)[n];r.unshift(e)}const e={delay:b(l),duration:b(c),endDelay:b(f),easing:T(d)?void 0:S(d),direction:w,iterations:m+1},i=t.animate({[n]:r,offset:x,easing:T(d)?d.map(S):void 0},e);O.activeAnimations[n]=i,i.finished||(i.finished=new Promise(((t,e)=>{i.onfinish=t,i.oncancel=e})));const s=r[r.length-1];return i.finished.then((()=>M(s))).catch(a),i}if(j&&r.every(z)){if(1===r.length&&r.unshift(parseFloat(getComputedStyle(t).getPropertyValue(n)||"0")),k){const t=M;M=e=>t(k.toDefaultUnit(e))}return function(t,e=[0,1],n={}){return new F(t,e,n)}(M,r,s)}{const t=r[r.length-1];M(k&&"number"==typeof t?k.toDefaultUnit(t):t)}}const z=t=>"number"==typeof t,W=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):t;const K={get:(t,n)=>{var i,a;switch(n){case"finished":return t.finished;case"currentTime":const r=(null===(i=t.animations[0])||void 0===i?void 0:i[n])||0;return r?r/1e3:0;case"playbackRate":return null===(a=t.animations[0])||void 0===a?void 0:a[n];case"stop":return()=>t.animations.forEach(e);default:return()=>t.animations.forEach((t=>t[n]()))}},set:(t,e,n)=>{switch(e){case"currentTime":n*=1e3;case"currentTime":case"playbackRate":for(let i=0;i<t.animations.length;i++)t.animations[i][e]=n;return!0}return!1}};t.animate=function(t,e,n){var{stagger:i=0}=n,a=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,["stagger"]);t=function(t){"string"==typeof t?t=document.querySelectorAll(t):t instanceof Element&&(t=[t]);return Array.from(t)}(t);const r=[];for(let n=0;n<t.length;n++){const s=t[n];for(const t in e){const o=W(a,t);i&&(o.delay||(o.delay=0),o.delay+=i*n);const c=q(s,t,e[t],o);c&&r.push(c)}}const s={animations:r,finished:Promise.all(r.map((t=>t.finished)))};return new Proxy(s,K)},t.animateStyle=q,Object.defineProperty(t,"__esModule",{value:!0})})); | ||
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Motion={})}(this,(function(t){"use strict";function e(t){try{t.commitStyles(),t.cancel()}catch(t){}}const n=new WeakMap;function i(t){return n.has(t)||n.set(t,{activeTransforms:[],activeAnimations:{}}),n.get(t)}const a=()=>{},r=t=>t,s=["","X","Y","Z"],o={x:"translateX",y:"translateY",z:"translateZ"},c={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},l={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:c,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:r},skew:c},u=new Map,h=t=>`--motion-${t}`,f=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{s.forEach((e=>{f.push(t+e),u.set(h(t+e),l[t])}))}));const y=(t,e)=>f.indexOf(t)-f.indexOf(e),m=new Set(f),p=t=>t.sort(y).reduce(d,"").trim(),d=(t,e)=>`${t} ${e}(var(${h(e)}))`,g=t=>t.startsWith("--"),v=new Set;const b=t=>1e3*t,T=t=>Array.isArray(t)&&"number"!=typeof t[0],S=t=>(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?w(t):t,w=([t,e,n,i])=>`cubic-bezier(${t}, ${e}, ${n}, ${i})`,x=t=>document.createElement("div").animate(t,{duration:.001}),O={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{x({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(x({opacity:[0,1]}).finished)},A={},P=Object.keys(O).reduce(((t,e)=>(t[e]=()=>(void 0===A[e]&&(A[e]=O[e]()),A[e]),t)),{}),M=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function j(t,e,n,i){if(t===e&&n===i)return r;const a=e=>function(t,e,n,i,a){let r,s,o=0;do{s=e+(n-e)/2,r=M(s,i,a)-t,r>0?n=s:e=s}while(Math.abs(r)>1e-7&&++o<12);return s}(e,0,1,t,n);return t=>0===t||1===t?t:M(a(t),e,i)}var k=function(t,e,n){var i=e-t;return 0===i?1:(n-t)/i},D=function(t,e,n){return-n*t+n*e+t},E=function(t,e){return void 0===e&&(e="end"),function(n){var i,a,r,s=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,o="end"===e?Math.floor(s):Math.ceil(s);return i=0,a=1,r=o/t,Math.min(Math.max(r,i),a)}};const V={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)},$=/\((.*?)\)/;function R(t){if("function"==typeof t)return t;if(Array.isArray(t))return j(...t);if(V[t])return V[t];if(t.startsWith("steps")){const e=$.exec(t);if(e){const t=e[1].split(",");return E(parseFloat(t[0]),t[1].trim())}}return r}function U(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const a=k(0,e,i);t.push(D(n,1,a))}}function C(t,e=function(t){const e=[0];return U(e,t-1),e}(t.length),n=r){const i=t.length,a=i-e.length;return a>0&&U(e,a),a=>{let r=0;for(;r<i-2&&!(a<e[r+1]);r++);let s=(o=k(e[r],e[r+1],a),Math.min(1,Math.max(o,0)));var o,c,l,u;if(Array.isArray(n)){const t=(c=0,l=n.length-1,((r-c)%(u=l-c)+u)%u+c);s=n[t](s)}else s=n(s);return D(t[r],t[r+1],s)}}class F{constructor(t,e,{easing:n="ease",duration:i=.3,delay:a=0,endDelay:r=0,offset:s,repeat:o=0,direction:c="normal"}){this.startTime=0,this.rate=1,this.t=0,this.cancelT=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e}));const l=i*(o+1),u=C(e,s,T(n)?n.map(R):R(n));this.tick=e=>{if("finished"===this.playState){const e=u(1);return t(e),void this.resolve(e)}let n=this.pauseTime?this.pauseTime:(e-this.startTime)*this.rate;this.t=n,n/=1e3,n=Math.max(n-a,0);const s=n/i;let o=Math.floor(s),h=s%1;!h&&s>=1&&(h=1),1===h&&o--;const f=o%2;("reverse"===c||"alternate"===c&&f||"alternate-reverse"===c&&!f)&&(h=1-h);const y=n>=l?1:Math.min(h,1),m=u(y);t(m);n>=l+r?(this.playState="finished",this.resolve(m)):"idle"!==this.playState&&requestAnimationFrame(this.tick)},this.play()}play(){const t=performance.now();this.playState="running",this.pauseTime?this.startTime=t-(this.pauseTime-this.startTime):this.startTime||(this.startTime=t),this.pauseTime=void 0,requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=performance.now()}finish(){this.playState="finished",this.tick(0)}cancel(){this.playState="idle",this.tick(this.cancelT),this.reject(!1)}reverse(){this.rate*=-1}commitStyles(){this.cancelT=this.t}get currentTime(){return this.currentTime}set currentTime(t){this.pauseTime||0===this.rate?this.pauseTime=b(t):this.startTime=performance.now()-b(t)/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}const q=(t,e)=>g(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];function z(t,n,r,s={}){let{duration:c=.3,delay:l=0,endDelay:f=0,repeat:y=0,easing:d="ease",direction:w,offset:x}=s;const O=i(t);let A=P.waapi(),M=a;const j=(t=>m.has(t))(n);r=Array.isArray(r)?r:[r],j&&(o[n]&&(n=o[n]),((t,e)=>{const{activeTransforms:n}=i(t);var a,r;r=e,-1===(a=n).indexOf(r)&&a.push(r),t.style.transform=p(n)})(t,n),n=h(n)),function(t,n){t.activeAnimations[n]&&(e(t.activeAnimations[n]),t.activeAnimations[n]=void 0)}(O,n);const k=u.get(n);g(n)?(M=((t,e)=>n=>t.style.setProperty(e,n))(t,n),P.cssRegisterProperty()?function(t){if(!v.has(t)){v.add(t);try{const{syntax:e,initialValue:n}=u.has(t)?u.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}(n):A=!1):M=((t,e)=>n=>t.style[e]=n)(t,n);let D=function(t,e,n){for(let i=0;i<t.length;i++)null===t[i]&&(t[i]=i?t[i-1]:q(e,n));return t}(r,t,n);if(A){if(k&&(D=D.map((t=>"number"==typeof t?k.toDefaultUnit(t):t))),!P.partialKeyframes()&&1===D.length){const e=g(n)?t.style.getPropertyValue(n):getComputedStyle(t)[n];D.unshift(e)}const e={delay:b(l),duration:b(c),endDelay:b(f),easing:T(d)?void 0:S(d),direction:w,iterations:y+1},i=t.animate({[n]:D,offset:x,easing:T(d)?d.map(S):void 0},e);O.activeAnimations[n]=i,i.finished||(i.finished=new Promise(((t,e)=>{i.onfinish=t,i.oncancel=e})));const r=D[D.length-1];return i.finished.then((()=>M(r))).catch(a),i}if(j&&D.every(W)){if(1===D.length&&D.unshift(q(t,n)||(null==k?void 0:k.initialValue)||0),D=D.map((t=>"string"==typeof t?parseFloat(t):t)),k){const t=M;M=e=>t(k.toDefaultUnit(e))}return function(t,e=[0,1],n={}){return new F(t,e,n)}(M,D,s)}{const t=D[D.length-1];M(k&&"number"==typeof t?k.toDefaultUnit(t):t)}}const W=t=>"number"==typeof t,K=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):t;const X={get:(t,n)=>{var i,a;switch(n){case"finished":return t.finished;case"currentTime":const r=(null===(i=t.animations[0])||void 0===i?void 0:i[n])||0;return r?r/1e3:0;case"playbackRate":return null===(a=t.animations[0])||void 0===a?void 0:a[n];case"stop":return()=>t.animations.forEach(e);default:return()=>t.animations.forEach((t=>t[n]()))}},set:(t,e,n)=>{switch(e){case"currentTime":n*=1e3;case"currentTime":case"playbackRate":for(let i=0;i<t.animations.length;i++)t.animations[i][e]=n;return!0}return!1}};t.animate=function(t,e,n={}){var{stagger:i=0}=n,a=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,["stagger"]);t=function(t){"string"==typeof t?t=document.querySelectorAll(t):t instanceof Element&&(t=[t]);return Array.from(t)}(t);const r=[];for(let n=0;n<t.length;n++){const s=t[n];for(const t in e){const o=K(a,t);i&&(o.delay||(o.delay=0),o.delay+=i*n);const c=z(s,t,e[t],o);c&&r.push(c)}}const s={animations:r,finished:Promise.all(r.map((t=>t.finished)))};return new Proxy(s,X)},t.animateStyle=z,Object.defineProperty(t,"__esModule",{value:!0})})); |
@@ -35,5 +35,5 @@ (function (global, factory) { | ||
| function stopAnimation(animation) { | ||
| animation.commitStyles(); | ||
| // Suppress error thrown by WAAPI | ||
| try { | ||
| animation.commitStyles(); | ||
| animation.cancel(); | ||
@@ -453,3 +453,19 @@ } | ||
| function animateStyle(element, name, keyframes, options = {}) { | ||
| const style = { | ||
| // TODO: Support transforms | ||
| get: (element, name) => isCssVar(name) | ||
| ? element.style.getPropertyValue(name) | ||
| : getComputedStyle(element)[name], | ||
| }; | ||
| function hydrateKeyframes(keyframes, element, name) { | ||
| for (let i = 0; i < keyframes.length; i++) { | ||
| if (keyframes[i] === null) { | ||
| keyframes[i] = i ? keyframes[i - 1] : style.get(element, name); | ||
| } | ||
| } | ||
| return keyframes; | ||
| } | ||
| function animateStyle(element, name, keyframesDefinition, options = {}) { | ||
| let { duration = 0.3, delay = 0, endDelay = 0, repeat = 0, easing = "ease", direction, offset, } = options; | ||
@@ -460,3 +476,5 @@ const data = getAnimationData(element); | ||
| const valueIsTransform = isTransform(name); | ||
| keyframes = Array.isArray(keyframes) ? keyframes : [keyframes]; | ||
| keyframesDefinition = Array.isArray(keyframesDefinition) | ||
| ? keyframesDefinition | ||
| : [keyframesDefinition]; | ||
| /** | ||
@@ -474,14 +492,2 @@ * If this is an individual transform, we need to map its | ||
| /** | ||
| * Check if this is an animation pregenerator and generate keyframes | ||
| * if so. | ||
| */ | ||
| // if (isAnimationGenerator(easing)) { | ||
| // const generatedAnimation = easing.generate(keyframes) | ||
| // easing = "linear" | ||
| // if (generatedAnimation !== false) { | ||
| // keyframes = generatedAnimation.keyframes | ||
| // duration = generatedAnimation.duration | ||
| // } | ||
| // } | ||
| /** | ||
| * Get definition of value, this will be used to convert numerical | ||
@@ -509,2 +515,7 @@ * keyframes into the default value type. | ||
| /** | ||
| * Replace null values with the previous keyframe value, or read | ||
| * it from the DOM if it's the first keyframe. | ||
| */ | ||
| let keyframes = hydrateKeyframes(keyframesDefinition, element, name); | ||
| /** | ||
| * If we can animate this value with WAAPI, do so. Currently this only | ||
@@ -556,4 +567,10 @@ * feature detects CSS.registerProperty but could check WAAPI too. | ||
| if (keyframes.length === 1) { | ||
| keyframes.unshift(parseFloat(getComputedStyle(element).getPropertyValue(name) || "0")); | ||
| keyframes.unshift(style.get(element, name) || (definition === null || definition === void 0 ? void 0 : definition.initialValue) || 0); | ||
| } | ||
| /** | ||
| * Transform styles are currently only accepted as numbers of | ||
| * their default value type, so here we loop through and map | ||
| * them to numbers. | ||
| */ | ||
| keyframes = keyframes.map((value) => typeof value === "string" ? parseFloat(value) : value); | ||
| if (definition) { | ||
@@ -582,3 +599,3 @@ const applyStyle = render; | ||
| function animate(elements, keyframes, _a) { | ||
| function animate(elements, keyframes, _a = {}) { | ||
| var { stagger = 0 } = _a, options = __rest(_a, ["stagger"]); | ||
@@ -585,0 +602,0 @@ elements = resolveElements(elements); |
@@ -1,1 +0,1 @@ | ||
| function t(t){t.commitStyles();try{t.cancel()}catch(t){}}const e=new WeakMap;function n(t){return e.has(t)||e.set(t,{activeTransforms:[],activeAnimations:{}}),e.get(t)}const i=()=>{},a=t=>t,r=["","X","Y","Z"],s={x:"translateX",y:"translateY",z:"translateZ"},o={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},c={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:o,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:a},skew:o},l=new Map,u=t=>`--motion-${t}`,h=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{r.forEach((e=>{h.push(t+e),l.set(u(t+e),c[t])}))}));const f=(t,e)=>h.indexOf(t)-h.indexOf(e),m=new Set(h),y=t=>t.sort(f).reduce(p,"").trim(),p=(t,e)=>`${t} ${e}(var(${u(e)}))`,d=t=>t.startsWith("--"),g=new Set;const v=t=>1e3*t,T=t=>Array.isArray(t)&&"number"!=typeof t[0],b=t=>(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?w(t):t,w=([t,e,n,i])=>`cubic-bezier(${t}, ${e}, ${n}, ${i})`,S=t=>document.createElement("div").animate(t,{duration:.001}),x={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{S({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(S({opacity:[0,1]}).finished)},A={},O=Object.keys(x).reduce(((t,e)=>(t[e]=()=>(void 0===A[e]&&(A[e]=x[e]()),A[e]),t)),{}),P=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function M(t,e,n,i){if(t===e&&n===i)return a;const r=e=>function(t,e,n,i,a){let r,s,o=0;do{s=e+(n-e)/2,r=P(s,i,a)-t,r>0?n=s:e=s}while(Math.abs(r)>1e-7&&++o<12);return s}(e,0,1,t,n);return t=>0===t||1===t?t:P(r(t),e,i)}var k=function(t,e,n){var i=e-t;return 0===i?1:(n-t)/i},j=function(t,e,n){return-n*t+n*e+t},D=function(t,e){return void 0===e&&(e="end"),function(n){var i,a,r,s=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,o="end"===e?Math.floor(s):Math.ceil(s);return i=0,a=1,r=o/t,Math.min(Math.max(r,i),a)}};const E={ease:M(.25,.1,.25,1),"ease-in":M(.42,0,1,1),"ease-in-out":M(.42,0,.58,1),"ease-out":M(0,0,.58,1)},$=/\((.*?)\)/;function V(t){if("function"==typeof t)return t;if(Array.isArray(t))return M(...t);if(E[t])return E[t];if(t.startsWith("steps")){const e=$.exec(t);if(e){const t=e[1].split(",");return D(parseFloat(t[0]),t[1].trim())}}return a}function R(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const a=k(0,e,i);t.push(j(n,1,a))}}function U(t,e=function(t){const e=[0];return R(e,t-1),e}(t.length),n=a){const i=t.length,r=i-e.length;return r>0&&R(e,r),a=>{let r=0;for(;r<i-2&&!(a<e[r+1]);r++);let s=(o=k(e[r],e[r+1],a),Math.min(1,Math.max(o,0)));var o,c,l,u;if(Array.isArray(n)){const t=(c=0,l=n.length-1,((r-c)%(u=l-c)+u)%u+c);s=n[t](s)}else s=n(s);return j(t[r],t[r+1],s)}}class C{constructor(t,e,{easing:n="ease",duration:i=.3,delay:a=0,endDelay:r=0,offset:s,repeat:o=0,direction:c="normal"}){this.startTime=0,this.rate=1,this.t=0,this.cancelT=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e}));const l=i*(o+1),u=U(e,s,T(n)?n.map(V):V(n));this.tick=e=>{if("finished"===this.playState){const e=u(1);return t(e),void this.resolve(e)}let n=this.pauseTime?this.pauseTime:(e-this.startTime)*this.rate;this.t=n,n/=1e3,n=Math.max(n-a,0);const s=n/i;let o=Math.floor(s),h=s%1;!h&&s>=1&&(h=1),1===h&&o--;const f=o%2;("reverse"===c||"alternate"===c&&f||"alternate-reverse"===c&&!f)&&(h=1-h);const m=n>=l?1:Math.min(h,1),y=u(m);t(y);n>=l+r?(this.playState="finished",this.resolve(y)):"idle"!==this.playState&&requestAnimationFrame(this.tick)},this.play()}play(){const t=performance.now();this.playState="running",this.pauseTime?this.startTime=t-(this.pauseTime-this.startTime):this.startTime||(this.startTime=t),this.pauseTime=void 0,requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=performance.now()}finish(){this.playState="finished",this.tick(0)}cancel(){this.playState="idle",this.tick(this.cancelT),this.reject(!1)}reverse(){this.rate*=-1}commitStyles(){this.cancelT=this.t}get currentTime(){return this.currentTime}set currentTime(t){this.pauseTime||0===this.rate?this.pauseTime=v(t):this.startTime=performance.now()-v(t)/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}function F(e,a,r,o={}){let{duration:c=.3,delay:h=0,endDelay:f=0,repeat:p=0,easing:w="ease",direction:S,offset:x}=o;const A=n(e);let P=O.waapi(),M=i;const k=(t=>m.has(t))(a);r=Array.isArray(r)?r:[r],k&&(s[a]&&(a=s[a]),((t,e)=>{const{activeTransforms:i}=n(t);var a,r;r=e,-1===(a=i).indexOf(r)&&a.push(r),t.style.transform=y(i)})(e,a),a=u(a)),function(e,n){e.activeAnimations[n]&&(t(e.activeAnimations[n]),e.activeAnimations[n]=void 0)}(A,a);const j=l.get(a);if(d(a)?(M=((t,e)=>n=>t.style.setProperty(e,n))(e,a),O.cssRegisterProperty()?function(t){if(!g.has(t)){g.add(t);try{const{syntax:e,initialValue:n}=l.has(t)?l.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}(a):P=!1):M=((t,e)=>n=>t.style[e]=n)(e,a),P){if(j&&(r=r.map((t=>"number"==typeof t?j.toDefaultUnit(t):t))),!O.partialKeyframes()&&1===r.length){const t=d(a)?e.style.getPropertyValue(a):getComputedStyle(e)[a];r.unshift(t)}const t={delay:v(h),duration:v(c),endDelay:v(f),easing:T(w)?void 0:b(w),direction:S,iterations:p+1},n=e.animate({[a]:r,offset:x,easing:T(w)?w.map(b):void 0},t);A.activeAnimations[a]=n,n.finished||(n.finished=new Promise(((t,e)=>{n.onfinish=t,n.oncancel=e})));const s=r[r.length-1];return n.finished.then((()=>M(s))).catch(i),n}if(k&&r.every(q)){if(1===r.length&&r.unshift(parseFloat(getComputedStyle(e).getPropertyValue(a)||"0")),j){const t=M;M=e=>t(j.toDefaultUnit(e))}return function(t,e=[0,1],n={}){return new C(t,e,n)}(M,r,o)}{const t=r[r.length-1];M(j&&"number"==typeof t?j.toDefaultUnit(t):t)}}const q=t=>"number"==typeof t,z=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):t;function W(t,e,n){var{stagger:i=0}=n,a=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,["stagger"]);t=function(t){"string"==typeof t?t=document.querySelectorAll(t):t instanceof Element&&(t=[t]);return Array.from(t)}(t);const r=[];for(let n=0;n<t.length;n++){const s=t[n];for(const t in e){const o=z(a,t);i&&(o.delay||(o.delay=0),o.delay+=i*n);const c=F(s,t,e[t],o);c&&r.push(c)}}const s={animations:r,finished:Promise.all(r.map((t=>t.finished)))};return new Proxy(s,K)}const K={get:(e,n)=>{var i,a;switch(n){case"finished":return e.finished;case"currentTime":const r=(null===(i=e.animations[0])||void 0===i?void 0:i[n])||0;return r?r/1e3:0;case"playbackRate":return null===(a=e.animations[0])||void 0===a?void 0:a[n];case"stop":return()=>e.animations.forEach(t);default:return()=>e.animations.forEach((t=>t[n]()))}},set:(t,e,n)=>{switch(e){case"currentTime":n*=1e3;case"currentTime":case"playbackRate":for(let i=0;i<t.animations.length;i++)t.animations[i][e]=n;return!0}return!1}};export{W as animate}; | ||
| function t(t){try{t.commitStyles(),t.cancel()}catch(t){}}const e=new WeakMap;function n(t){return e.has(t)||e.set(t,{activeTransforms:[],activeAnimations:{}}),e.get(t)}const i=()=>{},a=t=>t,r=["","X","Y","Z"],s={x:"translateX",y:"translateY",z:"translateZ"},o={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},c={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:o,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:a},skew:o},l=new Map,u=t=>`--motion-${t}`,h=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{r.forEach((e=>{h.push(t+e),l.set(u(t+e),c[t])}))}));const f=(t,e)=>h.indexOf(t)-h.indexOf(e),m=new Set(h),y=t=>t.sort(f).reduce(p,"").trim(),p=(t,e)=>`${t} ${e}(var(${u(e)}))`,d=t=>t.startsWith("--"),g=new Set;const v=t=>1e3*t,T=t=>Array.isArray(t)&&"number"!=typeof t[0],b=t=>(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?w(t):t,w=([t,e,n,i])=>`cubic-bezier(${t}, ${e}, ${n}, ${i})`,S=t=>document.createElement("div").animate(t,{duration:.001}),x={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{S({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(S({opacity:[0,1]}).finished)},A={},O=Object.keys(x).reduce(((t,e)=>(t[e]=()=>(void 0===A[e]&&(A[e]=x[e]()),A[e]),t)),{}),P=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function M(t,e,n,i){if(t===e&&n===i)return a;const r=e=>function(t,e,n,i,a){let r,s,o=0;do{s=e+(n-e)/2,r=P(s,i,a)-t,r>0?n=s:e=s}while(Math.abs(r)>1e-7&&++o<12);return s}(e,0,1,t,n);return t=>0===t||1===t?t:P(r(t),e,i)}var k=function(t,e,n){var i=e-t;return 0===i?1:(n-t)/i},j=function(t,e,n){return-n*t+n*e+t},D=function(t,e){return void 0===e&&(e="end"),function(n){var i,a,r,s=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,o="end"===e?Math.floor(s):Math.ceil(s);return i=0,a=1,r=o/t,Math.min(Math.max(r,i),a)}};const E={ease:M(.25,.1,.25,1),"ease-in":M(.42,0,1,1),"ease-in-out":M(.42,0,.58,1),"ease-out":M(0,0,.58,1)},V=/\((.*?)\)/;function $(t){if("function"==typeof t)return t;if(Array.isArray(t))return M(...t);if(E[t])return E[t];if(t.startsWith("steps")){const e=V.exec(t);if(e){const t=e[1].split(",");return D(parseFloat(t[0]),t[1].trim())}}return a}function R(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const a=k(0,e,i);t.push(j(n,1,a))}}function U(t,e=function(t){const e=[0];return R(e,t-1),e}(t.length),n=a){const i=t.length,r=i-e.length;return r>0&&R(e,r),a=>{let r=0;for(;r<i-2&&!(a<e[r+1]);r++);let s=(o=k(e[r],e[r+1],a),Math.min(1,Math.max(o,0)));var o,c,l,u;if(Array.isArray(n)){const t=(c=0,l=n.length-1,((r-c)%(u=l-c)+u)%u+c);s=n[t](s)}else s=n(s);return j(t[r],t[r+1],s)}}class C{constructor(t,e,{easing:n="ease",duration:i=.3,delay:a=0,endDelay:r=0,offset:s,repeat:o=0,direction:c="normal"}){this.startTime=0,this.rate=1,this.t=0,this.cancelT=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e}));const l=i*(o+1),u=U(e,s,T(n)?n.map($):$(n));this.tick=e=>{if("finished"===this.playState){const e=u(1);return t(e),void this.resolve(e)}let n=this.pauseTime?this.pauseTime:(e-this.startTime)*this.rate;this.t=n,n/=1e3,n=Math.max(n-a,0);const s=n/i;let o=Math.floor(s),h=s%1;!h&&s>=1&&(h=1),1===h&&o--;const f=o%2;("reverse"===c||"alternate"===c&&f||"alternate-reverse"===c&&!f)&&(h=1-h);const m=n>=l?1:Math.min(h,1),y=u(m);t(y);n>=l+r?(this.playState="finished",this.resolve(y)):"idle"!==this.playState&&requestAnimationFrame(this.tick)},this.play()}play(){const t=performance.now();this.playState="running",this.pauseTime?this.startTime=t-(this.pauseTime-this.startTime):this.startTime||(this.startTime=t),this.pauseTime=void 0,requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=performance.now()}finish(){this.playState="finished",this.tick(0)}cancel(){this.playState="idle",this.tick(this.cancelT),this.reject(!1)}reverse(){this.rate*=-1}commitStyles(){this.cancelT=this.t}get currentTime(){return this.currentTime}set currentTime(t){this.pauseTime||0===this.rate?this.pauseTime=v(t):this.startTime=performance.now()-v(t)/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}const F=(t,e)=>d(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];function q(e,a,r,o={}){let{duration:c=.3,delay:h=0,endDelay:f=0,repeat:p=0,easing:w="ease",direction:S,offset:x}=o;const A=n(e);let P=O.waapi(),M=i;const k=(t=>m.has(t))(a);r=Array.isArray(r)?r:[r],k&&(s[a]&&(a=s[a]),((t,e)=>{const{activeTransforms:i}=n(t);var a,r;r=e,-1===(a=i).indexOf(r)&&a.push(r),t.style.transform=y(i)})(e,a),a=u(a)),function(e,n){e.activeAnimations[n]&&(t(e.activeAnimations[n]),e.activeAnimations[n]=void 0)}(A,a);const j=l.get(a);d(a)?(M=((t,e)=>n=>t.style.setProperty(e,n))(e,a),O.cssRegisterProperty()?function(t){if(!g.has(t)){g.add(t);try{const{syntax:e,initialValue:n}=l.has(t)?l.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}(a):P=!1):M=((t,e)=>n=>t.style[e]=n)(e,a);let D=function(t,e,n){for(let i=0;i<t.length;i++)null===t[i]&&(t[i]=i?t[i-1]:F(e,n));return t}(r,e,a);if(P){if(j&&(D=D.map((t=>"number"==typeof t?j.toDefaultUnit(t):t))),!O.partialKeyframes()&&1===D.length){const t=d(a)?e.style.getPropertyValue(a):getComputedStyle(e)[a];D.unshift(t)}const t={delay:v(h),duration:v(c),endDelay:v(f),easing:T(w)?void 0:b(w),direction:S,iterations:p+1},n=e.animate({[a]:D,offset:x,easing:T(w)?w.map(b):void 0},t);A.activeAnimations[a]=n,n.finished||(n.finished=new Promise(((t,e)=>{n.onfinish=t,n.oncancel=e})));const r=D[D.length-1];return n.finished.then((()=>M(r))).catch(i),n}if(k&&D.every(z)){if(1===D.length&&D.unshift(F(e,a)||(null==j?void 0:j.initialValue)||0),D=D.map((t=>"string"==typeof t?parseFloat(t):t)),j){const t=M;M=e=>t(j.toDefaultUnit(e))}return function(t,e=[0,1],n={}){return new C(t,e,n)}(M,D,o)}{const t=D[D.length-1];M(j&&"number"==typeof t?j.toDefaultUnit(t):t)}}const z=t=>"number"==typeof t,W=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):t;function K(t,e,n={}){var{stagger:i=0}=n,a=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,["stagger"]);t=function(t){"string"==typeof t?t=document.querySelectorAll(t):t instanceof Element&&(t=[t]);return Array.from(t)}(t);const r=[];for(let n=0;n<t.length;n++){const s=t[n];for(const t in e){const o=W(a,t);i&&(o.delay||(o.delay=0),o.delay+=i*n);const c=q(s,t,e[t],o);c&&r.push(c)}}const s={animations:r,finished:Promise.all(r.map((t=>t.finished)))};return new Proxy(s,X)}const X={get:(e,n)=>{var i,a;switch(n){case"finished":return e.finished;case"currentTime":const r=(null===(i=e.animations[0])||void 0===i?void 0:i[n])||0;return r?r/1e3:0;case"playbackRate":return null===(a=e.animations[0])||void 0===a?void 0:a[n];case"stop":return()=>e.animations.forEach(t);default:return()=>e.animations.forEach((t=>t[n]()))}},set:(t,e,n)=>{switch(e){case"currentTime":n*=1e3;case"currentTime":case"playbackRate":for(let i=0;i<t.animations.length;i++)t.animations[i][e]=n;return!0}return!1}};export{K as animate}; |
@@ -1,1 +0,1 @@ | ||
| import*as t from"react";import{useRef as e,useEffect as n,useState as r,createContext as i,useContext as s,forwardRef as o,createElement as a,useMemo as c}from"react";const l=new WeakMap;function u(t){return l.has(t)||l.set(t,{activeTransforms:[],activeAnimations:{}}),l.get(t)}const f=()=>{},h=t=>t,p=["","X","Y","Z"],y={x:"translateX",y:"translateY",z:"translateZ"},m={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},d={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:m,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:h},skew:m},v=new Map,g=t=>`--motion-${t}`,w=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{p.forEach((e=>{w.push(t+e),v.set(g(t+e),d[t])}))}));const b=(t,e)=>w.indexOf(t)-w.indexOf(e),O=new Set(w),x=t=>O.has(t),S=t=>t.sort(b).reduce(P,"").trim(),P=(t,e)=>`${t} ${e}(var(${g(e)}))`,A=t=>t.startsWith("--"),T=new Set;const j=t=>1e3*t;const M=t=>Array.isArray(t)&&"number"!=typeof t[0],V=t=>(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?k(t):t,k=([t,e,n,r])=>`cubic-bezier(${t}, ${e}, ${n}, ${r})`,E=t=>document.createElement("div").animate(t,{duration:.001}),D={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{E({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(E({opacity:[0,1]}).finished)},C={},$=Object.keys(D).reduce(((t,e)=>(t[e]=()=>(void 0===C[e]&&(C[e]=D[e]()),C[e]),t)),{}),U=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function I(t,e,n,r){if(t===e&&n===r)return h;const i=e=>function(t,e,n,r,i){let s,o,a=0;do{o=e+(n-e)/2,s=U(o,r,i)-t,s>0?n=o:e=o}while(Math.abs(s)>1e-7&&++a<12);return o}(e,0,1,t,n);return t=>0===t||1===t?t:U(i(t),e,r)}var L=function(t,e,n){var r=e-t;return 0===r?1:(n-t)/r},F=function(t,e,n){return-n*t+n*e+t},R=function(t,e){return void 0===e&&(e="end"),function(n){var r,i,s,o=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,a="end"===e?Math.floor(o):Math.ceil(o);return r=0,i=1,s=a/t,Math.min(Math.max(s,r),i)}};const z={ease:I(.25,.1,.25,1),"ease-in":I(.42,0,1,1),"ease-in-out":I(.42,0,.58,1),"ease-out":I(0,0,.58,1)},W=/\((.*?)\)/;function q(t){if("function"==typeof t)return t;if(Array.isArray(t))return I(...t);if(z[t])return z[t];if(t.startsWith("steps")){const e=W.exec(t);if(e){const t=e[1].split(",");return R(parseFloat(t[0]),t[1].trim())}}return h}function B(t,e){const n=t[t.length-1];for(let r=1;r<=e;r++){const i=L(0,e,r);t.push(F(n,1,i))}}function K(t,e=function(t){const e=[0];return B(e,t-1),e}(t.length),n=h){const r=t.length,i=r-e.length;return i>0&&B(e,i),i=>{let s=0;for(;s<r-2&&!(i<e[s+1]);s++);let o=(a=L(e[s],e[s+1],i),Math.min(1,Math.max(a,0)));var a,c,l,u;if(Array.isArray(n)){const t=(c=0,l=n.length-1,((s-c)%(u=l-c)+u)%u+c);o=n[t](o)}else o=n(o);return F(t[s],t[s+1],o)}}class X{constructor(t,e,{easing:n="ease",duration:r=.3,delay:i=0,endDelay:s=0,offset:o,repeat:a=0,direction:c="normal"}){this.startTime=0,this.rate=1,this.t=0,this.cancelT=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e}));const l=r*(a+1),u=K(e,o,M(n)?n.map(q):q(n));this.tick=e=>{if("finished"===this.playState){const e=u(1);return t(e),void this.resolve(e)}let n=this.pauseTime?this.pauseTime:(e-this.startTime)*this.rate;this.t=n,n/=1e3,n=Math.max(n-i,0);const o=n/r;let a=Math.floor(o),f=o%1;!f&&o>=1&&(f=1),1===f&&a--;const h=a%2;("reverse"===c||"alternate"===c&&h||"alternate-reverse"===c&&!h)&&(f=1-f);const p=n>=l?1:Math.min(f,1),y=u(p);t(y);n>=l+s?(this.playState="finished",this.resolve(y)):"idle"!==this.playState&&requestAnimationFrame(this.tick)},this.play()}play(){const t=performance.now();this.playState="running",this.pauseTime?this.startTime=t-(this.pauseTime-this.startTime):this.startTime||(this.startTime=t),this.pauseTime=void 0,requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=performance.now()}finish(){this.playState="finished",this.tick(0)}cancel(){this.playState="idle",this.tick(this.cancelT),this.reject(!1)}reverse(){this.rate*=-1}commitStyles(){this.cancelT=this.t}get currentTime(){return this.currentTime}set currentTime(t){this.pauseTime||0===this.rate?this.pauseTime=j(t):this.startTime=performance.now()-j(t)/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}function Y(t,e,n,r={}){let{duration:i=.3,delay:s=0,endDelay:o=0,repeat:a=0,easing:c="ease",direction:l,offset:h}=r;const p=u(t);let m=$.waapi(),d=f;const w=x(e);n=Array.isArray(n)?n:[n],w&&(y[e]&&(e=y[e]),((t,e)=>{const{activeTransforms:n}=u(t);var r,i;i=e,-1===(r=n).indexOf(i)&&r.push(i),t.style.transform=S(n)})(t,e),e=g(e)),function(t,e){t.activeAnimations[e]&&(!function(t){t.commitStyles();try{t.cancel()}catch(t){}}(t.activeAnimations[e]),t.activeAnimations[e]=void 0)}(p,e);const b=v.get(e);if(A(e)?(d=((t,e)=>n=>t.style.setProperty(e,n))(t,e),$.cssRegisterProperty()?function(t){if(!T.has(t)){T.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){}}}(e):m=!1):d=((t,e)=>n=>t.style[e]=n)(t,e),m){if(b&&(n=n.map((t=>"number"==typeof t?b.toDefaultUnit(t):t))),!$.partialKeyframes()&&1===n.length){const r=A(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];n.unshift(r)}const r={delay:j(s),duration:j(i),endDelay:j(o),easing:M(c)?void 0:V(c),direction:l,iterations:a+1},u=t.animate({[e]:n,offset:h,easing:M(c)?c.map(V):void 0},r);p.activeAnimations[e]=u,u.finished||(u.finished=new Promise(((t,e)=>{u.onfinish=t,u.oncancel=e})));const y=n[n.length-1];return u.finished.then((()=>d(y))).catch(f),u}if(w&&n.every(Z)){if(1===n.length&&n.unshift(parseFloat(getComputedStyle(t).getPropertyValue(e)||"0")),b){const t=d;d=e=>t(b.toDefaultUnit(e))}return function(t,e=[0,1],n={}){return new X(t,e,n)}(d,n,r)}{const t=n[n.length-1];d(b&&"number"==typeof t?b.toDefaultUnit(t):t)}}const Z=t=>"number"==typeof t;const G=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):t;function H(t,r,i,s,o,a){const c=e(r);n((()=>{const e={};if(new Set([...Object.keys(i),...Object.keys(c.current)]).forEach((t=>{let n=i[t];var r,s;(r=n,s=c.current[t],typeof r==typeof s&&(Array.isArray(r)&&Array.isArray(s)?function(t,e){const n=e.length;if(n!==t.length)return!1;for(let r=0;r<n;r++)if(e[r]!==t[r])return!1;return!0}(r,s):r===s))||(e[t]=n)})),Object.keys(e).length&&t.current){null==o||o(e);const n=[];for(const r in e){const i=Y(t.current,r,e[r],G(s,r));i&&n.push(i)}Promise.all(n.map((t=>t.finished))).then((()=>null==a?void 0:a(e))).catch(f)}c.current=i}))}function J(t,e,n={}){return t?"string"==typeof t?n[t]:t:e?n[e]:void 0}function N(t,e,n){if(n)for(const r in n)"options"!==r&&(t[r]=n[r],n.options&&(e[r]=G(n.options,r)))}function Q(t,e,n,i,s){const[o,a]=r(!1);return(o||i)&&N(t,e,J(n,i,s)),[o||Boolean(i),a]}var _=i(null);var tt=0,et=function(){return tt++},nt=function(){return t=et,null===(n=e(null)).current&&(n.current=t()),n.current;var t,n};function rt(t,e,{exit:r,poses:i},{exit:o}){const[a,c]=function(){var t=s(_);if(null===t)return[!0,null];var e=t.isPresent,r=t.onExitComplete,i=t.register,o=nt();return n((function(){return i(o)}),[]),!e&&r?[!1,function(){return null==r?void 0:r(o)}]:[!0]}();if(n((()=>{r||null==c||c()}),[a]),r&&!a)return N(t,e,J(r,o,i)),c}const it=i({});function st(r){return o((function(i,o){const l=e(null),{options:u,style:f,initial:h,hover:p,press:m,exit:d,inViewport:w,viewport:b,poses:O,onStart:P,onComplete:A,inherit:T=!0}=i,j=function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(t);i<r.length;i++)e.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(t,r[i])&&(n[r[i]]=t[r[i]])}return n}(i,["options","style","initial","hover","press","exit","inViewport","viewport","poses","onStart","onComplete","inherit"]),M={initial:!0,style:!0};let V=s(it);T||(V={});const k=J(f,V.style,O),E=J(h,V.initial,O),D=Object.assign(Object.assign({},k),E),C=Object.assign(Object.assign({},E),k),$=Object.assign(Object.assign({},u),null==k?void 0:k.options),U=e(null);U.current||(U.current=function(t){const e={},n=[];for(let r in t){const i=t[r];x(r)&&(y[r]&&(r=y[r]),n.push(r),r=g(r));let s=Array.isArray(i)?i[0]:i;const o=v.get(r);o&&(s="number"==typeof i?o.toDefaultUnit(i):i),e[r]=s}return n.length&&(e.transform=S(n)),e}(D));const I=function(t,e,{hover:n,onPointerEnter:r,onPointerLeave:i,poses:s}={},{hover:o},a){const[c,l]=Q(t,e,n,o,s);return a.hover=c,n?{onPointerEnter:t=>{null==r||r(t),l(!0)},onPointerLeave:t=>{null==i||i(t),l(!1)}}:{}}(C,$,i,V,M),L=function(t,e,{press:n,onPointerDown:r,poses:i}={},{press:s},o){const[a,c]=Q(t,e,n,s,i);if(o.press=a,!n)return{};const l=()=>{c(!1),window.removeEventListener("pointerup",l)};return{onPointerDown:t=>{null==r||r(t),c(!0),window.addEventListener("pointerup",l)}}}(C,$,i,V,M);!function(t,e,r,{inViewport:i,poses:s,viewport:o={},onViewportEnter:a,onViewportLeave:c},{inViewport:l},u){const{root:f,margin:h,once:p,threshold:y}=o,[m,d]=Q(e,r,i,l,s);u.inViewport=m;let v=!!i||!!a||!!c;p&&m&&(v=!1),n((()=>{if(!v||"undefined"==typeof IntersectionObserver)return;const e=new IntersectionObserver((([t])=>{d(t.isIntersecting);const e=t.isIntersecting?a:c;e&&e(t)}),{root:null==f?void 0:f.current,rootMargin:h,threshold:y});return e.observe(t.current),()=>e.disconnect()}),[i,a,c,f,h,y])}(l,C,$,i,V,M);const F=rt(C,$,i,V);H(l,D,C,$,P,(t=>{A&&A(t),F&&F()}));const R=a(r,Object.assign({},j,I,L,{style:U.current,ref:l})),z=ot.reduce(((t,e)=>(t[e]=void 0,i[e]?"string"==typeof i[e]&&M[e]&&(t[e]=i[e]):V[e]&&(t[e]=V[e]),t)),{}),W=c((()=>z),Object.values(z));return t.createElement(it.Provider,{value:W},R)}))}const ot=["initial","style","hover","press","inViewport","exit"],at=new Map,ct=new Proxy({},{get:(t,e)=>(at.has(e)||at.set(e,st(e)),at.get(e))});export{ct as animated}; | ||
| import*as t from"react";import{useRef as e,useEffect as n,useState as r,createContext as i,useContext as s,forwardRef as o,createElement as a,useMemo as c}from"react";const l=new WeakMap;function u(t){return l.has(t)||l.set(t,{activeTransforms:[],activeAnimations:{}}),l.get(t)}const f=()=>{},p=t=>t,h=["","X","Y","Z"],y={x:"translateX",y:"translateY",z:"translateZ"},m={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},d={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:m,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:p},skew:m},v=new Map,g=t=>`--motion-${t}`,w=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{h.forEach((e=>{w.push(t+e),v.set(g(t+e),d[t])}))}));const b=(t,e)=>w.indexOf(t)-w.indexOf(e),O=new Set(w),x=t=>O.has(t),S=t=>t.sort(b).reduce(P,"").trim(),P=(t,e)=>`${t} ${e}(var(${g(e)}))`,A=t=>t.startsWith("--"),T=new Set;const j=t=>1e3*t;const V=t=>Array.isArray(t)&&"number"!=typeof t[0],M=t=>(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?E(t):t,E=([t,e,n,r])=>`cubic-bezier(${t}, ${e}, ${n}, ${r})`,k=t=>document.createElement("div").animate(t,{duration:.001}),D={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{k({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(k({opacity:[0,1]}).finished)},C={},$=Object.keys(D).reduce(((t,e)=>(t[e]=()=>(void 0===C[e]&&(C[e]=D[e]()),C[e]),t)),{}),L=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function U(t,e,n,r){if(t===e&&n===r)return p;const i=e=>function(t,e,n,r,i){let s,o,a=0;do{o=e+(n-e)/2,s=L(o,r,i)-t,s>0?n=o:e=o}while(Math.abs(s)>1e-7&&++a<12);return o}(e,0,1,t,n);return t=>0===t||1===t?t:L(i(t),e,r)}var I=function(t,e,n){var r=e-t;return 0===r?1:(n-t)/r},F=function(t,e,n){return-n*t+n*e+t},R=function(t,e){return void 0===e&&(e="end"),function(n){var r,i,s,o=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,a="end"===e?Math.floor(o):Math.ceil(o);return r=0,i=1,s=a/t,Math.min(Math.max(s,r),i)}};const z={ease:U(.25,.1,.25,1),"ease-in":U(.42,0,1,1),"ease-in-out":U(.42,0,.58,1),"ease-out":U(0,0,.58,1)},W=/\((.*?)\)/;function q(t){if("function"==typeof t)return t;if(Array.isArray(t))return U(...t);if(z[t])return z[t];if(t.startsWith("steps")){const e=W.exec(t);if(e){const t=e[1].split(",");return R(parseFloat(t[0]),t[1].trim())}}return p}function B(t,e){const n=t[t.length-1];for(let r=1;r<=e;r++){const i=I(0,e,r);t.push(F(n,1,i))}}function K(t,e=function(t){const e=[0];return B(e,t-1),e}(t.length),n=p){const r=t.length,i=r-e.length;return i>0&&B(e,i),i=>{let s=0;for(;s<r-2&&!(i<e[s+1]);s++);let o=(a=I(e[s],e[s+1],i),Math.min(1,Math.max(a,0)));var a,c,l,u;if(Array.isArray(n)){const t=(c=0,l=n.length-1,((s-c)%(u=l-c)+u)%u+c);o=n[t](o)}else o=n(o);return F(t[s],t[s+1],o)}}class X{constructor(t,e,{easing:n="ease",duration:r=.3,delay:i=0,endDelay:s=0,offset:o,repeat:a=0,direction:c="normal"}){this.startTime=0,this.rate=1,this.t=0,this.cancelT=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e}));const l=r*(a+1),u=K(e,o,V(n)?n.map(q):q(n));this.tick=e=>{if("finished"===this.playState){const e=u(1);return t(e),void this.resolve(e)}let n=this.pauseTime?this.pauseTime:(e-this.startTime)*this.rate;this.t=n,n/=1e3,n=Math.max(n-i,0);const o=n/r;let a=Math.floor(o),f=o%1;!f&&o>=1&&(f=1),1===f&&a--;const p=a%2;("reverse"===c||"alternate"===c&&p||"alternate-reverse"===c&&!p)&&(f=1-f);const h=n>=l?1:Math.min(f,1),y=u(h);t(y);n>=l+s?(this.playState="finished",this.resolve(y)):"idle"!==this.playState&&requestAnimationFrame(this.tick)},this.play()}play(){const t=performance.now();this.playState="running",this.pauseTime?this.startTime=t-(this.pauseTime-this.startTime):this.startTime||(this.startTime=t),this.pauseTime=void 0,requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=performance.now()}finish(){this.playState="finished",this.tick(0)}cancel(){this.playState="idle",this.tick(this.cancelT),this.reject(!1)}reverse(){this.rate*=-1}commitStyles(){this.cancelT=this.t}get currentTime(){return this.currentTime}set currentTime(t){this.pauseTime||0===this.rate?this.pauseTime=j(t):this.startTime=performance.now()-j(t)/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}const Y=(t,e)=>A(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];function Z(t,e,n,r={}){let{duration:i=.3,delay:s=0,endDelay:o=0,repeat:a=0,easing:c="ease",direction:l,offset:p}=r;const h=u(t);let m=$.waapi(),d=f;const w=x(e);n=Array.isArray(n)?n:[n],w&&(y[e]&&(e=y[e]),((t,e)=>{const{activeTransforms:n}=u(t);var r,i;i=e,-1===(r=n).indexOf(i)&&r.push(i),t.style.transform=S(n)})(t,e),e=g(e)),function(t,e){t.activeAnimations[e]&&(!function(t){try{t.commitStyles(),t.cancel()}catch(t){}}(t.activeAnimations[e]),t.activeAnimations[e]=void 0)}(h,e);const b=v.get(e);A(e)?(d=((t,e)=>n=>t.style.setProperty(e,n))(t,e),$.cssRegisterProperty()?function(t){if(!T.has(t)){T.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){}}}(e):m=!1):d=((t,e)=>n=>t.style[e]=n)(t,e);let O=function(t,e,n){for(let r=0;r<t.length;r++)null===t[r]&&(t[r]=r?t[r-1]:Y(e,n));return t}(n,t,e);if(m){if(b&&(O=O.map((t=>"number"==typeof t?b.toDefaultUnit(t):t))),!$.partialKeyframes()&&1===O.length){const n=A(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];O.unshift(n)}const n={delay:j(s),duration:j(i),endDelay:j(o),easing:V(c)?void 0:M(c),direction:l,iterations:a+1},r=t.animate({[e]:O,offset:p,easing:V(c)?c.map(M):void 0},n);h.activeAnimations[e]=r,r.finished||(r.finished=new Promise(((t,e)=>{r.onfinish=t,r.oncancel=e})));const u=O[O.length-1];return r.finished.then((()=>d(u))).catch(f),r}if(w&&O.every(G)){if(1===O.length&&O.unshift(Y(t,e)||(null==b?void 0:b.initialValue)||0),O=O.map((t=>"string"==typeof t?parseFloat(t):t)),b){const t=d;d=e=>t(b.toDefaultUnit(e))}return function(t,e=[0,1],n={}){return new X(t,e,n)}(d,O,r)}{const t=O[O.length-1];d(b&&"number"==typeof t?b.toDefaultUnit(t):t)}}const G=t=>"number"==typeof t;const H=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):t;function J(t,r,i,s,o,a){const c=e(r);n((()=>{const e={};if(new Set([...Object.keys(i),...Object.keys(c.current)]).forEach((t=>{let n=i[t];var r,s;(r=n,s=c.current[t],typeof r==typeof s&&(Array.isArray(r)&&Array.isArray(s)?function(t,e){const n=e.length;if(n!==t.length)return!1;for(let r=0;r<n;r++)if(e[r]!==t[r])return!1;return!0}(r,s):r===s))||(e[t]=n)})),Object.keys(e).length&&t.current){null==o||o(e);const n=[];for(const r in e){const i=Z(t.current,r,e[r],H(s,r));i&&n.push(i)}Promise.all(n.map((t=>t.finished))).then((()=>null==a?void 0:a(e))).catch(f)}c.current=i}))}function N(t,e,n={}){return t?"string"==typeof t?n[t]:t:e?n[e]:void 0}function Q(t,e,n){if(n)for(const r in n)"options"!==r&&(t[r]=n[r],n.options&&(e[r]=H(n.options,r)))}function _(t,e,n,i,s){const[o,a]=r(!1);return(o||i)&&Q(t,e,N(n,i,s)),[o||Boolean(i),a]}var tt=i(null);var et=0,nt=function(){return et++},rt=function(){return t=nt,null===(n=e(null)).current&&(n.current=t()),n.current;var t,n};function it(t,e,{exit:r,poses:i},{exit:o}){const[a,c]=function(){var t=s(tt);if(null===t)return[!0,null];var e=t.isPresent,r=t.onExitComplete,i=t.register,o=rt();return n((function(){return i(o)}),[]),!e&&r?[!1,function(){return null==r?void 0:r(o)}]:[!0]}();if(n((()=>{r||null==c||c()}),[a]),r&&!a)return Q(t,e,N(r,o,i)),c}const st=i({});function ot(r){return o((function(i,o){const l=e(null),{options:u,style:f,initial:p,hover:h,press:m,exit:d,inViewport:w,viewport:b,poses:O,onStart:P,onComplete:A,onViewportEnter:T,onViewportLeave:j,inherit:V=!0}=i,M=function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(t);i<r.length;i++)e.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(t,r[i])&&(n[r[i]]=t[r[i]])}return n}(i,["options","style","initial","hover","press","exit","inViewport","viewport","poses","onStart","onComplete","onViewportEnter","onViewportLeave","inherit"]),E={initial:!0,style:!0};let k=s(st);V||(k={});const D=N(f,k.style,O),C=N(p,k.initial,O),$=Object.assign(Object.assign({},D),C),L=Object.assign(Object.assign({},C),D),U=Object.assign(Object.assign({},u),null==D?void 0:D.options),I=e(null);I.current||(I.current=function(t){const e={},n=[];for(let r in t){const i=t[r];x(r)&&(y[r]&&(r=y[r]),n.push(r),r=g(r));let s=Array.isArray(i)?i[0]:i;const o=v.get(r);o&&(s="number"==typeof i?o.toDefaultUnit(i):i),e[r]=s}return n.length&&(e.transform=S(n)),e}($));const F=function(t,e,{hover:n,onPointerEnter:r,onPointerLeave:i,poses:s}={},{hover:o},a){const[c,l]=_(t,e,n,o,s);return a.hover=c,n?{onPointerEnter:t=>{null==r||r(t),l(!0)},onPointerLeave:t=>{null==i||i(t),l(!1)}}:{}}(L,U,i,k,E),R=function(t,e,{press:n,onPointerDown:r,poses:i}={},{press:s},o){const[a,c]=_(t,e,n,s,i);if(o.press=a,!n)return{};const l=()=>{c(!1),window.removeEventListener("pointerup",l)};return{onPointerDown:t=>{null==r||r(t),c(!0),window.addEventListener("pointerup",l)}}}(L,U,i,k,E);!function(t,e,r,{inViewport:i,poses:s,viewport:o={},onViewportEnter:a,onViewportLeave:c},{inViewport:l},u){const{root:f,margin:p,once:h,threshold:y}=o,[m,d]=_(e,r,i,l,s);u.inViewport=m;let v=!!i||!!a||!!c;h&&m&&(v=!1),n((()=>{if(!v||"undefined"==typeof IntersectionObserver)return;const e=new IntersectionObserver((([t])=>{d(t.isIntersecting);const e=t.isIntersecting?a:c;e&&e(t)}),{root:null==f?void 0:f.current,rootMargin:p,threshold:y});return e.observe(t.current),()=>e.disconnect()}),[i,a,c,f,p,y])}(l,L,U,i,k,E);const z=it(L,U,i,k);J(l,$,L,U,P,(t=>{A&&A(t),z&&z()}));const W=a(r,Object.assign({},M,F,R,{style:I.current,ref:l})),q=at.reduce(((t,e)=>(t[e]=void 0,i[e]?"string"==typeof i[e]&&E[e]&&(t[e]=i[e]):k[e]&&(t[e]=k[e]),t)),{}),B=c((()=>q),Object.values(q));return t.createElement(st.Provider,{value:B},W)}))}const at=["initial","style","hover","press","inViewport","exit"],ct=new Map,lt=new Proxy({},{get:(t,e)=>(ct.has(e)||ct.set(e,ot(e)),ct.get(e))});export{lt as animated}; |
@@ -15,4 +15,6 @@ 'use strict'; | ||
| var animateNumber = require('../js/animate-number.cjs.js'); | ||
| var keyframes = require('./utils/keyframes.cjs.js'); | ||
| var style = require('./style.cjs.js'); | ||
| function animateStyle(element, name, keyframes, options = {}) { | ||
| function animateStyle(element, name, keyframesDefinition, options = {}) { | ||
| let { duration = 0.3, delay = 0, endDelay = 0, repeat = 0, easing: easing$1 = "ease", direction, offset, } = options; | ||
@@ -23,3 +25,5 @@ const data$1 = data.getAnimationData(element); | ||
| const valueIsTransform = transforms.isTransform(name); | ||
| keyframes = Array.isArray(keyframes) ? keyframes : [keyframes]; | ||
| keyframesDefinition = Array.isArray(keyframesDefinition) | ||
| ? keyframesDefinition | ||
| : [keyframesDefinition]; | ||
| /** | ||
@@ -37,14 +41,2 @@ * If this is an individual transform, we need to map its | ||
| /** | ||
| * Check if this is an animation pregenerator and generate keyframes | ||
| * if so. | ||
| */ | ||
| // if (isAnimationGenerator(easing)) { | ||
| // const generatedAnimation = easing.generate(keyframes) | ||
| // easing = "linear" | ||
| // if (generatedAnimation !== false) { | ||
| // keyframes = generatedAnimation.keyframes | ||
| // duration = generatedAnimation.duration | ||
| // } | ||
| // } | ||
| /** | ||
| * Get definition of value, this will be used to convert numerical | ||
@@ -72,2 +64,7 @@ * keyframes into the default value type. | ||
| /** | ||
| * Replace null values with the previous keyframe value, or read | ||
| * it from the DOM if it's the first keyframe. | ||
| */ | ||
| let keyframes$1 = keyframes.hydrateKeyframes(keyframesDefinition, element, name); | ||
| /** | ||
| * If we can animate this value with WAAPI, do so. Currently this only | ||
@@ -82,9 +79,9 @@ * feature detects CSS.registerProperty but could check WAAPI too. | ||
| if (definition) { | ||
| keyframes = keyframes.map((value) => typeof value === "number" ? definition.toDefaultUnit(value) : value); | ||
| keyframes$1 = keyframes$1.map((value) => typeof value === "number" ? definition.toDefaultUnit(value) : value); | ||
| } | ||
| if (!featureDetection.supports.partialKeyframes() && keyframes.length === 1) { | ||
| if (!featureDetection.supports.partialKeyframes() && keyframes$1.length === 1) { | ||
| const initialKeyframe = cssVar.isCssVar(name) | ||
| ? element.style.getPropertyValue(name) | ||
| : getComputedStyle(element)[name]; | ||
| keyframes.unshift(initialKeyframe); | ||
| keyframes$1.unshift(initialKeyframe); | ||
| } | ||
@@ -100,3 +97,3 @@ const animationOptions = { | ||
| const animation = element.animate({ | ||
| [name]: keyframes, | ||
| [name]: keyframes$1, | ||
| offset, | ||
@@ -115,10 +112,16 @@ easing: easing.isEasingList(easing$1) ? easing$1.map(easing.convertEasing) : undefined, | ||
| } | ||
| const target = keyframes[keyframes.length - 1]; | ||
| const target = keyframes$1[keyframes$1.length - 1]; | ||
| animation.finished.then(() => render(target)).catch(noop.noop); | ||
| return animation; | ||
| } | ||
| else if (valueIsTransform && keyframes.every(isNumber)) { | ||
| if (keyframes.length === 1) { | ||
| keyframes.unshift(parseFloat(getComputedStyle(element).getPropertyValue(name) || "0")); | ||
| else if (valueIsTransform && keyframes$1.every(isNumber)) { | ||
| if (keyframes$1.length === 1) { | ||
| keyframes$1.unshift(style.style.get(element, name) || (definition === null || definition === void 0 ? void 0 : definition.initialValue) || 0); | ||
| } | ||
| /** | ||
| * Transform styles are currently only accepted as numbers of | ||
| * their default value type, so here we loop through and map | ||
| * them to numbers. | ||
| */ | ||
| keyframes$1 = keyframes$1.map((value) => typeof value === "string" ? parseFloat(value) : value); | ||
| if (definition) { | ||
@@ -128,6 +131,6 @@ const applyStyle = render; | ||
| } | ||
| return animateNumber.animateNumber(render, keyframes, options); | ||
| return animateNumber.animateNumber(render, keyframes$1, options); | ||
| } | ||
| else { | ||
| const target = keyframes[keyframes.length - 1]; | ||
| const target = keyframes$1[keyframes$1.length - 1]; | ||
| render(definition && typeof target === "number" | ||
@@ -134,0 +137,0 @@ ? definition.toDefaultUnit(target) |
@@ -11,4 +11,6 @@ import { getAnimationData } from './data.es.js'; | ||
| import { animateNumber } from '../js/animate-number.es.js'; | ||
| import { hydrateKeyframes } from './utils/keyframes.es.js'; | ||
| import { style } from './style.es.js'; | ||
| function animateStyle(element, name, keyframes, options = {}) { | ||
| function animateStyle(element, name, keyframesDefinition, options = {}) { | ||
| let { duration = 0.3, delay = 0, endDelay = 0, repeat = 0, easing = "ease", direction, offset, } = options; | ||
@@ -19,3 +21,5 @@ const data = getAnimationData(element); | ||
| const valueIsTransform = isTransform(name); | ||
| keyframes = Array.isArray(keyframes) ? keyframes : [keyframes]; | ||
| keyframesDefinition = Array.isArray(keyframesDefinition) | ||
| ? keyframesDefinition | ||
| : [keyframesDefinition]; | ||
| /** | ||
@@ -33,14 +37,2 @@ * If this is an individual transform, we need to map its | ||
| /** | ||
| * Check if this is an animation pregenerator and generate keyframes | ||
| * if so. | ||
| */ | ||
| // if (isAnimationGenerator(easing)) { | ||
| // const generatedAnimation = easing.generate(keyframes) | ||
| // easing = "linear" | ||
| // if (generatedAnimation !== false) { | ||
| // keyframes = generatedAnimation.keyframes | ||
| // duration = generatedAnimation.duration | ||
| // } | ||
| // } | ||
| /** | ||
| * Get definition of value, this will be used to convert numerical | ||
@@ -68,2 +60,7 @@ * keyframes into the default value type. | ||
| /** | ||
| * Replace null values with the previous keyframe value, or read | ||
| * it from the DOM if it's the first keyframe. | ||
| */ | ||
| let keyframes = hydrateKeyframes(keyframesDefinition, element, name); | ||
| /** | ||
| * If we can animate this value with WAAPI, do so. Currently this only | ||
@@ -115,4 +112,10 @@ * feature detects CSS.registerProperty but could check WAAPI too. | ||
| if (keyframes.length === 1) { | ||
| keyframes.unshift(parseFloat(getComputedStyle(element).getPropertyValue(name) || "0")); | ||
| keyframes.unshift(style.get(element, name) || (definition === null || definition === void 0 ? void 0 : definition.initialValue) || 0); | ||
| } | ||
| /** | ||
| * Transform styles are currently only accepted as numbers of | ||
| * their default value type, so here we loop through and map | ||
| * them to numbers. | ||
| */ | ||
| keyframes = keyframes.map((value) => typeof value === "string" ? parseFloat(value) : value); | ||
| if (definition) { | ||
@@ -119,0 +122,0 @@ const applyStyle = render; |
@@ -10,3 +10,3 @@ 'use strict'; | ||
| function animate(elements, keyframes, _a) { | ||
| function animate(elements, keyframes, _a = {}) { | ||
| var { stagger = 0 } = _a, options$1 = tslib.__rest(_a, ["stagger"]); | ||
@@ -13,0 +13,0 @@ elements = resolveElements(elements); |
@@ -6,3 +6,3 @@ import { __rest } from 'tslib'; | ||
| function animate(elements, keyframes, _a) { | ||
| function animate(elements, keyframes, _a = {}) { | ||
| var { stagger = 0 } = _a, options = __rest(_a, ["stagger"]); | ||
@@ -9,0 +9,0 @@ elements = resolveElements(elements); |
@@ -6,5 +6,5 @@ 'use strict'; | ||
| function stopAnimation(animation) { | ||
| animation.commitStyles(); | ||
| // Suppress error thrown by WAAPI | ||
| try { | ||
| animation.commitStyles(); | ||
| animation.cancel(); | ||
@@ -11,0 +11,0 @@ } |
| function stopAnimation(animation) { | ||
| animation.commitStyles(); | ||
| // Suppress error thrown by WAAPI | ||
| try { | ||
| animation.commitStyles(); | ||
| animation.cancel(); | ||
@@ -6,0 +6,0 @@ } |
@@ -42,3 +42,3 @@ 'use strict'; | ||
| const ref = React.useRef(null); | ||
| const { options: defaultOptions, style, initial, hover, press, exit, inViewport, viewport, poses: poses$1, onStart, onComplete, inherit = true } = props, forwardProps = tslib.__rest(props | ||
| const { options: defaultOptions, style, initial, hover, press, exit, inViewport, viewport, poses: poses$1, onStart, onComplete, onViewportEnter, onViewportLeave, inherit = true } = props, forwardProps = tslib.__rest(props | ||
| /** | ||
@@ -48,3 +48,3 @@ * Track throughout the render which poses are considered active and should | ||
| */ | ||
| , ["options", "style", "initial", "hover", "press", "exit", "inViewport", "viewport", "poses", "onStart", "onComplete", "inherit"]); | ||
| , ["options", "style", "initial", "hover", "press", "exit", "inViewport", "viewport", "poses", "onStart", "onComplete", "onViewportEnter", "onViewportLeave", "inherit"]); | ||
| /** | ||
@@ -51,0 +51,0 @@ * Track throughout the render which poses are considered active and should |
@@ -17,3 +17,3 @@ import { __rest } from 'tslib'; | ||
| const ref = useRef(null); | ||
| const { options: defaultOptions, style, initial, hover, press, exit, inViewport, viewport, poses, onStart, onComplete, inherit = true } = props, forwardProps = __rest(props | ||
| const { options: defaultOptions, style, initial, hover, press, exit, inViewport, viewport, poses, onStart, onComplete, onViewportEnter, onViewportLeave, inherit = true } = props, forwardProps = __rest(props | ||
| /** | ||
@@ -23,3 +23,3 @@ * Track throughout the render which poses are considered active and should | ||
| */ | ||
| , ["options", "style", "initial", "hover", "press", "exit", "inViewport", "viewport", "poses", "onStart", "onComplete", "inherit"]); | ||
| , ["options", "style", "initial", "hover", "press", "exit", "inViewport", "viewport", "poses", "onStart", "onComplete", "onViewportEnter", "onViewportLeave", "inherit"]); | ||
| /** | ||
@@ -26,0 +26,0 @@ * Track throughout the render which poses are considered active and should |
| { | ||
| "name": "motion", | ||
| "version": "6.0.1-alpha.34", | ||
| "version": "6.0.1-alpha.35", | ||
| "description": "The Motion library for the web", | ||
@@ -126,3 +126,3 @@ "author": "Matt Perry", | ||
| "path": "./dist/size-animate-dom.js", | ||
| "maxSize": "3.1 kB" | ||
| "maxSize": "3.15 kB" | ||
| }, | ||
@@ -135,5 +135,5 @@ { | ||
| "path": "./dist/size-react.js", | ||
| "maxSize": "4.2 kB" | ||
| "maxSize": "4.3 kB" | ||
| } | ||
| ] | ||
| } |
@@ -1,2 +0,2 @@ | ||
| import { AnimationOptions, AnimationWithCommitStyles } from "./types"; | ||
| export declare function animateStyle(element: Element, name: string, keyframes: string | number | Array<string | number>, options?: AnimationOptions): AnimationWithCommitStyles | import("../js/animate-number").Animation | undefined; | ||
| import { AnimationOptions, AnimationWithCommitStyles, ValueKeyframesDefinition } from "./types"; | ||
| export declare function animateStyle(element: Element, name: string, keyframesDefinition: ValueKeyframesDefinition, options?: AnimationOptions): AnimationWithCommitStyles | import("../js/animate-number").Animation | undefined; |
@@ -1,6 +0,6 @@ | ||
| import { AnimationControls, AnimationOptionsWithOverrides, MotionKeyframes } from "./types"; | ||
| import { AnimationControls, AnimationOptionsWithOverrides, MotionKeyframesDefinition } from "./types"; | ||
| declare type AcceptedElements = Element | Element[] | NodeListOf<Element> | string; | ||
| export declare function animate(elements: AcceptedElements, keyframes: MotionKeyframes, { stagger, ...options }: AnimationOptionsWithOverrides & { | ||
| export declare function animate(elements: AcceptedElements, keyframes: MotionKeyframesDefinition, { stagger, ...options }?: AnimationOptionsWithOverrides & { | ||
| stagger?: number; | ||
| }): AnimationControls; | ||
| export {}; |
@@ -23,10 +23,19 @@ export declare type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>; | ||
| export declare type AnimationOptionsWithOverrides = StyleAnimationOptions & VariableAnimationOptions & AnimationOptions; | ||
| export declare type ValueKeyframes = string | number | Array<string | number>; | ||
| export declare type ValueKeyframe = string | number; | ||
| export declare type UnresolvedValueKeyframe = ValueKeyframe | null; | ||
| export declare type ValueKeyframesDefinition = ValueKeyframe | ValueKeyframe[] | UnresolvedValueKeyframe[]; | ||
| export declare type StyleKeyframes = { | ||
| [K in keyof CSSStyleDeclarationWithTransform]?: ValueKeyframes; | ||
| [K in keyof CSSStyleDeclarationWithTransform]?: ValueKeyframe | ValueKeyframe[]; | ||
| }; | ||
| export declare type VariableKeyframes = { | ||
| [key: `--${string}`]: ValueKeyframes; | ||
| [key: `--${string}`]: ValueKeyframe | ValueKeyframe[]; | ||
| }; | ||
| export declare type MotionKeyframes = StyleKeyframes & VariableKeyframes; | ||
| export declare type StyleKeyframesDefinition = { | ||
| [K in keyof CSSStyleDeclarationWithTransform]?: ValueKeyframesDefinition; | ||
| }; | ||
| export declare type VariableKeyframesDefinition = { | ||
| [key: `--${string}`]: ValueKeyframesDefinition; | ||
| }; | ||
| export declare type MotionKeyframesDefinition = StyleKeyframesDefinition & VariableKeyframesDefinition; | ||
| export declare type Easing = "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "steps-start" | "steps-end" | `steps(${number}, ${"start" | "end"})` | BezierDefinition; | ||
@@ -33,0 +42,0 @@ export declare type SpringOptions = { |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.91%
157546
- Number of package files
- increased by5.22%
121
- Lines of code
- increased by2.55%
3134
- Number of medium supply chain risk alerts
- decreased by-100%
0
No dependency changes