@wix/motion 2.1.8 → 2.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -0
- package/dist/cjs/motion.js +1 -1
- package/dist/cjs/motion.js.map +1 -1
- package/dist/es/motion.js +666 -512
- package/dist/es/motion.js.map +1 -1
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/dist/types/Sequence.d.ts +1 -0
- package/dist/types/Sequence.d.ts.map +1 -1
- package/dist/types/api/common.d.ts.map +1 -1
- package/dist/types/api/cssAnimations.d.ts +3 -3
- package/dist/types/api/cssAnimations.d.ts.map +1 -1
- package/dist/types/easings.d.ts +32 -0
- package/dist/types/easings.d.ts.map +1 -1
- package/dist/types/types.d.ts +1 -0
- package/dist/types/types.d.ts.map +1 -1
- package/dist/types/utils.d.ts +22 -1
- package/dist/types/utils.d.ts.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -148,6 +148,10 @@ const sequence = getSequence(
|
|
|
148
148
|
sequence.play();
|
|
149
149
|
```
|
|
150
150
|
|
|
151
|
+
Add a `sequenceId` to stagger CSS-rendered animations too: `getCSSAnimation()` accepts the same options and
|
|
152
|
+
emits a single rule whose delay is a `calc()` over `--motion-<sequenceId>-index`, which the `Sequence` then
|
|
153
|
+
sets per element. See [CSS-Driven Stagger](./docs/api/sequence.md#css-driven-stagger).
|
|
154
|
+
|
|
151
155
|
See [`docs/api/get-sequence.md`](https://github.com/wix/interact/blob/master/packages/motion/docs/api/get-sequence.md) for the full stagger model.
|
|
152
156
|
|
|
153
157
|
## ViewTimeline and Polyfills
|
package/dist/cjs/motion.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class w{animations;options;ready;isCSS;longestAnimation;constructor(t,n){this.animations=t,this.options=n,this.ready=n?.measured||Promise.resolve(),this.isCSS=t[0]instanceof CSSAnimation,this.longestAnimation=this._getAnimationWithLongestEndTime()}_getAnimationWithLongestEndTime(){return this.animations.reduce((t,n)=>{const i=t.effect?.getComputedTiming().endTime??0,s=n.effect?.getComputedTiming().endTime??0;return i>s?t:n},this.animations[0])}getProgress(){return this.longestAnimation?.effect?.getComputedTiming().progress||0}async play(t){await this.ready;for(const n of this.animations)n.play();await Promise.all(this.animations.map(n=>n.ready)),t&&t()}pause(){for(const t of this.animations)t.pause()}async reverse(t){await this.ready;for(const n of this.animations)n.reverse();await Promise.all(this.animations.map(n=>n.ready)),t&&t()}progress(t){for(const n of this.animations){const{delay:i,duration:s,iterations:r}=n.effect.getTiming(),c=(Number.isFinite(s)?s:0)*(Number.isFinite(r)?r:1);n.currentTime=((i||0)+c)*t}}cancel(){for(const t of this.animations)t.cancel()}setPlaybackRate(t){for(const n of this.animations)n.playbackRate=t}async onFinish(t){try{await Promise.all(this.animations.map(i=>i.finished));const n=this.animations[0];if(n&&!this.isCSS){const i=n.effect?.target;if(i){const s=this.options?.effectId||n.id,r=new CustomEvent("animationend",{detail:{effectId:s}});i.dispatchEvent(r)}}t()}catch(n){console.warn("animation was interrupted - aborting onFinish callback - ",n)}}async onAbort(t){try{await Promise.all(this.animations.map(n=>n.finished))}catch(n){if(n.name==="AbortError"){const i=this.animations[0];if(i&&!this.isCSS){const s=i.effect?.target;if(s){const r=new Event("animationcancel");s.dispatchEvent(r)}}t()}}}get finished(){return Promise.all(this.animations.map(t=>t.finished))}get playState(){return this.animations.some(t=>t.playState==="running")?"running":this.animations[0]?.playState}hasAnimationName(t){return this.animations.some(n=>n.animationName===t)}hasAnimationId(t){return this.animations.some(n=>n.id===t)}getTimingOptions(){return this.animations.map(t=>{const n=t.effect?.getTiming(),i=n?.delay??0,s=Number(n?.duration)||0,r=n?.iterations??1;return{delay:i,duration:s,iterations:r}})}}const P=e=>e,L=e=>1-Math.cos(e*Math.PI/2),j=e=>Math.sin(e*Math.PI/2),W=e=>-(Math.cos(Math.PI*e)-1)/2,H=e=>e**2,V=e=>1-(1-e)**2,B=e=>e<.5?2*e**2:1-(-2*e+2)**2/2,K=e=>e**3,J=e=>1-(1-e)**3,U=e=>e<.5?4*e**3:1-(-2*e+2)**3/2,X=e=>e**4,Y=e=>1-(1-e)**4,Q=e=>e<.5?8*e**4:1-(-2*e+2)**4/2,Z=e=>e**5,tt=e=>1-(1-e)**5,et=e=>e<.5?16*e**5:1-(-2*e+2)**5/2,nt=e=>e===0?0:2**(10*e-10),it=e=>e===1?1:1-2**(-10*e),st=e=>e===0?0:e===1?1:e<.5?2**(20*e-10)/2:(2-2**(-20*e+10))/2,rt=e=>1-Math.sqrt(1-e**2),ot=e=>Math.sqrt(1-(e-1)**2),at=e=>e<.5?(1-Math.sqrt(1-4*e**2))/2:(Math.sqrt(-(2*e-3)*(2*e-1))+1)/2,ct=e=>2.70158*e**3-1.70158*e**2,ut=e=>1+2.70158*(e-1)**3+1.70158*(e-1)**2,ft=(e,t=1.70158*1.525)=>e<.5?(2*e)**2*((t+1)*2*e-t)/2:((2*e-2)**2*((t+1)*(e*2-2)+t)+2)/2,S={linear:P,sineIn:L,sineOut:j,sineInOut:W,quadIn:H,quadOut:V,quadInOut:B,cubicIn:K,cubicOut:J,cubicInOut:U,quartIn:X,quartOut:Y,quartInOut:Q,quintIn:Z,quintOut:tt,quintInOut:et,expoIn:nt,expoOut:it,expoInOut:st,circIn:rt,circOut:ot,circInOut:at,backIn:ct,backOut:ut,backInOut:ft},q={linear:"linear",ease:"ease",easeIn:"ease-in",easeOut:"ease-out",easeInOut:"ease-in-out",sineIn:"cubic-bezier(0.47, 0, 0.745, 0.715)",sineOut:"cubic-bezier(0.39, 0.575, 0.565, 1)",sineInOut:"cubic-bezier(0.445, 0.05, 0.55, 0.95)",quadIn:"cubic-bezier(0.55, 0.085, 0.68, 0.53)",quadOut:"cubic-bezier(0.25, 0.46, 0.45, 0.94)",quadInOut:"cubic-bezier(0.455, 0.03, 0.515, 0.955)",cubicIn:"cubic-bezier(0.55, 0.055, 0.675, 0.19)",cubicOut:"cubic-bezier(0.215, 0.61, 0.355, 1)",cubicInOut:"cubic-bezier(0.645, 0.045, 0.355, 1)",quartIn:"cubic-bezier(0.895, 0.03, 0.685, 0.22)",quartOut:"cubic-bezier(0.165, 0.84, 0.44, 1)",quartInOut:"cubic-bezier(0.77, 0, 0.175, 1)",quintIn:"cubic-bezier(0.755, 0.05, 0.855, 0.06)",quintOut:"cubic-bezier(0.23, 1, 0.32, 1)",quintInOut:"cubic-bezier(0.86, 0, 0.07, 1)",expoIn:"cubic-bezier(0.95, 0.05, 0.795, 0.035)",expoOut:"cubic-bezier(0.19, 1, 0.22, 1)",expoInOut:"cubic-bezier(1, 0, 0, 1)",circIn:"cubic-bezier(0.6, 0.04, 0.98, 0.335)",circOut:"cubic-bezier(0.075, 0.82, 0.165, 1)",circInOut:"cubic-bezier(0.785, 0.135, 0.15, 0.86)",backIn:"cubic-bezier(0.6, -0.28, 0.735, 0.045)",backOut:"cubic-bezier(0.175, 0.885, 0.32, 1.275)",backInOut:"cubic-bezier(0.68, -0.55, 0.265, 1.55)"};function mt(e){return e==="percentage"?"%":e||"px"}function lt(e){return e?q[e]||e:q.linear}function Ot(e,t,n,i){const s=3*e,r=3*(n-e)-s,c=1-s-r,a=3*t,m=3*(i-t)-a,l=1-a-m,o=h=>((c*h+r)*h+s)*h,u=h=>((l*h+m)*h+a)*h,f=h=>(3*c*h+2*r)*h+s;function p(h){let d=h;for(let b=0;b<8;b++){const y=o(d)-h;if(Math.abs(y)<1e-7)return d;const I=f(d);if(Math.abs(I)<1e-6)break;d-=y/I}let v=0,g=1;for(d=(v+g)/2;g-v>1e-7;){const b=o(d);if(Math.abs(b-h)<1e-7)return d;h>b?v=d:g=d,d=(v+g)/2}return d}return h=>h<=0?0:h>=1?1:u(p(h))}function _t(e){const t=e.match(/^cubic-bezier\(\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*\)$/);if(!t)return;const n=parseFloat(t[1]),i=parseFloat(t[2]),s=parseFloat(t[3]),r=parseFloat(t[4]);if(![n,i,s,r].some(isNaN))return Ot(n,i,s,r)}function wt(e){const t=e.match(/^linear\((.+)\)$/);if(!t)return;const n=t[1].split(",").map(c=>c.trim()).filter(Boolean);if(n.length===0)return;const i=[];for(const c of n){const a=c.split(/\s+/),m=parseFloat(a[0]);if(isNaN(m))return;const l=[];for(let o=1;o<a.length;o++)if(a[o].endsWith("%")){const u=parseFloat(a[o])/100;if(isNaN(u))return;l.push(u)}l.length===0?i.push({output:m,pos:null}):l.length===1?i.push({output:m,pos:l[0]}):(i.push({output:m,pos:l[0]}),i.push({output:m,pos:l[1]}))}if(i.length===0)return;i[0].pos===null&&(i[0].pos=0),i[i.length-1].pos===null&&(i[i.length-1].pos=1);let s=0;for(;s<i.length;)if(i[s].pos===null){const c=s-1;let a=s;for(;a<i.length&&i[a].pos===null;)a++;const m=i[c].pos,l=i[a].pos,o=a-c;for(let u=c+1;u<a;u++)i[u].pos=m+(l-m)*(u-c)/o;s=a+1}else s++;for(let c=1;c<i.length;c++)i[c].pos<i[c-1].pos&&(i[c].pos=i[c-1].pos);const r=i;return c=>{if(c<=r[0].pos)return r[0].output;const a=r[r.length-1];if(c>=a.pos)return a.output;let m=0,l=r.length-1;for(;m<l-1;){const f=m+l>>>1;r[f].pos<=c?m=f:l=f}const o=r[m],u=r[l];return u.pos===o.pos?u.output:o.output+(u.output-o.output)*(c-o.pos)/(u.pos-o.pos)}}function C(e){if(!e)return;const t=S[e];return t||(_t(e)??wt(e)??S.linear)}class At extends w{animationGroups;delay;offset;offsetEasing;timingOptions;constructor(t,n={}){const i=t.flatMap(s=>[...s.animations]);super(i),this.animationGroups=t,this.delay=n.delay??0,this.offset=n.offset??0,this.offsetEasing=typeof n.offsetEasing=="function"?n.offsetEasing:C(n.offsetEasing)??P,this.timingOptions=this.animationGroups.map(s=>s.getTimingOptions().map(({delay:r,duration:c,iterations:a})=>({delay:r,duration:Number.isFinite(c)?c:0,iterations:Number.isFinite(a)?a:1}))),this.applyOffsets(),this.ready=Promise.all(t.map(s=>s.ready)).then(()=>{})}calculateOffsets(){const t=this.animationGroups.length;if(t<=1)return[0];const n=t-1;return Array.from({length:t},(i,s)=>this.offsetEasing(s/n)*n*this.offset|0)}applyOffsets(){if(this.animationGroups.length===0||this.animations.length===0)return;const t=this.calculateOffsets(),n=this.getSequenceActiveDuration(t);this.animationGroups.forEach((i,s)=>{i.animations.forEach((r,c)=>{const a=r.effect;if(!a)return;const{delay:m,duration:l,iterations:o}=this.timingOptions[s][c],u=m+t[s],f=n-(u+l*o);a.updateTiming({delay:u+this.delay,endDelay:f})})})}getSequenceActiveDuration(t){const n=[];for(let i=0;i<this.timingOptions.length;i++){const s=this.timingOptions[i].reduce((r,c)=>{if(!c)return r;const{delay:a,duration:m,iterations:l}=c;return Math.max(r,a+m*l)},0);n.push(t[i]+s)}return Math.max(...n)}addGroups(t){if(t.length===0)return;const n=[...t].sort((i,s)=>s.index-i.index);for(const{index:i,group:s}of n){const r=Math.min(i,this.animationGroups.length);this.animationGroups.splice(r,0,s),this.timingOptions.splice(r,0,s.getTimingOptions());const c=[...s.animations],a=this.animationGroups.slice(0,r).reduce((m,l)=>m+l.animations.length,0);this.animations.splice(a,0,...c)}this.applyOffsets(),this.ready=Promise.all(this.animationGroups.map(i=>i.ready)).then(()=>{})}removeGroups(t){const n=[],i=[],s=[];for(let r=0;r<this.animationGroups.length;r++)t(this.animationGroups[r])?n.push(this.animationGroups[r]):(i.push(this.animationGroups[r]),s.push(this.timingOptions[r]));if(n.length===0)return n;for(const r of n)r.cancel();return this.animationGroups=i,this.timingOptions=s,this.animations=i.flatMap(r=>[...r.animations]),this.applyOffsets(),this.ready=Promise.all(this.animationGroups.map(r=>r.ready)).then(()=>{}),n}async onFinish(t){try{await Promise.all(this.animationGroups.map(n=>n.finished)),t()}catch(n){console.warn("animation was interrupted - aborting onFinish callback - ",n)}}}class Tt{_animation;customEffect;progress;_tickCbId;_finishHandler;constructor(t,n,i,s){const r=new KeyframeEffect(n,[],{...i,composite:"add"}),{timeline:c}=s;this._animation=new Animation(r,c),this._tickCbId=null,this.progress=null,this.customEffect=a=>t(r.target,a),this._finishHandler=a=>{this.effect.target?.getAnimations().find(m=>m===this._animation)||this.cancel()},this.addEventListener("finish",this._finishHandler),this.addEventListener("remove",this._finishHandler)}_tick(){try{const t=this.effect?.getComputedTiming().progress??null;t!==this.progress&&(this.customEffect?.(t),this.progress=t),this._tickCbId=requestAnimationFrame(()=>{this._tick()})}catch(t){this._tickCbId=null,console.error(`failed to run customEffect! effectId: ${this.id}, error: ${t instanceof Error?t.message:t}`)}}get currentTime(){return this._animation.currentTime}set currentTime(t){this._animation.currentTime=t}get startTime(){return this._animation.startTime}set startTime(t){this._animation.startTime=t}get playbackRate(){return this._animation.playbackRate}set playbackRate(t){this._animation.playbackRate=t}get id(){return this._animation.id}set id(t){this._animation.id=t}get effect(){return this._animation.effect}set effect(t){this._animation.effect=t}get timeline(){return this._animation.timeline}set timeline(t){this._animation.timeline=t}get finished(){return this._animation.finished}get pending(){return this._animation.pending}get playState(){return this._animation.playState}get ready(){return this._animation.ready}get replaceState(){return this._animation.replaceState}get oncancel(){return this._animation.oncancel}set oncancel(t){this._animation.oncancel=t}get onfinish(){return this._animation.onfinish}set onfinish(t){this._animation.onfinish=t}get onremove(){return this._animation.onremove}set onremove(t){this._animation.onremove=t}play(){this._animation.play(),cancelAnimationFrame(this._tickCbId),this._tickCbId=requestAnimationFrame(()=>this._tick())}pause(){this._animation.pause(),cancelAnimationFrame(this._tickCbId),this._tickCbId=null}cancel(){this.removeEventListener("finish",this._finishHandler),this.removeEventListener("remove",this._finishHandler),this._animation.cancel(),this.customEffect(null),cancelAnimationFrame(this._tickCbId),this._tickCbId=null}commitStyles(){console.warn("CustomEffect animations do not support commitStyles method as they have no style to commit")}finish(){this._animation.finish()}persist(){this._animation.persist()}reverse(){this._animation.reverse()}updatePlaybackRate(t){this._animation.updatePlaybackRate(t)}addEventListener(t,n,i){this._animation.addEventListener(t,n,i)}removeEventListener(t,n,i){this._animation.removeEventListener(t,n,i)}dispatchEvent(t){return this._animation.dispatchEvent(t)}}function kt(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var A={exports:{}},N=A.exports,G;function St(){return G||(G=1,(function(e){(function(t){var n=function(){},i=t.requestAnimationFrame||t.webkitRequestAnimationFrame||t.mozRequestAnimationFrame||t.msRequestAnimationFrame||function(o){return setTimeout(o,16)};function s(){var o=this;o.reads=[],o.writes=[],o.raf=i.bind(t)}s.prototype={constructor:s,runTasks:function(o){for(var u;u=o.shift();)u()},measure:function(o,u){var f=u?o.bind(u):o;return this.reads.push(f),r(this),f},mutate:function(o,u){var f=u?o.bind(u):o;return this.writes.push(f),r(this),f},clear:function(o){return a(this.reads,o)||a(this.writes,o)},extend:function(o){if(typeof o!="object")throw new Error("expected object");var u=Object.create(this);return m(u,o),u.fastdom=this,u.initialize&&u.initialize(),u},catch:null};function r(o){o.scheduled||(o.scheduled=!0,o.raf(c.bind(null,o)))}function c(o){var u=o.writes,f=o.reads,p;try{n("flushing reads",f.length),o.runTasks(f),n("flushing writes",u.length),o.runTasks(u)}catch(h){p=h}if(o.scheduled=!1,(f.length||u.length)&&r(o),p)if(n("task errored",p.message),o.catch)o.catch(p);else throw p}function a(o,u){var f=o.indexOf(u);return!!~f&&!!o.splice(f,1)}function m(o,u){for(var f in u)u.hasOwnProperty(f)&&(o[f]=u[f])}var l=t.fastdom=t.fastdom||new s;e.exports=l})(typeof window<"u"?window:typeof N<"u"?N:globalThis)})(A)),A.exports}var qt=St();const E=kt(qt),$={};function $t(e){Object.assign($,e)}function Pt(e){return e in $?$[e]:(console.warn(`${e} not found in registry. Please make sure to import and register the preset.`),null)}function O(e,t){return e?(t||document).getElementById(e):null}function Ct(e,t){return e?.matches(`[data-motion-part~="${t}"]`)?e:e?.querySelector(`[data-motion-part~="${t}"]`)}function zt(e){const t=e.alternate?"alternate":"";return e.reversed?`${t?`${t}-`:""}reverse`:t||"normal"}function k(e){return`${e.value}${mt(e.unit)}`}function D(e,t,n){return`${e.name||"cover"} ${n&&e.offset.unit!=="percentage"?`calc(100% + ${k(e.offset)}${t?` + ${t}`:""})`:t?`calc(${k(e.offset)} + ${t})`:k(e.offset)}`}function ht(e){return{start:D(e.startOffset,e.startOffsetAdd),end:D(e.endOffset,e.endOffsetAdd,!0)}}function dt(e){return t=>E.measure(()=>t(e))}function pt(e){return t=>E.mutate(()=>t(e))}function _(e){if(e.namedEffect){const t=e.namedEffect.type;return typeof t=="string"?Pt(t):null}else if(e.keyframeEffect){const t=i=>{const{name:s,keyframes:r}=i.keyframeEffect;return[{...i,name:s,keyframes:r}]};return{web:t,style:t,getNames:i=>{const{effectId:s}=i,{name:r}=i.keyframeEffect,c=r||s;return c?[c]:[]}}}else if(e.customEffect)return t=>[{...t,keyframes:[]}];return null}function gt(e,t,n,i){return e.map((s,r)=>{const c={fill:s.fill,easing:lt(s.easing),iterations:s.iterations===0?1/0:s.iterations||1,composite:s.composite,direction:zt(s)};return z(t)?(c.duration=s.duration,c.delay=s.delay||0):t?.trigger==="view-progress"&&(i||window.ViewTimeline)?c.duration="auto":(c.duration=99.99,c.delay=.01),{effect:s,options:c,id:n&&`${n}-${r+1}`,part:s.part}})}function z(e){return!e||e.trigger!=="pointer-move"&&e.trigger!=="view-progress"}function R(e,t,n,i,s){if(e){if(z(i)&&(t.duration=t.duration||1,s?.reducedMotion))if(t.iterations===1||t.iterations==null)t={...t,duration:1};else return[];let r;return n instanceof HTMLElement&&(r={measure:dt(n),mutate:pt(n)}),e.web?e.web(t,r,s):e(t,r,s)}return[]}function x(e,t,n,i,s){const r=typeof e=="string"?O(e,s):e;if(n?.trigger==="pointer-move"&&!t.keyframeEffect){let f=t;t.customEffect&&(f={...t,namedEffect:{id:"",type:"CustomMouse"}});const p=_(f),h=R(p,t,r,n,i);return typeof h!="function"?null:h(r)}const c=_(t),a=R(c,t,r,n,i);if(!a||a.length===0)return null;const m=gt(a,n,t.effectId);let l;const o=n?.trigger==="view-progress";o&&window.ViewTimeline&&(l=new ViewTimeline({subject:n.element||O(n.componentId)}));const u=m.map(({effect:f,options:p,id:h,part:d})=>{const v=d?Ct(r,d):r,g=new KeyframeEffect(v||null,[],p);E.mutate(()=>{"timing"in f&&g.updateTiming(f.timing),g.setKeyframes(f.keyframes)});const b=o&&l?{timeline:l}:{},y=typeof f.customEffect=="function"?new Tt(f.customEffect,v||null,p,b):new Animation(g,b.timeline);if(o)if(l)E.mutate(()=>{const{start:I,end:T}=ht(f);y.rangeStart=I,y.rangeEnd=T,y.play()});else{const{startOffset:I,endOffset:T}=t;E.mutate(()=>{const F=f.startOffset||I,M=f.endOffset||T;Object.assign(y,{start:{name:F.name,offset:F.offset?.value,add:f.startOffsetAdd},end:{name:M.name,offset:M.offset?.value,add:f.endOffsetAdd}})})}return h&&(y.id=h),y});return new w(u,{...t,trigger:{...n||{}},measured:new Promise(f=>E.mutate(f))})}function xt(e,t){return e?`#${e}${t?`[data-motion-part~="${t}"]`:""}`:""}function Ft(e,t){const{duration:n,delay:i,iterations:s=1,fill:r,easing:c="linear",direction:a}=e.options,m=e.effect.name,l=n==="auto";return`${m} ${l?"auto":`${n}ms`}${l?" ":` ${i??0}ms `}${c}${r&&r!=="none"?` ${r}`:""} ${!s||s===1/0?"infinite":s}${a==="normal"?"":` ${a}`} ${t?"":"paused"}`}function Mt(e,t,n){return e?.style?(z(n)&&(t.duration=t.duration||1),e.style(t)):[]}function Nt(e,t,n){const i=_(t),s=Mt(i,t),r=gt(s,n,t.effectId,!0),c=n?.trigger==="view-progress";return r.map((a,m)=>{const{start:l,end:o}=c?ht(a.effect):{};return{target:xt(e,a.part),animation:Ft(a,c),composition:a.options.composite,custom:a.effect.custom,name:a.effect.name,keyframes:a.effect.keyframes,id:a.id&&`${a.id}-${m+1}`,animationTimeline:c?`--${n?.id}`:"",animationRange:l||o?`${l} ${o}`:""}})}function bt(e,t,n){const i=_(t),s=e instanceof HTMLElement?e:O(e);if(i&&i.prepare&&s){const r={measure:dt(s),mutate:pt(s)};i.prepare(t,r)}n&&E.mutate(n)}function yt(e,t){const n=_(t);if(!n)return null;if(!n.style)return t.effectId&&e?vt(e,t.effectId):null;const i=n.getNames(t),r=(typeof e=="string"?O(e):e)?.getAnimations(),c=r?.map(m=>m.animationName)||[],a=[];return i.forEach(m=>{c.includes(m)&&a.push(r?.find(l=>l.animationName===m))}),a?.length?new w(a):null}function vt(e,t){const i=(typeof e=="string"?O(e):e)?.getAnimations().filter(s=>{const r=s.id||s.animationName;return r?r.startsWith(t):!0});return i?.length?new w(i):null}function Gt(e,t,n,i={}){const{disabled:s,allowActiveEvent:r,...c}=i,a=x(e,t,n,c);if(!a)return null;let m={};if(n.trigger==="view-progress"&&!window.ViewTimeline){const l=n.element||O(n.componentId),{ready:o}=a;return a.animations.map(u=>({get start(){return u.start},get end(){return u.end},viewSource:l,ready:o,getProgress(){return a.getProgress()},effect(f,p){const{activeDuration:h}=u.effect.getComputedTiming(),{delay:d}=u.effect.getTiming();u.currentTime=((d||0)+(h||0))*p},disabled:s,destroy(){u.cancel()}}))}else if(n.trigger==="pointer-move"){const l=t,{centeredToTarget:o,transitionDuration:u,transitionEasing:f}=l,p=n.axis;if(l.keyframeEffect){const h=a;return h.animations?.length===0?null:{target:void 0,centeredToTarget:o,ready:h.ready,_currentProgress:0,getProgress(){return this._currentProgress},effect(v,g){const b=p==="x"?g.x:g.y;this._currentProgress=b,h.progress(b)},disabled:s??!1,destroy(){h.cancel()}}}m={centeredToTarget:o,allowActiveEvent:r},t.customEffect&&u&&(m.transitionDuration=u,m.transitionEasing=C(f)),m.target=a.target}return{...m,getProgress(){return a.getProgress()},effect(l,o,u,f){a.progress(u?{...o,v:u,active:f}:o)},disabled:s,destroy(){a.cancel()}}}function Et(e,t,n,i=!1){const s=yt(e,t);return s?(s.ready=new Promise(r=>{bt(e,t,r)}),s):x(e,t,n,{reducedMotion:i})}function Dt(e){return e===null?[null]:typeof e=="string"?Array.from(document.querySelectorAll(e)):Array.isArray(e)?e:[e]}function It(e,t){const n=[];for(const{target:i,options:s}of e){const r=Dt(i);for(const c of r){const a=Et(c,s,void 0,t?.reducedMotion);a instanceof w&&n.push(a)}}return n}function Rt(e,t,n){const i=It(t,n);return new At(i,e)}exports.backIn=ct;exports.backInOut=ft;exports.backOut=ut;exports.circIn=rt;exports.circInOut=at;exports.circOut=ot;exports.createAnimationGroups=It;exports.cssEasings=q;exports.cubicIn=K;exports.cubicInOut=U;exports.cubicOut=J;exports.expoIn=nt;exports.expoInOut=st;exports.expoOut=it;exports.getAnimation=Et;exports.getCSSAnimation=Nt;exports.getCssUnits=mt;exports.getEasing=lt;exports.getElementAnimation=vt;exports.getElementCSSAnimation=yt;exports.getJsEasing=C;exports.getScrubScene=Gt;exports.getSequence=Rt;exports.getWebAnimation=x;exports.jsEasings=S;exports.linear=P;exports.prepareAnimation=bt;exports.quadIn=H;exports.quadInOut=B;exports.quadOut=V;exports.quartIn=X;exports.quartInOut=Q;exports.quartOut=Y;exports.quintIn=Z;exports.quintInOut=et;exports.quintOut=tt;exports.registerEffects=$t;exports.sineIn=L;exports.sineInOut=W;exports.sineOut=j;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class _{animations;options;ready;isCSS;longestAnimation;constructor(e,n){this.animations=e,this.options=n,this.ready=n?.measured||Promise.resolve(),this.isCSS=e[0]instanceof CSSAnimation,this.longestAnimation=this._getAnimationWithLongestEndTime()}_getAnimationWithLongestEndTime(){return this.animations.reduce((e,n)=>{const o=e.effect?.getComputedTiming().endTime??0,i=n.effect?.getComputedTiming().endTime??0;return o>i?e:n},this.animations[0])}getProgress(){return this.longestAnimation?.effect?.getComputedTiming().progress||0}async play(e){await this.ready;for(const n of this.animations)n.play();await Promise.all(this.animations.map(n=>n.ready)),e&&e()}pause(){for(const e of this.animations)e.pause()}async reverse(e){await this.ready;for(const n of this.animations)n.reverse();await Promise.all(this.animations.map(n=>n.ready)),e&&e()}progress(e){for(const n of this.animations){const{delay:o,duration:i,iterations:s}=n.effect.getTiming(),a=(Number.isFinite(i)?i:0)*(Number.isFinite(s)?s:1);n.currentTime=((o||0)+a)*e}}cancel(){for(const e of this.animations)e.cancel()}setPlaybackRate(e){for(const n of this.animations)n.playbackRate=e}async onFinish(e){try{await Promise.all(this.animations.map(o=>o.finished));const n=this.animations[0];if(n&&!this.isCSS){const o=n.effect?.target;if(o){const i=this.options?.effectId||n.id,s=new CustomEvent("animationend",{detail:{effectId:i}});o.dispatchEvent(s)}}e()}catch(n){console.warn("animation was interrupted - aborting onFinish callback - ",n)}}async onAbort(e){try{await Promise.all(this.animations.map(n=>n.finished))}catch(n){if(n.name==="AbortError"){const o=this.animations[0];if(o&&!this.isCSS){const i=o.effect?.target;if(i){const s=new Event("animationcancel");i.dispatchEvent(s)}}e()}}}get finished(){return Promise.all(this.animations.map(e=>e.finished))}get playState(){return this.animations.some(e=>e.playState==="running")?"running":this.animations[0]?.playState}hasAnimationName(e){return this.animations.some(n=>n.animationName===e)}hasAnimationId(e){return this.animations.some(n=>n.id===e)}getTimingOptions(){return this.animations.map(e=>{const n=e.effect?.getTiming(),o=n?.delay??0,i=Number(n?.duration)||0,s=n?.iterations??1;return{delay:o,duration:i,iterations:s}})}}const M=t=>t,B=t=>1-Math.cos(t*Math.PI/2),H=t=>Math.sin(t*Math.PI/2),K=t=>-(Math.cos(Math.PI*t)-1)/2,V=t=>t**2,J=t=>1-(1-t)**2,U=t=>t<.5?2*t**2:1-(-2*t+2)**2/2,X=t=>t**3,Y=t=>1-(1-t)**3,Z=t=>t<.5?4*t**3:1-(-2*t+2)**3/2,Q=t=>t**4,tt=t=>1-(1-t)**4,et=t=>t<.5?8*t**4:1-(-2*t+2)**4/2,nt=t=>t**5,it=t=>1-(1-t)**5,st=t=>t<.5?16*t**5:1-(-2*t+2)**5/2,ot=t=>t===0?0:2**(10*t-10),rt=t=>t===1?1:1-2**(-10*t),at=t=>t===0?0:t===1?1:t<.5?2**(20*t-10)/2:(2-2**(-20*t+10))/2,ct=t=>1-Math.sqrt(1-t**2),ut=t=>Math.sqrt(1-(t-1)**2),ft=t=>t<.5?(1-Math.sqrt(1-4*t**2))/2:(Math.sqrt(-(2*t-3)*(2*t-1))+1)/2,mt=t=>2.70158*t**3-1.70158*t**2,lt=t=>1+2.70158*(t-1)**3+1.70158*(t-1)**2,dt=(t,e=1.70158*1.525)=>t<.5?(2*t)**2*((e+1)*2*t-e)/2:((2*t-2)**2*((e+1)*(t*2-2)+e)+2)/2,C={linear:M,sineIn:B,sineOut:H,sineInOut:K,quadIn:V,quadOut:J,quadInOut:U,cubicIn:X,cubicOut:Y,cubicInOut:Z,quartIn:Q,quartOut:tt,quartInOut:et,quintIn:nt,quintOut:it,quintInOut:st,expoIn:ot,expoOut:rt,expoInOut:at,circIn:ct,circOut:ut,circInOut:ft,backIn:mt,backOut:lt,backInOut:dt},O=(t,e,n,o,i)=>{const s=3*e,a=3*(o-2*e),r=1-3*o+3*e,f=3*n,d=3*(i-2*n),c=1-3*i+3*n;let u;if(r===0)u=a===0?`(${t} / ${s})`:`((sqrt(max(0, ${s*s} + ${4*a} * ${t})) - ${s}) / ${2*a})`;else{const m=a/(3*r),p=2*Math.pow(a,3)-9*s*a*r,l=54*Math.pow(r,3),h=(3*r*s-a*a)/(9*r*r),$=`((${p} - ${27*r*r} * ${t}) / ${l})`;if(h<0){const g=2*Math.sqrt(-h);let b=0;for(const I of[0,1,2])[0,.25,.5,.75,1].every(A=>{const S=Math.min(Math.max(2*(p-27*r*r*A)/(l*h*g),-1),1),D=g*Math.cos((Math.acos(S)-I*2*Math.PI)/3)-m;return D>=-1e-6&&D<=1.000001})&&(b=I);const y=`(acos(clamp(-1, ${2/(h*g)} * ${$}, 1)) - ${360*b}deg) / 3`;u=`(${g} * cos(${y}) - ${m})`}else{const g=`sqrt(pow(${$}, 2) + ${Math.pow(h,3)})`;u=`(pow(${g} - ${$}, 1 / 3) - pow(${g} + ${$}, 1 / 3) - ${m})`}}return`(${c} * pow(${u}, 3) + ${d} * pow(${u}, 2) + ${f} * ${u})`},P={linear:t=>t,ease:t=>O(t,.25,.1,.25,1),easeIn:t=>O(t,.42,0,1,1),easeOut:t=>O(t,0,0,.58,1),easeInOut:t=>O(t,.42,0,.58,1),sineIn:t=>`(1 - cos(${t} * 90deg))`,sineOut:t=>`(sin(${t} * 90deg))`,sineInOut:t=>`((1 - cos(${t} * 180deg)) / 2)`,quadIn:t=>`(${t} * ${t})`,quadOut:t=>`(1 - (1 - ${t}) * (1 - ${t}))`,quadInOut:t=>`(round(${t}) * (1 - (-2 * ${t} + 2) * (-2 * ${t} + 2) / 2) + (1 - round(${t})) * 2 * ${t} * ${t})`,cubicIn:t=>`pow(${t}, 3)`,cubicOut:t=>`(1 - pow(1 - ${t}, 3))`,cubicInOut:t=>`(round(${t}) * (1 - pow(-2 * ${t} + 2, 3) / 2) + (1 - round(${t})) * 4 * pow(${t}, 3))`,quartIn:t=>`pow(${t}, 4)`,quartOut:t=>`(1 - pow(1 - ${t}, 4))`,quartInOut:t=>`(round(${t}) * (1 - pow(-2 * ${t} + 2, 4) / 2) + (1 - round(${t})) * 8 * pow(${t}, 4))`,quintIn:t=>`pow(${t}, 5)`,quintOut:t=>`(1 - pow(1 - ${t}, 5))`,quintInOut:t=>`(round(${t}) * (1 - pow(-2 * ${t} + 2, 5) / 2) + (1 - round(${t})) * 16 * pow(${t}, 5))`,expoIn:t=>`(pow(2, 10 * ${t} - 10) - pow(2, -10) * (1 - ${t}))`,expoOut:t=>`(1 - pow(2, -10 * ${t}) + pow(2, -10) * ${t})`,expoInOut:t=>`((round(${t}) * (2 - pow(2, -20 * ${t} + 10)) + (1 - round(${t})) * pow(2, 20 * ${t} - 10)) / 2)`,circIn:t=>`(1 - sqrt(1 - ${t} * ${t}))`,circOut:t=>`sqrt(1 - (${t} - 1) * (${t} - 1))`,circInOut:t=>`((round(${t}) * (sqrt(max(0, (3 - 2 * ${t}) * (2 * ${t} - 1))) + 1) + (1 - round(${t})) * (1 - sqrt(max(0, 1 - 4 * ${t} * ${t})))) / 2)`,backIn:t=>`(2.70158 * pow(${t}, 3) - 1.70158 * ${t} * ${t})`,backOut:t=>`(1 + 2.70158 * pow(${t} - 1, 3) + 1.70158 * (${t} - 1) * (${t} - 1))`,backInOut:t=>`((round(${t}) * (2 + (2 * ${t} - 2) * (2 * ${t} - 2) * (2.5949095 + 3.5949095 * (2 * ${t} - 2))) + (1 - round(${t})) * 4 * ${t} * ${t} * (3.5949095 * 2 * ${t} - 2.5949095)) / 2)`},z={linear:"linear",ease:"ease",easeIn:"ease-in",easeOut:"ease-out",easeInOut:"ease-in-out",sineIn:"cubic-bezier(0.47, 0, 0.745, 0.715)",sineOut:"cubic-bezier(0.39, 0.575, 0.565, 1)",sineInOut:"cubic-bezier(0.445, 0.05, 0.55, 0.95)",quadIn:"cubic-bezier(0.55, 0.085, 0.68, 0.53)",quadOut:"cubic-bezier(0.25, 0.46, 0.45, 0.94)",quadInOut:"cubic-bezier(0.455, 0.03, 0.515, 0.955)",cubicIn:"cubic-bezier(0.55, 0.055, 0.675, 0.19)",cubicOut:"cubic-bezier(0.215, 0.61, 0.355, 1)",cubicInOut:"cubic-bezier(0.645, 0.045, 0.355, 1)",quartIn:"cubic-bezier(0.895, 0.03, 0.685, 0.22)",quartOut:"cubic-bezier(0.165, 0.84, 0.44, 1)",quartInOut:"cubic-bezier(0.77, 0, 0.175, 1)",quintIn:"cubic-bezier(0.755, 0.05, 0.855, 0.06)",quintOut:"cubic-bezier(0.23, 1, 0.32, 1)",quintInOut:"cubic-bezier(0.86, 0, 0.07, 1)",expoIn:"cubic-bezier(0.95, 0.05, 0.795, 0.035)",expoOut:"cubic-bezier(0.19, 1, 0.22, 1)",expoInOut:"cubic-bezier(1, 0, 0, 1)",circIn:"cubic-bezier(0.6, 0.04, 0.98, 0.335)",circOut:"cubic-bezier(0.075, 0.82, 0.165, 1)",circInOut:"cubic-bezier(0.785, 0.135, 0.15, 0.86)",backIn:"cubic-bezier(0.6, -0.28, 0.735, 0.045)",backOut:"cubic-bezier(0.175, 0.885, 0.32, 1.275)",backInOut:"cubic-bezier(0.68, -0.55, 0.265, 1.55)"};function ht(t){return t==="percentage"?"%":t||"px"}const Pt=/^(webkit|moz|ms|o)(?=[A-Z])/,zt=Object.assign(Object.create(null),{float:"cssFloat","animation-timing-function":"easing","animation-composition":"composite"});function xt(t){return t.startsWith("--")?t:(Pt.test(t)?`-${t}`:t).replace(/[A-Z]/g,n=>`-${n.toLowerCase()}`)}function pt(t){return t.startsWith("--")||!t.includes("-")?t:t.replace(/^-/,"").replace(/-([a-z])/g,(e,n)=>n.toUpperCase())}function gt(t){return zt[t]||pt(t)}function Mt(t){for(const e in t)if(Object.hasOwn(t,e)&>(e)!==e)return!0;return!1}function $t(t){if(!Array.isArray(t))return t;let e;return t.forEach((n,o)=>{if(!n||typeof n!="object"||!Mt(n))return;e??=t.slice();const i={};for(const s in n)Object.hasOwn(n,s)&&(i[gt(s)]=n[s]);e[o]=i}),e||t}function bt(t){return t?z[t]||t:z.linear}function yt(t,e,n,o){const i=3*t,s=3*(n-t)-i,a=1-i-s,r=3*e,f=3*(o-e)-r,d=1-r-f,c=l=>((a*l+s)*l+i)*l,u=l=>((d*l+f)*l+r)*l,m=l=>(3*a*l+2*s)*l+i;function p(l){let h=l;for(let b=0;b<8;b++){const y=c(h)-l;if(Math.abs(y)<1e-7)return h;const I=m(h);if(Math.abs(I)<1e-6)break;h-=y/I}let $=0,g=1;for(h=($+g)/2;g-$>1e-7;){const b=c(h);if(Math.abs(b-l)<1e-7)return h;l>b?$=h:g=h,h=($+g)/2}return h}return l=>l<=0?0:l>=1?1:u(p(l))}function It(t){const e=t.match(/^cubic-bezier\(\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*\)$/);if(!e)return;const n=parseFloat(e[1]),o=parseFloat(e[2]),i=parseFloat(e[3]),s=parseFloat(e[4]);if(![n,o,i,s].some(isNaN))return[n,o,i,s]}function Nt(t){const e=It(t);if(!(!e||e.some(isNaN)))return yt(...e)}function Ft(t){const e=It(t);if(!(!e||e.some(isNaN)))return n=>O(n,...e)}function Et(t){const e=t.match(/^linear\((.+)\)$/);if(!e)return;const n=e[1].split(",").map(s=>s.trim()).filter(Boolean);if(n.length===0)return;const o=[];for(const s of n){const a=s.split(/\s+/),r=parseFloat(a[0]);if(isNaN(r))return;const f=[];for(let d=1;d<a.length;d++)if(a[d].endsWith("%")){const c=parseFloat(a[d])/100;if(isNaN(c))return;f.push(c)}f.length===0?o.push({output:r,pos:null}):f.length===1?o.push({output:r,pos:f[0]}):(o.push({output:r,pos:f[0]}),o.push({output:r,pos:f[1]}))}if(o.length===0)return;o[0].pos===null&&(o[0].pos=0),o[o.length-1].pos===null&&(o[o.length-1].pos=1);let i=0;for(;i<o.length;)if(o[i].pos===null){const s=i-1;let a=i;for(;a<o.length&&o[a].pos===null;)a++;const r=o[s].pos,f=o[a].pos,d=a-s;for(let c=s+1;c<a;c++)o[c].pos=r+(f-r)*(c-s)/d;i=a+1}else i++;for(let s=1;s<o.length;s++)o[s].pos<o[s-1].pos&&(o[s].pos=o[s-1].pos);return o}function Gt(t){const e=Et(t);if(e)return n=>{if(n<=e[0].pos)return e[0].output;const o=e[e.length-1];if(n>=o.pos)return o.output;let i=0,s=e.length-1;for(;i<s-1;){const f=i+s>>>1;e[f].pos<=n?i=f:s=f}const a=e[i],r=e[s];return r.pos===a.pos?r.output:a.output+(r.output-a.output)*(n-a.pos)/(r.pos-a.pos)}}function Dt(t){const e=Et(t);if(e)return n=>{const o=[`${e[0].output}`];for(let i=1;i<e.length;i++){const s=e[i].pos-e[i-1].pos,a=e[i].output-e[i-1].output;if(s===0&&e[i-1].pos===0)o.push(`${a}`);else{const r=s===0?`round(${n} / ${2*e[i-1].pos})`:`(${n} - ${e[i-1].pos}) / ${s}`;o.push(`clamp(0, ${r}, 1) * ${a}`)}}return`(${o.join(" + ")})`}}function N(t){if(!t)return;const e=C[t];return e||(Nt(t)??Gt(t)??C.linear)}function Ot(t){if(!t)return;const e=P[t];return e||(Ft(t)??Dt(t)??P.linear)}class jt extends _{animationGroups;delay;offset;offsetEasing;sequenceId;timingOptions;constructor(e,n={}){const o=e.flatMap(i=>[...i.animations]);super(o),this.animationGroups=e,this.delay=n.delay??0,this.offset=n.offset??0,this.sequenceId=n.sequenceId,this.offsetEasing=typeof n.offsetEasing=="function"?n.offsetEasing:N(n.offsetEasing)??M,this.timingOptions=this.animationGroups.map(i=>i.getTimingOptions().map(({delay:s,duration:a,iterations:r})=>({delay:s,duration:Number.isFinite(a)?a:0,iterations:Number.isFinite(r)?r:1}))),this.applyOffsets(),this.ready=Promise.all(e.map(i=>i.ready)).then(()=>{})}calculateOffsets(){const e=this.animationGroups.length;if(e<=1)return[0];const n=e-1;return Array.from({length:e},(o,i)=>this.offsetEasing(i/n)*n*this.offset|0)}applyOffsets(){if(this.animationGroups.length===0||this.animations.length===0)return;const e=this.calculateOffsets(),n=this.getSequenceActiveDuration(e),o=this.animationGroups.length-1;this.animationGroups.forEach((i,s)=>{i.animations.forEach((a,r)=>{const f=a.effect;if(!f)return;const{delay:d,duration:c,iterations:u}=this.timingOptions[s][r],m=d+e[s],p=n-(m+c*u);if(i.isCSS&&this.sequenceId){const{target:l}=f;l instanceof HTMLElement&&(l.style.setProperty(`--motion-${this.sequenceId}-index`,`${s}`),l.style.setProperty(`--motion-${this.sequenceId}-last`,`${o}`)),f.updateTiming({endDelay:p})}else f.updateTiming({delay:m+this.delay,endDelay:p})})})}getSequenceActiveDuration(e){const n=[];for(let o=0;o<this.timingOptions.length;o++){const i=this.timingOptions[o].reduce((s,a)=>{if(!a)return s;const{delay:r,duration:f,iterations:d}=a;return Math.max(s,r+f*d)},0);n.push(e[o]+i)}return Math.max(...n)}addGroups(e){if(e.length===0)return;const n=[...e].sort((o,i)=>i.index-o.index);for(const{index:o,group:i}of n){const s=Math.min(o,this.animationGroups.length);this.animationGroups.splice(s,0,i),this.timingOptions.splice(s,0,i.getTimingOptions());const a=[...i.animations],r=this.animationGroups.slice(0,s).reduce((f,d)=>f+d.animations.length,0);this.animations.splice(r,0,...a)}this.applyOffsets(),this.ready=Promise.all(this.animationGroups.map(o=>o.ready)).then(()=>{})}removeGroups(e){const n=[],o=[],i=[];for(let s=0;s<this.animationGroups.length;s++)e(this.animationGroups[s])?n.push(this.animationGroups[s]):(o.push(this.animationGroups[s]),i.push(this.timingOptions[s]));if(n.length===0)return n;for(const s of n)s.cancel();return this.animationGroups=o,this.timingOptions=i,this.animations=o.flatMap(s=>[...s.animations]),this.applyOffsets(),this.ready=Promise.all(this.animationGroups.map(s=>s.ready)).then(()=>{}),n}async onFinish(e){try{await Promise.all(this.animationGroups.map(n=>n.finished)),e()}catch(n){console.warn("animation was interrupted - aborting onFinish callback - ",n)}}}class Rt{_animation;customEffect;progress;_tickCbId;_finishHandler;constructor(e,n,o,i){const s=new KeyframeEffect(n,[],{...o,composite:"add"}),{timeline:a}=i;this._animation=new Animation(s,a),this._tickCbId=null,this.progress=null,this.customEffect=r=>e(s.target,r),this._finishHandler=r=>{this.effect.target?.getAnimations().find(f=>f===this._animation)||this.cancel()},this.addEventListener("finish",this._finishHandler),this.addEventListener("remove",this._finishHandler)}_tick(){try{const e=this.effect?.getComputedTiming().progress??null;e!==this.progress&&(this.customEffect?.(e),this.progress=e),this._tickCbId=requestAnimationFrame(()=>{this._tick()})}catch(e){this._tickCbId=null,console.error(`failed to run customEffect! effectId: ${this.id}, error: ${e instanceof Error?e.message:e}`)}}get currentTime(){return this._animation.currentTime}set currentTime(e){this._animation.currentTime=e}get startTime(){return this._animation.startTime}set startTime(e){this._animation.startTime=e}get playbackRate(){return this._animation.playbackRate}set playbackRate(e){this._animation.playbackRate=e}get id(){return this._animation.id}set id(e){this._animation.id=e}get effect(){return this._animation.effect}set effect(e){this._animation.effect=e}get timeline(){return this._animation.timeline}set timeline(e){this._animation.timeline=e}get finished(){return this._animation.finished}get pending(){return this._animation.pending}get playState(){return this._animation.playState}get ready(){return this._animation.ready}get replaceState(){return this._animation.replaceState}get oncancel(){return this._animation.oncancel}set oncancel(e){this._animation.oncancel=e}get onfinish(){return this._animation.onfinish}set onfinish(e){this._animation.onfinish=e}get onremove(){return this._animation.onremove}set onremove(e){this._animation.onremove=e}play(){this._animation.play(),cancelAnimationFrame(this._tickCbId),this._tickCbId=requestAnimationFrame(()=>this._tick())}pause(){this._animation.pause(),cancelAnimationFrame(this._tickCbId),this._tickCbId=null}cancel(){this.removeEventListener("finish",this._finishHandler),this.removeEventListener("remove",this._finishHandler),this._animation.cancel(),this.customEffect(null),cancelAnimationFrame(this._tickCbId),this._tickCbId=null}commitStyles(){console.warn("CustomEffect animations do not support commitStyles method as they have no style to commit")}finish(){this._animation.finish()}persist(){this._animation.persist()}reverse(){this._animation.reverse()}updatePlaybackRate(e){this._animation.updatePlaybackRate(e)}addEventListener(e,n,o){this._animation.addEventListener(e,n,o)}removeEventListener(e,n,o){this._animation.removeEventListener(e,n,o)}dispatchEvent(e){return this._animation.dispatchEvent(e)}}function Lt(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var T={exports:{}},j=T.exports,R;function Wt(){return R||(R=1,(function(t){(function(e){var n=function(){},o=e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.msRequestAnimationFrame||function(c){return setTimeout(c,16)};function i(){var c=this;c.reads=[],c.writes=[],c.raf=o.bind(e)}i.prototype={constructor:i,runTasks:function(c){for(var u;u=c.shift();)u()},measure:function(c,u){var m=u?c.bind(u):c;return this.reads.push(m),s(this),m},mutate:function(c,u){var m=u?c.bind(u):c;return this.writes.push(m),s(this),m},clear:function(c){return r(this.reads,c)||r(this.writes,c)},extend:function(c){if(typeof c!="object")throw new Error("expected object");var u=Object.create(this);return f(u,c),u.fastdom=this,u.initialize&&u.initialize(),u},catch:null};function s(c){c.scheduled||(c.scheduled=!0,c.raf(a.bind(null,c)))}function a(c){var u=c.writes,m=c.reads,p;try{n("flushing reads",m.length),c.runTasks(m),n("flushing writes",u.length),c.runTasks(u)}catch(l){p=l}if(c.scheduled=!1,(m.length||u.length)&&s(c),p)if(n("task errored",p.message),c.catch)c.catch(p);else throw p}function r(c,u){var m=c.indexOf(u);return!!~m&&!!c.splice(m,1)}function f(c,u){for(var m in u)u.hasOwnProperty(m)&&(c[m]=u[m])}var d=e.fastdom=e.fastdom||new i;t.exports=d})(typeof window<"u"?window:typeof j<"u"?j:globalThis)})(T)),T.exports}var Bt=Wt();const E=Lt(Bt),x={};function Ht(t){Object.assign(x,t)}function Kt(t){return t in x?x[t]:(console.warn(`${t} not found in registry. Please make sure to import and register the preset.`),null)}function v(t,e){return t?(e||document).getElementById(t):null}function Vt(t,e){return t?.matches(`[data-motion-part~="${e}"]`)?t:t?.querySelector(`[data-motion-part~="${e}"]`)}function Jt(t){const e=t.alternate?"alternate":"";return t.reversed?`${e?`${e}-`:""}reverse`:e||"normal"}function k(t){return`${t.value}${ht(t.unit)}`}function L(t,e,n){return`${t.name||"cover"} ${n&&t.offset.unit!=="percentage"?`calc(100% + ${k(t.offset)}${e?` + ${e}`:""})`:e?`calc(${k(t.offset)} + ${e})`:k(t.offset)}`}function vt(t){return{start:L(t.startOffset,t.startOffsetAdd),end:L(t.endOffset,t.endOffsetAdd,!0)}}function wt(t){return e=>E.measure(()=>e(t))}function _t(t){return e=>E.mutate(()=>e(t))}function w(t){if(t.namedEffect){const e=t.namedEffect.type;return typeof e=="string"?Kt(e):null}else if(t.keyframeEffect){const e=o=>{const{name:i,keyframes:s}=o.keyframeEffect;return[{...o,name:i,keyframes:s}]};return{web:e,style:e,getNames:o=>{const{effectId:i}=o,{name:s}=o.keyframeEffect,a=s||i;return a?[a]:[]}}}else if(t.customEffect)return e=>[{...e,keyframes:[]}];return null}function qt(t,e,n,o){return t.map((i,s)=>{const a={fill:i.fill,easing:bt(i.easing),iterations:i.iterations===0?1/0:i.iterations||1,composite:i.composite,direction:Jt(i)};F(e)?(a.duration=i.duration,a.delay=i.delay||0):e?.trigger==="view-progress"&&(o||window.ViewTimeline)?a.duration="auto":(a.duration=99.99,a.delay=.01);const r=$t(i.keyframes);return{effect:r===i.keyframes?i:{...i,keyframes:r},options:a,id:n&&`${n}-${s+1}`,part:i.part}})}function F(t){return!t||t.trigger!=="pointer-move"&&t.trigger!=="view-progress"}function W(t,e,n,o,i){if(t){if(F(o)&&(e.duration=e.duration||1,i?.reducedMotion))if(e.iterations===1||e.iterations==null)e={...e,duration:1};else return[];let s;return n instanceof HTMLElement&&(s={measure:wt(n),mutate:_t(n)}),t.web?t.web(e,s,i):t(e,s,i)}return[]}function G(t,e,n,o,i){const s=typeof t=="string"?v(t,i):t;if(n?.trigger==="pointer-move"&&!e.keyframeEffect){let m=e;e.customEffect&&(m={...e,namedEffect:{id:"",type:"CustomMouse"}});const p=w(m),l=W(p,e,s,n,o);return typeof l!="function"?null:l(s)}const a=w(e),r=W(a,e,s,n,o);if(!r||r.length===0)return null;const f=qt(r,n,e.effectId);let d;const c=n?.trigger==="view-progress";c&&window.ViewTimeline&&(d=new ViewTimeline({subject:n.element||v(n.componentId)}));const u=f.map(({effect:m,options:p,id:l,part:h})=>{const $=h?Vt(s,h):s,g=new KeyframeEffect($||null,[],p);E.mutate(()=>{"timing"in m&&g.updateTiming(m.timing),g.setKeyframes(m.keyframes)});const b=c&&d?{timeline:d}:{},y=typeof m.customEffect=="function"?new Rt(m.customEffect,$||null,p,b):new Animation(g,b.timeline);if(c)if(d)E.mutate(()=>{const{start:I,end:q}=vt(m);y.rangeStart=I,y.rangeEnd=q,y.play()});else{const{startOffset:I,endOffset:q}=e;E.mutate(()=>{const A=m.startOffset||I,S=m.endOffset||q;Object.assign(y,{start:{name:A.name,offset:A.offset?.value,add:m.startOffsetAdd},end:{name:S.name,offset:S.offset?.value,add:m.endOffsetAdd}})})}return l&&(y.id=l),y});return new _(u,{...e,trigger:{...n||{}},measured:new Promise(m=>E.mutate(m))})}function Ut(t,e){return t?`#${t}${e?`[data-motion-part~="${e}"]`:""}`:""}function Xt(t,e,n){const{duration:o,delay:i,iterations:s=1,fill:a,easing:r="linear",direction:f}=t.options,d=t.effect.name,c=o==="auto",{sequenceId:u,delay:m,offset:p,offsetEasing:l="linear"}=n||{};let h=`${i??0}ms`;if(u&&typeof l=="string"){const $=Ot(l);if($){const g=(i??0)+(m??0);if(p){const b=$(`(var(--motion-${u}-index, 0) / var(--motion-${u}-last, 1))`);h=`calc(${`(${g} + ${b} * ${p} * var(--motion-${u}-last, 1))`} * 1ms)`}else h=`${g}ms`}}return`${d} ${c?"auto":`${o}ms`}${c?" ":` ${h} `}${r}${a&&a!=="none"?` ${a}`:""} ${!s||s===1/0?"infinite":s}${f==="normal"?"":` ${f}`} ${e?"":"paused"}`}function Yt(t,e,n){return t?.style?(F(n)&&(e.duration=e.duration||1),t.style(e)):[]}function Zt(t,e,n,o){const i=w(e),s=Yt(i,e),a=qt(s,n,e.effectId,!0),r=n?.trigger==="view-progress";return a.map((f,d)=>{const{start:c,end:u}=r?vt(f.effect):{};return{target:Ut(t,f.part),animation:Xt(f,r,o),composition:f.options.composite,custom:f.effect.custom,name:f.effect.name,keyframes:f.effect.keyframes,id:f.id&&`${f.id}-${d+1}`,animationTimeline:r?`--${n?.id}`:"",animationRange:c||u?`${c} ${u}`:""}})}function At(t,e,n){const o=w(e),i=t instanceof HTMLElement?t:v(t);if(o&&o.prepare&&i){const s={measure:wt(i),mutate:_t(i)};o.prepare(e,s)}n&&E.mutate(n)}function St(t,e){const n=w(e);if(!n)return null;if(!n.style)return e.effectId&&t?Tt(t,e.effectId):null;const o=n.getNames(e),s=(typeof t=="string"?v(t):t)?.getAnimations(),a=s?.map(f=>f.animationName)||[],r=[];return o.forEach(f=>{a.includes(f)&&r.push(s?.find(d=>d.animationName===f))}),r?.length?new _(r):null}function Tt(t,e){const o=(typeof t=="string"?v(t):t)?.getAnimations().filter(i=>{const s=i.id||i.animationName;return s?s.startsWith(e):!0});return o?.length?new _(o):null}function Qt(t,e,n,o={}){const{disabled:i,allowActiveEvent:s,...a}=o,r=G(t,e,n,a);if(!r)return null;let f={};if(n.trigger==="view-progress"&&!window.ViewTimeline){const d=n.element||v(n.componentId),{ready:c}=r;return r.animations.map(u=>({get start(){return u.start},get end(){return u.end},viewSource:d,ready:c,getProgress(){return r.getProgress()},effect(m,p){const{activeDuration:l}=u.effect.getComputedTiming(),{delay:h}=u.effect.getTiming();u.currentTime=((h||0)+(l||0))*p},disabled:i,destroy(){u.cancel()}}))}else if(n.trigger==="pointer-move"){const d=e,{centeredToTarget:c,transitionDuration:u,transitionEasing:m}=d,p=n.axis;if(d.keyframeEffect){const l=r;return l.animations?.length===0?null:{target:void 0,centeredToTarget:c,ready:l.ready,_currentProgress:0,getProgress(){return this._currentProgress},effect($,g){const b=p==="x"?g.x:g.y;this._currentProgress=b,l.progress(b)},disabled:i??!1,destroy(){l.cancel()}}}f={centeredToTarget:c,allowActiveEvent:s},e.customEffect&&u&&(f.transitionDuration=u,f.transitionEasing=N(m)),f.target=r.target}return{...f,getProgress(){return r.getProgress()},effect(d,c,u,m){r.progress(u?{...c,v:u,active:m}:c)},disabled:i,destroy(){r.cancel()}}}function kt(t,e,n,o=!1){const i=St(t,e);return i?(i.ready=new Promise(s=>{At(t,e,s)}),i):G(t,e,n,{reducedMotion:o})}function te(t){return t===null?[null]:typeof t=="string"?Array.from(document.querySelectorAll(t)):Array.isArray(t)?t:[t]}function Ct(t,e){const n=[];for(const{target:o,options:i}of t){const s=te(o);for(const a of s){const r=kt(a,i,void 0,e?.reducedMotion);r instanceof _&&n.push(r)}}return n}function ee(t,e,n){const o=Ct(e,n);return new jt(o,t)}exports.backIn=mt;exports.backInOut=dt;exports.backOut=lt;exports.circIn=ct;exports.circInOut=ft;exports.circOut=ut;exports.createAnimationGroups=Ct;exports.cssEasings=z;exports.cubicBezierCalc=O;exports.cubicBezierEasing=yt;exports.cubicIn=X;exports.cubicInOut=Z;exports.cubicOut=Y;exports.expoIn=ot;exports.expoInOut=at;exports.expoOut=rt;exports.getAnimation=kt;exports.getCSSAnimation=Zt;exports.getCssUnits=ht;exports.getEasing=bt;exports.getElementAnimation=Tt;exports.getElementCSSAnimation=St;exports.getJsEasing=N;exports.getJsEasingInCSS=Ot;exports.getScrubScene=Qt;exports.getSequence=ee;exports.getWebAnimation=G;exports.jsEasings=C;exports.jsEasingsInCSS=P;exports.linear=M;exports.normalizeKeyframes=$t;exports.prepareAnimation=At;exports.quadIn=V;exports.quadInOut=U;exports.quadOut=J;exports.quartIn=Q;exports.quartInOut=et;exports.quartOut=tt;exports.quintIn=nt;exports.quintInOut=st;exports.quintOut=it;exports.registerEffects=Ht;exports.sineIn=B;exports.sineInOut=K;exports.sineOut=H;exports.toCSSPropertyName=xt;exports.toWAAPIPropertyName=pt;
|
|
2
2
|
//# sourceMappingURL=motion.js.map
|