Socket
Socket
Sign inDemoInstall

@motionone/dom

Package Overview
Dependencies
Maintainers
2
Versions
54
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@motionone/dom - npm Package Compare versions

Comparing version 10.14.0 to 10.14.1

dist/animate/create-animate.cjs.js
dist/animate/create-animate.es.js
lib/animate/create-animate.js
lib/animate/create-animate.js.map
types/animate/create-animate.d.ts
types/animate/create-animate.d.ts.map

29

dist/animate/animate-style.cjs.js

@@ -7,3 +7,2 @@ 'use strict';

var cssVar = require('./utils/css-var.cjs.js');
var animation = require('@motionone/animation');
var utils = require('@motionone/utils');

@@ -22,6 +21,6 @@ var transforms = require('./utils/transforms.cjs.js');

}
function animateStyle(element, key, keyframesDefinition, options = {}) {
function animateStyle(element, key, keyframesDefinition, options = {}, AnimationPolyfill) {
const record = getDevToolsRecord();
const isRecording = options.record !== false && record;
let animation$1;
let animation;
let { duration = utils.defaults.duration, delay = utils.defaults.delay, endDelay = utils.defaults.endDelay, repeat = utils.defaults.repeat, easing: easing$1 = utils.defaults.easing, direction, offset, allowWebkitAcceleration = false, } = options;

@@ -125,3 +124,3 @@ const data$1 = data.getAnimationData(element);

};
animation$1 = element.animate({
animation = element.animate({
[name]: keyframes$1,

@@ -136,10 +135,10 @@ offset,

*/
if (!animation$1.finished) {
animation$1.finished = new Promise((resolve, reject) => {
animation$1.onfinish = resolve;
animation$1.oncancel = reject;
if (!animation.finished) {
animation.finished = new Promise((resolve, reject) => {
animation.onfinish = resolve;
animation.oncancel = reject;
});
}
const target = keyframes$1[keyframes$1.length - 1];
animation$1.finished
animation.finished
.then(() => {

@@ -149,3 +148,3 @@ // Apply styles to target

// Ensure fill modes don't persist
animation$1.cancel();
animation.cancel();
})

@@ -163,3 +162,3 @@ .catch(utils.noop);

if (!allowWebkitAcceleration)
animation$1.playbackRate = 1.000001;
animation.playbackRate = 1.000001;
/**

@@ -170,3 +169,3 @@ * If we can't animate the value natively then we can fallback to the numbers-only

}
else if (valueIsTransform) {
else if (AnimationPolyfill && valueIsTransform) {
/**

@@ -184,3 +183,3 @@ * If any keyframe is a string (because we measured it from the DOM), we need to convert

}
animation$1 = new animation.Animation((latest) => {
animation = new AnimationPolyfill((latest) => {
style.style.set(element, name, toUnit ? toUnit(latest) : latest);

@@ -205,4 +204,4 @@ }, keyframes$1, Object.assign(Object.assign({}, options), { duration,

}
motionValue.setAnimation(animation$1);
return animation$1;
motionValue.setAnimation(animation);
return animation;
};

@@ -209,0 +208,0 @@ }

7

dist/animate/animate-style.es.js
import { getAnimationData, getMotionValue } from './data.es.js';
import { isCssVar, registerCssVariable } from './utils/css-var.es.js';
import { Animation } from '@motionone/animation';
import { defaults, isEasingGenerator, isFunction, isEasingList, isNumber, time, noop } from '@motionone/utils';

@@ -17,3 +16,3 @@ import { isTransform, addTransformToElement, transformDefinitions } from './utils/transforms.es.js';

}
function animateStyle(element, key, keyframesDefinition, options = {}) {
function animateStyle(element, key, keyframesDefinition, options = {}, AnimationPolyfill) {
const record = getDevToolsRecord();

@@ -161,3 +160,3 @@ const isRecording = options.record !== false && record;

}
else if (valueIsTransform) {
else if (AnimationPolyfill && valueIsTransform) {
/**

@@ -175,3 +174,3 @@ * If any keyframe is a string (because we measured it from the DOM), we need to convert

}
animation = new Animation((latest) => {
animation = new AnimationPolyfill((latest) => {
style.set(element, name, toUnit ? toUnit(latest) : latest);

@@ -178,0 +177,0 @@ }, keyframes, Object.assign(Object.assign({}, options), { duration,

36

dist/animate/index.cjs.js

@@ -5,37 +5,7 @@ 'use strict';

var animateStyle = require('./animate-style.cjs.js');
var options = require('./utils/options.cjs.js');
var resolveElements = require('../utils/resolve-elements.cjs.js');
var controls = require('./utils/controls.cjs.js');
var stagger = require('../utils/stagger.cjs.js');
var animation = require('@motionone/animation');
var createAnimate = require('./create-animate.cjs.js');
function animate(elements, keyframes, options$1 = {}) {
elements = resolveElements.resolveElements(elements);
const numElements = elements.length;
/**
* Create and start new animations
*/
const animationFactories = [];
for (let i = 0; i < numElements; i++) {
const element = elements[i];
for (const key in keyframes) {
const valueOptions = options.getOptions(options$1, key);
valueOptions.delay = stagger.resolveOption(valueOptions.delay, i, numElements);
const animation = animateStyle.animateStyle(element, key, keyframes[key], valueOptions);
animationFactories.push(animation);
}
}
return controls.withControls(animationFactories, options$1,
/**
* TODO:
* If easing is set to spring or glide, duration will be dynamically
* generated. Ideally we would dynamically generate this from
* animation.effect.getComputedTiming().duration but this isn't
* supported in iOS13 or our number polyfill. Perhaps it's possible
* to Proxy animations returned from animateStyle that has duration
* as a getter.
*/
options$1.duration);
}
const animate = createAnimate.createAnimate(animation.Animation);
exports.animate = animate;

36

dist/animate/index.es.js

@@ -1,36 +0,6 @@

import { animateStyle } from './animate-style.es.js';
import { getOptions } from './utils/options.es.js';
import { resolveElements } from '../utils/resolve-elements.es.js';
import { withControls } from './utils/controls.es.js';
import { resolveOption } from '../utils/stagger.es.js';
import { Animation } from '@motionone/animation';
import { createAnimate } from './create-animate.es.js';
function animate(elements, keyframes, options = {}) {
elements = resolveElements(elements);
const numElements = elements.length;
/**
* Create and start new animations
*/
const animationFactories = [];
for (let i = 0; i < numElements; i++) {
const element = elements[i];
for (const key in keyframes) {
const valueOptions = getOptions(options, key);
valueOptions.delay = resolveOption(valueOptions.delay, i, numElements);
const animation = animateStyle(element, key, keyframes[key], valueOptions);
animationFactories.push(animation);
}
}
return withControls(animationFactories, options,
/**
* TODO:
* If easing is set to spring or glide, duration will be dynamically
* generated. Ideally we would dynamically generate this from
* animation.effect.getComputedTiming().duration but this isn't
* supported in iOS13 or our number polyfill. Perhaps it's possible
* to Proxy animations returned from animateStyle that has duration
* as a getter.
*/
options.duration);
}
const animate = createAnimate(Animation);
export { animate };

2

dist/index.cjs.js

@@ -6,2 +6,3 @@ 'use strict';

var index = require('./animate/index.cjs.js');
var createAnimate = require('./animate/create-animate.cjs.js');
var animateStyle = require('./animate/animate-style.cjs.js');

@@ -27,2 +28,3 @@ var index$1 = require('./timeline/index.cjs.js');

exports.animate = index.animate;
exports.createAnimate = createAnimate.createAnimate;
exports.animateStyle = animateStyle.animateStyle;

@@ -29,0 +31,0 @@ exports.timeline = index$1.timeline;

1

dist/index.es.js
export { animate } from './animate/index.es.js';
export { createAnimate } from './animate/create-animate.es.js';
export { animateStyle } from './animate/animate-style.es.js';

@@ -3,0 +4,0 @@ export { timeline } from './timeline/index.es.js';

2

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=()=>{},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};
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 n(t){return e.has(t)||e.set(t,{transforms:[],values:new Map}),e.get(t)}const a={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},i=t=>"number"==typeof t,r=t=>Array.isArray(t)&&!i(t[0]),o=()=>{},s=t=>t,l=t=>"object"==typeof t&&Boolean(t.createAnimation),c=t=>"function"==typeof t,u=t=>1e3*t,f=["","X","Y","Z"],y={x:"translateX",y:"translateY",z:"translateZ"},d={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},p={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:d,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:s},skew:d},h=new Map,g=t=>`--motion-${t}`,m=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{f.forEach((e=>{m.push(t+e),h.set(g(t+e),p[t])}))}));const v=(t,e)=>m.indexOf(t)-m.indexOf(e),w=new Set(m),O=t=>w.has(t),b=t=>t.sort(v).reduce(x,"").trim(),x=(t,e)=>`${t} ${e}(var(${g(e)}))`,A=t=>t.startsWith("--"),D=new Set;const S=(t,e)=>document.createElement("div").animate(t,e),E={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]},{duration:.001}).finished),linearEasing:()=>{try{S({opacity:0},{easing:"linear(0, 1)"})}catch(t){return!1}return!0}},P={},V={};for(const t in E)V[t]=()=>(void 0===P[t]&&(P[t]=E[t]()),P[t]);const $=(t,e)=>c(t)?V.linearEasing()?`linear(${((t,e)=>{let n="";const a=Math.round(e/.015);for(let e=0;e<a;e++)n+=t((o=e,(r=a-1)-(i=0)==0?1:(o-i)/(r-i)))+", ";var i,r,o;return n.substring(0,n.length-2)})(t,e)})`:a.easing:(t=>Array.isArray(t)&&i(t[0]))(t)?k(t):t,k=([t,e,n,a])=>`cubic-bezier(${t}, ${e}, ${n}, ${a})`;function U(t){return y[t]&&(t=y[t]),O(t)?g(t):t}const j=(t,e)=>{e=U(e);let n=A(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!n&&0!==n){const t=h.get(e);t&&(n=t.initialValue)}return n},C=(t,e,n)=>{e=U(e),A(e)?t.style.setProperty(e,n):t.style[e]=n};function M(e,f,d,p={},g){const m=window.__MOTION_DEV_TOOLS_RECORD,v=!1!==p.record&&m;let w,{duration:x=a.duration,delay:S=a.delay,endDelay:E=a.endDelay,repeat:P=a.repeat,easing:k=a.easing,direction:M,offset:R,allowWebkitAcceleration:_=!1}=p;const z=n(e),W=O(f);let B=V.waapi();W&&((t,e)=>{y[e]&&(e=y[e]);const{transforms:a}=n(t);var i,r;r=e,-1===(i=a).indexOf(r)&&i.push(r),t.style.transform=b(a)})(e,f);const F=U(f),K=function(e,n){return e.has(n)||e.set(n,new t),e.get(n)}(z.values,F),T=h.get(F);return function(t,e=!0){if(t&&"finished"!==t.playState)try{t.stop?t.stop():(e&&t.commitStyles(),t.cancel())}catch(t){}}(K.animation,!(l(k)&&K.generator)&&!1!==p.record),()=>{const t=()=>{var t,n;return null!==(n=null!==(t=j(e,F))&&void 0!==t?t:null==T?void 0:T.initialValue)&&void 0!==n?n:0};let n=function(t,e){for(let n=0;n<t.length;n++)null===t[n]&&(t[n]=n?t[n-1]:e());return t}((t=>Array.isArray(t)?t:[t])(d),t);const a=function(t,e){var n;let a=(null==e?void 0:e.toDefaultUnit)||s;const i=t[t.length-1];if("string"==typeof i){const t=(null===(n=i.match(/(-?[\d.]+)([a-z%]*)/))||void 0===n?void 0:n[2])||"";t&&(a=e=>e+t)}return a}(n,T);if(l(k)){const e=k.createAnimation(n,"opacity"!==f,t,F,K);k=e.easing,n=e.keyframes||n,x=e.duration||x}if(A(F)&&(V.cssRegisterProperty()?function(t){if(!D.has(t)){D.add(t);try{const{syntax:e,initialValue:n}=h.has(t)?h.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}(F):B=!1),W&&!V.linearEasing()&&(c(k)||r(k)&&k.some(c))&&(B=!1),B){T&&(n=n.map((t=>i(t)?T.toDefaultUnit(t):t))),1!==n.length||V.partialKeyframes()&&!v||n.unshift(t());const a={delay:u(S),duration:u(x),endDelay:u(E),easing:r(k)?void 0:$(k,x),direction:M,iterations:P+1,fill:"both"};w=e.animate({[F]:n,offset:R,easing:r(k)?k.map((t=>$(t,x))):void 0},a),w.finished||(w.finished=new Promise(((t,e)=>{w.onfinish=t,w.oncancel=e})));const s=n[n.length-1];w.finished.then((()=>{C(e,F,s),w.cancel()})).catch(o),_||(w.playbackRate=1.000001)}else if(g&&W)n=n.map((t=>"string"==typeof t?parseFloat(t):t)),1===n.length&&n.unshift(parseFloat(t())),w=new g((t=>{C(e,F,a?a(t):t)}),n,Object.assign(Object.assign({},p),{duration:x,easing:k}));else{const t=n[n.length-1];C(e,F,T&&i(t)?T.toDefaultUnit(t):t)}return v&&m(e,f,n,{duration:x,delay:S,easing:k,repeat:P,offset:R},"motion-one"),K.setAnimation(w),w}}export{M as animateStyle};

2

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

2

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=>"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};
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={},o){const u=window.__MOTION_DEV_TOOLS_RECORD,h=!1!==r.record&&u;let f,{duration:d=i.duration,delay:v=i.delay,endDelay:O=i.endDelay,repeat:b=i.repeat,easing:w=i.easing,direction:S,offset:T,allowWebkitAcceleration:x=!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(w)&&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(w)){const t=w.createAnimation(A,"opacity"!==e,i,P,R);w=t.easing,A=t.keyframes||A,d=t.duration||d}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(w)||s(w)&&w.some(m))&&(k=!1),k){$&&(A=A.map((t=>a(t)?$.toDefaultUnit(t):t))),1!==A.length||X.partialKeyframes()&&!h||A.unshift(i());const e={delay:g(v),duration:g(d),endDelay:g(O),easing:s(w)?void 0:Y(w,d),direction:S,iterations:b+1,fill:"both"};f=t.animate({[P]:A,offset:T,easing:s(w)?w.map((t=>Y(t,d))):void 0},e),f.finished||(f.finished=new Promise(((t,e)=>{f.onfinish=t,f.oncancel=e})));const n=A[A.length-1];f.finished.then((()=>{J(t,P,n),f.cancel()})).catch(l),x||(f.playbackRate=1.000001)}else if(o&&M)A=A.map((t=>"string"==typeof t?parseFloat(t):t)),1===A.length&&A.unshift(parseFloat(i())),f=new o((e=>{J(t,P,D?D(e):e)}),A,Object.assign(Object.assign({},r),{duration:d,easing:w}));else{const e=A[A.length-1];J(t,P,$&&a(e)?$.toDefaultUnit(e):e)}return h&&u(t,e,A,{duration:d,delay:v,easing:w,repeat:b,offset:T},"motion-one"),R.setAnimation(f),f}}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,x))).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};

2

dist/size-webpack-animate.js

@@ -1,1 +0,1 @@

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

3

dist/state/index.cjs.js

@@ -18,2 +18,3 @@ 'use strict';

var events = require('./utils/events.cjs.js');
var animation = require('@motionone/animation');

@@ -115,3 +116,3 @@ const gestures = { inView: inView.inView, hover: hover.hover, press: press.press };

(_a = baseTarget[key]) !== null && _a !== void 0 ? _a : (baseTarget[key] = style.style.get(element, key));
animationFactories.push(animateStyle.animateStyle(element, key, target[key], animationOptions[key]));
animationFactories.push(animateStyle.animateStyle(element, key, target[key], animationOptions[key], animation.Animation));
}

@@ -118,0 +119,0 @@ });

3

dist/state/index.es.js

@@ -14,2 +14,3 @@ import { __rest } from 'tslib';

import { motionEvent } from './utils/events.es.js';
import { Animation } from '@motionone/animation';

@@ -111,3 +112,3 @@ const gestures = { inView, hover, press };

(_a = baseTarget[key]) !== null && _a !== void 0 ? _a : (baseTarget[key] = style.get(element, key));
animationFactories.push(animateStyle(element, key, target[key], animationOptions[key]));
animationFactories.push(animateStyle(element, key, target[key], animationOptions[key], Animation));
}

@@ -114,0 +115,0 @@ });

3

dist/timeline/index.cjs.js

@@ -17,2 +17,3 @@ 'use strict';

var sort = require('./utils/sort.cjs.js');
var animation = require('@motionone/animation');

@@ -26,3 +27,3 @@ function timeline(definition, options = {}) {

const animationFactories = animationDefinitions
.map((definition) => animateStyle.animateStyle(...definition))
.map((definition) => animateStyle.animateStyle(...definition, animation.Animation))
.filter(Boolean);

@@ -29,0 +30,0 @@ return controls.withControls(animationFactories, options,

3

dist/timeline/index.es.js

@@ -13,2 +13,3 @@ import { __rest } from 'tslib';

import { compareByTime } from './utils/sort.es.js';
import { Animation } from '@motionone/animation';

@@ -22,3 +23,3 @@ function timeline(definition, options = {}) {

const animationFactories = animationDefinitions
.map((definition) => animateStyle(...definition))
.map((definition) => animateStyle(...definition, Animation))
.filter(Boolean);

@@ -25,0 +26,0 @@ return withControls(animationFactories, options,

7

lib/animate/animate-style.js
import { getAnimationData, getMotionValue } from "./data";
import { isCssVar, registerCssVariable } from "./utils/css-var";
import { Animation } from "@motionone/animation";
import { defaults, time, isFunction, isEasingGenerator, isEasingList, } from "@motionone/utils";

@@ -17,3 +16,3 @@ import { addTransformToElement, isTransform, transformDefinitions, } from "./utils/transforms";

}
export function animateStyle(element, key, keyframesDefinition, options = {}) {
export function animateStyle(element, key, keyframesDefinition, options = {}, AnimationPolyfill) {
const record = getDevToolsRecord();

@@ -161,3 +160,3 @@ const isRecording = options.record !== false && record;

}
else if (valueIsTransform) {
else if (AnimationPolyfill && valueIsTransform) {
/**

@@ -175,3 +174,3 @@ * If any keyframe is a string (because we measured it from the DOM), we need to convert

}
animation = new Animation((latest) => {
animation = new AnimationPolyfill((latest) => {
style.set(element, name, toUnit ? toUnit(latest) : latest);

@@ -178,0 +177,0 @@ }, keyframes, Object.assign(Object.assign({}, options), { duration,

36

lib/animate/index.js

@@ -1,34 +0,4 @@

import { animateStyle } from "./animate-style";
import { getOptions } from "./utils/options";
import { resolveElements } from "../utils/resolve-elements";
import { withControls } from "./utils/controls";
import { resolveOption } from "../utils/stagger";
export function animate(elements, keyframes, options = {}) {
elements = resolveElements(elements);
const numElements = elements.length;
/**
* Create and start new animations
*/
const animationFactories = [];
for (let i = 0; i < numElements; i++) {
const element = elements[i];
for (const key in keyframes) {
const valueOptions = getOptions(options, key);
valueOptions.delay = resolveOption(valueOptions.delay, i, numElements);
const animation = animateStyle(element, key, keyframes[key], valueOptions);
animationFactories.push(animation);
}
}
return withControls(animationFactories, options,
/**
* TODO:
* If easing is set to spring or glide, duration will be dynamically
* generated. Ideally we would dynamically generate this from
* animation.effect.getComputedTiming().duration but this isn't
* supported in iOS13 or our number polyfill. Perhaps it's possible
* to Proxy animations returned from animateStyle that has duration
* as a getter.
*/
options.duration);
}
import { Animation } from "@motionone/animation";
import { createAnimate } from "./create-animate";
export const animate = createAnimate(Animation);
//# sourceMappingURL=index.js.map

1

lib/index.js
export { animate } from "./animate/index";
export { createAnimate } from "./animate/create-animate";
export { animateStyle } from "./animate/animate-style";

@@ -3,0 +4,0 @@ export { timeline } from "./timeline/index";

3

lib/state/index.js

@@ -14,2 +14,3 @@ import { __rest } from "tslib";

import { motionEvent } from "./utils/events";
import { Animation } from "@motionone/animation";
const gestures = { inView, hover, press };

@@ -117,3 +118,3 @@ /**

(_a = baseTarget[key]) !== null && _a !== void 0 ? _a : (baseTarget[key] = style.get(element, key));
animationFactories.push(animateStyle(element, key, target[key], animationOptions[key]));
animationFactories.push(animateStyle(element, key, target[key], animationOptions[key], Animation));
}

@@ -120,0 +121,0 @@ });

3

lib/timeline/index.js

@@ -13,2 +13,3 @@ import { __rest } from "tslib";

import { compareByTime } from "./utils/sort";
import { Animation } from "@motionone/animation";
export function timeline(definition, options = {}) {

@@ -21,3 +22,3 @@ var _a;

const animationFactories = animationDefinitions
.map((definition) => animateStyle(...definition))
.map((definition) => animateStyle(...definition, Animation))
.filter(Boolean);

@@ -24,0 +25,0 @@ return withControls(animationFactories, options,

4

package.json
{
"name": "@motionone/dom",
"version": "10.14.0",
"version": "10.14.1",
"description": "A tiny, performant animation library for the DOM",

@@ -59,3 +59,3 @@ "license": "MIT",

],
"gitHead": "4c59ce9e5539899722427bd00f857dc80f29fc09"
"gitHead": "24292336e5c7f797e9fbfa6e42160337968a9afe"
}

3

types/animate/animate-style.d.ts
import type { AnimationFactory, ValueKeyframesDefinition } from "./types";
import type { Animation } from "@motionone/animation";
import { AnimationOptions } from "@motionone/types";
export declare function animateStyle(element: Element, key: string, keyframesDefinition: ValueKeyframesDefinition, options?: AnimationOptions): AnimationFactory;
export declare function animateStyle(element: Element, key: string, keyframesDefinition: ValueKeyframesDefinition, options?: AnimationOptions, AnimationPolyfill?: typeof Animation): AnimationFactory;
//# sourceMappingURL=animate-style.d.ts.map

5

types/animate/index.d.ts

@@ -1,5 +0,2 @@

import type { AnimationOptionsWithOverrides, MotionKeyframesDefinition } from "./types";
import { AnimationControls } from "@motionone/types";
import { ElementOrSelector } from "../types";
export declare function animate(elements: ElementOrSelector, keyframes: MotionKeyframesDefinition, options?: AnimationOptionsWithOverrides): AnimationControls;
export declare const animate: (elements: import("..").ElementOrSelector, keyframes: import("./types").MotionKeyframesDefinition, options?: import("./types").AnimationOptionsWithOverrides) => import("@motionone/types").AnimationControls;
//# sourceMappingURL=index.d.ts.map

1

types/index.d.ts
export { animate } from "./animate/index";
export { createAnimate } from "./animate/create-animate";
export { animateStyle } from "./animate/animate-style";

@@ -3,0 +4,0 @@ export { timeline } from "./timeline/index";

lib/animate/animate-style.js.map

Sorry, the diff of this file is not supported yet

lib/animate/index.js.map

Sorry, the diff of this file is not supported yet

lib/index.js.map

Sorry, the diff of this file is not supported yet

lib/state/index.js.map

Sorry, the diff of this file is not supported yet

lib/timeline/index.js.map

Sorry, the diff of this file is not supported yet

types/animate/animate-style.d.ts.map

Sorry, the diff of this file is not supported yet

types/animate/index.d.ts.map

Sorry, the diff of this file is not supported yet

types/index.d.ts.map

Sorry, the diff of this file is not supported yet

types/state/index.d.ts.map

Sorry, the diff of this file is not supported yet

types/timeline/index.d.ts.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc