framer-motion 12.6.2 → 12.6.3

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.
Files changed (66) hide show
  1. package/dist/cjs/client.js +1 -1
  2. package/dist/cjs/{create-BLp_edji.js → create-B2InJs4e.js} +68 -115
  3. package/dist/cjs/dom-mini.js +14 -219
  4. package/dist/cjs/dom.js +56 -199
  5. package/dist/cjs/index.js +32 -156
  6. package/dist/cjs/m.js +8 -12
  7. package/dist/cjs/mini.js +10 -214
  8. package/dist/dom-mini.d.ts +3 -3
  9. package/dist/dom-mini.js +1 -1
  10. package/dist/dom.d.ts +17 -14
  11. package/dist/dom.js +1 -1
  12. package/dist/es/animation/animate/index.mjs +2 -2
  13. package/dist/es/animation/animators/AcceleratedAnimation.mjs +5 -3
  14. package/dist/es/animation/animators/MainThreadAnimation.mjs +6 -4
  15. package/dist/es/animation/animators/waapi/animate-elements.mjs +10 -9
  16. package/dist/es/animation/animators/waapi/animate-sequence.mjs +2 -2
  17. package/dist/es/animation/animators/waapi/animate-style.mjs +2 -2
  18. package/dist/es/animation/generators/spring/index.mjs +9 -1
  19. package/dist/es/animation/interfaces/motion-value.mjs +2 -2
  20. package/dist/es/animation/interfaces/visual-element-target.mjs +1 -2
  21. package/dist/es/animation/interfaces/visual-element-variant.mjs +1 -2
  22. package/dist/es/animation/optimized-appear/handoff.mjs +2 -4
  23. package/dist/es/animation/optimized-appear/start.mjs +4 -6
  24. package/dist/es/animation/sequence/create.mjs +2 -2
  25. package/dist/es/animation/sequence/utils/calc-time.mjs +1 -2
  26. package/dist/es/components/AnimatePresence/index.mjs +2 -2
  27. package/dist/es/gestures/drag/VisualElementDragControls.mjs +5 -10
  28. package/dist/es/motion/features/animation/index.mjs +1 -2
  29. package/dist/es/motion/index.mjs +2 -3
  30. package/dist/es/motion/utils/use-visual-element.mjs +3 -5
  31. package/dist/es/projection/node/create-projection-node.mjs +17 -25
  32. package/dist/es/projection/styles/transform.mjs +1 -1
  33. package/dist/es/render/VisualElement.mjs +3 -4
  34. package/dist/es/render/dom/DOMKeyframesResolver.mjs +1 -2
  35. package/dist/es/render/dom/resize/handle-element.mjs +5 -6
  36. package/dist/es/render/dom/scroll/track.mjs +1 -2
  37. package/dist/es/render/dom/utils/css-variables-conversion.mjs +1 -1
  38. package/dist/es/render/dom/utils/filter-props.mjs +1 -1
  39. package/dist/es/render/html/utils/scrape-motion-values.mjs +1 -2
  40. package/dist/es/render/utils/KeyframesResolver.mjs +2 -3
  41. package/dist/es/render/utils/animation-state.mjs +3 -5
  42. package/dist/es/render/utils/motion-values.mjs +1 -1
  43. package/dist/es/render/utils/resolve-variants.mjs +1 -1
  44. package/dist/es/utils/mix/complex.mjs +1 -2
  45. package/dist/es/value/types/complex/index.mjs +2 -3
  46. package/dist/es/value/use-scroll.mjs +2 -2
  47. package/dist/framer-motion.dev.js +445 -414
  48. package/dist/framer-motion.js +1 -1
  49. package/dist/mini.d.ts +1 -1
  50. package/dist/mini.js +1 -1
  51. package/dist/size-rollup-animate.js +1 -1
  52. package/dist/size-rollup-dom-animation-assets.js +1 -1
  53. package/dist/size-rollup-dom-animation-m.js +1 -1
  54. package/dist/size-rollup-dom-animation.js +1 -1
  55. package/dist/size-rollup-dom-max-assets.js +1 -1
  56. package/dist/size-rollup-dom-max.js +1 -1
  57. package/dist/size-rollup-m.js +1 -1
  58. package/dist/size-rollup-motion.js +1 -1
  59. package/dist/size-rollup-scroll.js +1 -1
  60. package/dist/size-rollup-waapi-animate.js +1 -1
  61. package/dist/types/index.d.ts +28 -31
  62. package/package.json +4 -4
  63. package/dist/es/animation/animators/waapi/NativeAnimation.mjs +0 -112
  64. package/dist/es/animation/animators/waapi/index.mjs +0 -32
  65. package/dist/es/animation/animators/waapi/utils/style.mjs +0 -8
  66. package/dist/es/animation/animators/waapi/utils/supports-partial-keyframes.mjs +0 -13
@@ -1 +1 @@
1
- const e=e=>e;let t=e;function n(e){let t;return()=>(void 0===t&&(t=e()),t)}const r=(e,t,n)=>{const r=t-e;return 0===r?1:(n-e)/r};const s=n(()=>void 0!==window.ScrollTimeline),o=["read","resolveKeyframes","update","preRender","render","postRender"],i={value:null,addProjectionMetrics:null};function a(e,t){let n=!1,r=!0;const s={delta:0,timestamp:0,isProcessing:!1},a=()=>n=!0,c=o.reduce((e,n)=>(e[n]=function(e,t){let n=new Set,r=new Set,s=!1,o=!1;const a=new WeakSet;let c={delta:0,timestamp:0,isProcessing:!1},u=0;function l(t){a.has(t)&&(f.schedule(t),e()),u++,t(c)}const f={schedule:(e,t=!1,o=!1)=>{const i=o&&s?n:r;return t&&a.add(e),i.has(e)||i.add(e),e},cancel:e=>{r.delete(e),a.delete(e)},process:e=>{c=e,s?o=!0:(s=!0,[n,r]=[r,n],n.forEach(l),t&&i.value&&i.value.frameloop[t].push(u),u=0,n.clear(),s=!1,o&&(o=!1,f.process(e)))}};return f}(a,t?n:void 0),e),{}),{read:u,resolveKeyframes:l,update:f,preRender:d,render:h,postRender:g}=c,p=()=>{const o=performance.now();n=!1,s.delta=r?1e3/60:Math.max(Math.min(o-s.timestamp,40),1),s.timestamp=o,s.isProcessing=!0,u.process(s),l.process(s),f.process(s),d.process(s),h.process(s),g.process(s),s.isProcessing=!1,n&&t&&(r=!1,e(p))};return{schedule:o.reduce((t,o)=>{const i=c[o];return t[o]=(t,o=!1,a=!1)=>(n||(n=!0,r=!0,s.isProcessing||e(p)),i.schedule(t,o,a)),t},{}),cancel:e=>{for(let t=0;t<o.length;t++)c[o[t]].cancel(e)},state:s,steps:c}}const{schedule:c,cancel:u,state:l,steps:f}=a("undefined"!=typeof requestAnimationFrame?requestAnimationFrame:e,!0);function d(e,t){let n;const r=()=>{const{currentTime:r}=t,s=(null===r?0:r.value)/100;n!==s&&e(s),n=s};return c.update(r,!0),()=>u(r)}const h=new WeakMap;let g;function p({target:e,contentRect:t,borderBoxSize:n}){var r;null===(r=h.get(e))||void 0===r||r.forEach(r=>{r({target:e,contentSize:t,get size(){return function(e,t){if(t){const{inlineSize:e,blockSize:n}=t[0];return{width:e,height:n}}return e instanceof SVGElement&&"getBBox"in e?e.getBBox():{width:e.offsetWidth,height:e.offsetHeight}}(e,n)}})})}function m(e){e.forEach(p)}function v(e,t){g||"undefined"!=typeof ResizeObserver&&(g=new ResizeObserver(m));const n=function(e,t,n){var r;if(e instanceof EventTarget)return[e];if("string"==typeof e){let s=document;t&&(s=t.current);const o=null!==(r=null==n?void 0:n[e])&&void 0!==r?r:s.querySelectorAll(e);return o?Array.from(o):[]}return Array.from(e)}(e);return n.forEach(e=>{let n=h.get(e);n||(n=new Set,h.set(e,n)),n.add(t),null==g||g.observe(e)}),()=>{n.forEach(e=>{const n=h.get(e);null==n||n.delete(t),(null==n?void 0:n.size)||null==g||g.unobserve(e)})}}const y=new Set;let b;function w(e){return y.add(e),b||(b=()=>{const e={width:window.innerWidth,height:window.innerHeight},t={target:window,size:e,contentSize:e};y.forEach(e=>e(t))},window.addEventListener("resize",b)),()=>{y.delete(e),!y.size&&b&&(b=void 0)}}const x={x:{length:"Width",position:"Left"},y:{length:"Height",position:"Top"}};function E(e,t,n,s){const o=n[t],{length:i,position:a}=x[t],c=o.current,u=n.time;o.current=e["scroll"+a],o.scrollLength=e["scroll"+i]-e["client"+i],o.offset.length=0,o.offset[0]=0,o.offset[1]=o.scrollLength,o.progress=r(0,o.scrollLength,o.current);const l=s-u;var f,d;o.velocity=l>50?0:(f=o.current-c,(d=l)?f*(1e3/d):0)}const W=(e,t,n)=>n>t?t:n<e?e:n,L=(e,t,n)=>e+(t-e)*n;function S(e,t,n){return n<0&&(n+=1),n>1&&(n-=1),n<1/6?e+6*(t-e)*n:n<.5?t:n<2/3?e+(t-e)*(2/3-n)*6:e}const M={test:e=>"number"==typeof e,parse:parseFloat,transform:e=>e},z={...M,transform:e=>W(0,1,e)},A=e=>Math.round(1e5*e)/1e5,B=/-?(?:\d+(?:\.\d+)?|\.\d+)/gu;const O=/^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu,T=(e,t)=>n=>Boolean("string"==typeof n&&O.test(n)&&n.startsWith(e)||t&&!function(e){return null==e}(n)&&Object.prototype.hasOwnProperty.call(n,t)),H=(e,t,n)=>r=>{if("string"!=typeof r)return r;const[s,o,i,a]=r.match(B);return{[e]:parseFloat(s),[t]:parseFloat(o),[n]:parseFloat(i),alpha:void 0!==a?parseFloat(a):1}},F={...M,transform:e=>Math.round((e=>W(0,255,e))(e))},P={test:T("rgb","red"),parse:H("red","green","blue"),transform:({red:e,green:t,blue:n,alpha:r=1})=>"rgba("+F.transform(e)+", "+F.transform(t)+", "+F.transform(n)+", "+A(z.transform(r))+")"};const R={test:T("#"),parse:function(e){let t="",n="",r="",s="";return e.length>5?(t=e.substring(1,3),n=e.substring(3,5),r=e.substring(5,7),s=e.substring(7,9)):(t=e.substring(1,2),n=e.substring(2,3),r=e.substring(3,4),s=e.substring(4,5),t+=t,n+=n,r+=r,s+=s),{red:parseInt(t,16),green:parseInt(n,16),blue:parseInt(r,16),alpha:s?parseInt(s,16)/255:1}},transform:P.transform},N=(e=>({test:t=>"string"==typeof t&&t.endsWith(e)&&1===t.split(" ").length,parse:parseFloat,transform:t=>`${t}${e}`}))("%"),k={test:T("hsl","hue"),parse:H("hue","saturation","lightness"),transform:({hue:e,saturation:t,lightness:n,alpha:r=1})=>"hsla("+Math.round(e)+", "+N.transform(A(t))+", "+N.transform(A(n))+", "+A(z.transform(r))+")"};function $(e,t){return n=>n>0?t:e}const q=(e,t,n)=>{const r=e*e,s=n*(t*t-r)+r;return s<0?0:Math.sqrt(s)},I=[R,P,k];function j(e){const t=(n=e,I.find(e=>e.test(n)));var n;if(!Boolean(t))return!1;let r=t.parse(e);return t===k&&(r=function({hue:e,saturation:t,lightness:n,alpha:r}){e/=360,n/=100;let s=0,o=0,i=0;if(t/=100){const r=n<.5?n*(1+t):n+t-n*t,a=2*n-r;s=S(a,r,e+1/3),o=S(a,r,e),i=S(a,r,e-1/3)}else s=o=i=n;return{red:Math.round(255*s),green:Math.round(255*o),blue:Math.round(255*i),alpha:r}}(r)),r}const G=(e,t)=>{const n=j(e),r=j(t);if(!n||!r)return $(e,t);const s={...n};return e=>(s.red=q(n.red,r.red,e),s.green=q(n.green,r.green,e),s.blue=q(n.blue,r.blue,e),s.alpha=L(n.alpha,r.alpha,e),P.transform(s))},C=(e,t)=>n=>t(e(n)),K=(...e)=>e.reduce(C),V=e=>P.test(e)||R.test(e)||k.test(e),D=e=>P.test(e)?P.parse(e):k.test(e)?k.parse(e):R.parse(e),J=e=>"string"==typeof e?e:e.hasOwnProperty("red")?P.transform(e):k.transform(e),Q=/(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;const U=/var\s*\(\s*--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)|#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\)|-?(?:\d+(?:\.\d+)?|\.\d+)/giu;function X(e){const t=e.toString(),n=[],r={color:[],number:[],var:[]},s=[];let o=0;const i=t.replace(U,e=>(V(e)?(r.color.push(o),s.push("color"),n.push(D(e))):e.startsWith("var(")?(r.var.push(o),s.push("var"),n.push(e)):(r.number.push(o),s.push("number"),n.push(parseFloat(e))),++o,"${}")).split("${}");return{values:n,split:i,indexes:r,types:s}}function Y(e){return X(e).values}function Z(e){const{split:t,types:n}=X(e),r=t.length;return e=>{let s="";for(let o=0;o<r;o++)if(s+=t[o],void 0!==e[o]){const t=n[o];s+="number"===t?A(e[o]):"color"===t?J(e[o]):e[o]}return s}}const _=e=>"number"==typeof e?0:e;const ee={test:function(e){var t,n;return isNaN(e)&&"string"==typeof e&&((null===(t=e.match(B))||void 0===t?void 0:t.length)||0)+((null===(n=e.match(Q))||void 0===n?void 0:n.length)||0)>0},parse:Y,createTransformer:Z,getAnimatableNone:function(e){const t=Y(e);return Z(e)(t.map(_))}},te=(e=>t=>"string"==typeof t&&t.startsWith(e))("var(--"),ne=/var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu,re=new Set(["none","hidden"]);function se(e,t){return n=>L(e,t,n)}function oe(e){return"number"==typeof e?se:"string"==typeof e?te(t=e)&&ne.test(t.split("/*")[0].trim())?$:V(e)?G:ce:Array.isArray(e)?ie:"object"==typeof e?V(e)?G:ae:$;var t}function ie(e,t){const n=[...e],r=n.length,s=e.map((e,n)=>oe(e)(e,t[n]));return e=>{for(let t=0;t<r;t++)n[t]=s[t](e);return n}}function ae(e,t){const n={...e,...t},r={};for(const s in n)void 0!==e[s]&&void 0!==t[s]&&(r[s]=oe(e[s])(e[s],t[s]));return e=>{for(const t in r)n[t]=r[t](e);return n}}const ce=(e,t)=>{const n=ee.createTransformer(t),r=X(e),s=X(t);return r.indexes.var.length===s.indexes.var.length&&r.indexes.color.length===s.indexes.color.length&&r.indexes.number.length>=s.indexes.number.length?re.has(e)&&!s.values.length||re.has(t)&&!r.values.length?function(e,t){return re.has(e)?n=>n<=0?e:t:n=>n>=1?t:e}(e,t):K(ie(function(e,t){var n;const r=[],s={color:0,var:0,number:0};for(let o=0;o<t.values.length;o++){const i=t.types[o],a=e.indexes[i][s[i]],c=null!==(n=e.values[a])&&void 0!==n?n:0;r[o]=c,s[i]++}return r}(r,s),s.values),n):$(e,t)};function ue(e,t,n){if("number"==typeof e&&"number"==typeof t&&"number"==typeof n)return L(e,t,n);return oe(e)(e,t)}function le(n,s,{clamp:o=!0,ease:i,mixer:a}={}){const c=n.length;if(t(c===s.length),1===c)return()=>s[0];if(2===c&&s[0]===s[1])return()=>s[1];const u=n[0]===n[1];n[0]>n[c-1]&&(n=[...n].reverse(),s=[...s].reverse());const l=function(t,n,r){const s=[],o=r||ue,i=t.length-1;for(let r=0;r<i;r++){let i=o(t[r],t[r+1]);if(n){const t=Array.isArray(n)?n[r]||e:n;i=K(t,i)}s.push(i)}return s}(s,i,a),f=l.length,d=e=>{if(u&&e<n[0])return s[0];let t=0;if(f>1)for(;t<n.length-2&&!(e<n[t+1]);t++);const o=r(n[t],n[t+1],e);return l[t](o)};return o?e=>d(W(n[0],n[c-1],e)):d}function fe(e){const t=[0];return function(e,t){const n=e[e.length-1];for(let s=1;s<=t;s++){const o=r(0,t,s);e.push(L(n,1,o))}}(t,e.length-1),t}const de={start:0,center:.5,end:1};function he(e,t,n=0){let r=0;if(e in de&&(e=de[e]),"string"==typeof e){const t=parseFloat(e);e.endsWith("px")?r=t:e.endsWith("%")?e=t/100:e.endsWith("vw")?r=t/100*document.documentElement.clientWidth:e.endsWith("vh")?r=t/100*document.documentElement.clientHeight:e=t}return"number"==typeof e&&(r=t*e),n+r}const ge=[0,0];function pe(e,t,n,r){let s=Array.isArray(e)?e:ge,o=0,i=0;return"number"==typeof e?s=[e,e]:"string"==typeof e&&(s=(e=e.trim()).includes(" ")?e.split(" "):[e,de[e]?e:"0"]),o=he(s[0],n,r),i=he(s[1],t),o-i}const me={Enter:[[0,1],[1,1]],Exit:[[0,0],[1,0]],Any:[[1,0],[0,1]],All:[[0,0],[1,1]]},ve={x:0,y:0};function ye(e,t,n){const{offset:r=me.All}=n,{target:s=e,axis:o="y"}=n,i="y"===o?"height":"width",a=s!==e?function(e,t){const n={x:0,y:0};let r=e;for(;r&&r!==t;)if(r instanceof HTMLElement)n.x+=r.offsetLeft,n.y+=r.offsetTop,r=r.offsetParent;else if("svg"===r.tagName){const e=r.getBoundingClientRect();r=r.parentElement;const t=r.getBoundingClientRect();n.x+=e.left-t.left,n.y+=e.top-t.top}else{if(!(r instanceof SVGGraphicsElement))break;{const{x:e,y:t}=r.getBBox();n.x+=e,n.y+=t;let s=null,o=r.parentNode;for(;!s;)"svg"===o.tagName&&(s=o),o=r.parentNode;r=s}}return n}(s,e):ve,c=s===e?{width:e.scrollWidth,height:e.scrollHeight}:function(e){return"getBBox"in e&&"svg"!==e.tagName?e.getBBox():{width:e.clientWidth,height:e.clientHeight}}(s),u={width:e.clientWidth,height:e.clientHeight};t[o].offset.length=0;let l=!t[o].interpolate;const f=r.length;for(let e=0;e<f;e++){const n=pe(r[e],u[i],c[i],a[o]);l||n===t[o].interpolatorOffsets[e]||(l=!0),t[o].offset[e]=n}l&&(t[o].interpolate=le(t[o].offset,fe(r),{clamp:!1}),t[o].interpolatorOffsets=[...t[o].offset]),t[o].progress=W(0,1,t[o].interpolate(t[o].current))}function be(e,t,n,r={}){return{measure:()=>function(e,t=e,n){if(n.x.targetOffset=0,n.y.targetOffset=0,t!==e){let r=t;for(;r&&r!==e;)n.x.targetOffset+=r.offsetLeft,n.y.targetOffset+=r.offsetTop,r=r.offsetParent}n.x.targetLength=t===e?t.scrollWidth:t.clientWidth,n.y.targetLength=t===e?t.scrollHeight:t.clientHeight,n.x.containerLength=e.clientWidth,n.y.containerLength=e.clientHeight}(e,r.target,n),update:t=>{!function(e,t,n){E(e,"x",t,n),E(e,"y",t,n),t.time=n}(e,n,t),(r.offset||r.target)&&ye(e,n,r)},notify:()=>t(n)}}const we=new WeakMap,xe=new WeakMap,Ee=new WeakMap,We=e=>e===document.documentElement?window:e;function Le(e,{container:t=document.documentElement,...n}={}){let r=Ee.get(t);r||(r=new Set,Ee.set(t,r));const s=be(t,e,{time:0,x:{current:0,offset:[],progress:0,scrollLength:0,targetOffset:0,targetLength:0,containerLength:0,velocity:0},y:{current:0,offset:[],progress:0,scrollLength:0,targetOffset:0,targetLength:0,containerLength:0,velocity:0}},n);if(r.add(s),!we.has(t)){const e=()=>{for(const e of r)e.measure()},n=()=>{for(const e of r)e.update(l.timestamp)},s=()=>{for(const e of r)e.notify()},a=()=>{c.read(e,!1,!0),c.read(n,!1,!0),c.update(s,!1,!0)};we.set(t,a);const u=We(t);window.addEventListener("resize",a,{passive:!0}),t!==document.documentElement&&xe.set(t,(i=a,"function"==typeof(o=t)?w(o):v(o,i))),u.addEventListener("scroll",a,{passive:!0})}var o,i;const a=we.get(t);return c.read(a,!1,!0),()=>{var e;u(a);const n=Ee.get(t);if(!n)return;if(n.delete(s),n.size)return;const r=we.get(t);we.delete(t),r&&(We(t).removeEventListener("scroll",r),null===(e=xe.get(t))||void 0===e||e(),window.removeEventListener("resize",r))}}const Se=new Map;function Me({source:e,container:t=document.documentElement,axis:n="y"}={}){e&&(t=e),Se.has(t)||Se.set(t,{});const r=Se.get(t);return r[n]||(r[n]=s()?new ScrollTimeline({source:t,axis:n}):function({source:e,container:t,axis:n="y"}){e&&(t=e);const r={value:0},s=Le(e=>{r.value=100*e[n].progress},{container:t,axis:n});return{currentTime:r,cancel:s}}({source:t,axis:n})),r[n]}function ze(e){return e&&(e.target||e.offset)}function Ae(t,{axis:n="y",...r}={}){const s={axis:n,...r};return"function"==typeof t?function(e,t){return function(e){return 2===e.length}(e)||ze(t)?Le(n=>{e(n[t.axis].progress,n)},t):d(e,Me(t))}(t,s):function(t,n){if(t.flatten(),ze(n))return t.pause(),Le(e=>{t.time=t.duration*e[n.axis].progress},n);{const r=Me(n);return t.attachTimeline?t.attachTimeline(r,e=>(e.pause(),d(t=>{e.time=e.duration*t},r))):e}}(t,s)}export{Ae as scroll};
1
+ function e(e){let t;return()=>(void 0===t&&(t=e()),t)}const t=e=>e,n=(e,t,n)=>{const r=t-e;return 0===r?1:(n-e)/r};const r=e((()=>void 0!==window.ScrollTimeline)),s={value:null,addProjectionMetrics:null},o=["read","resolveKeyframes","update","preRender","render","postRender"];function i(e,t){let n=!1,r=!0;const i={delta:0,timestamp:0,isProcessing:!1},a=()=>n=!0,c=o.reduce(((e,n)=>(e[n]=function(e,t){let n=new Set,r=new Set,o=!1,i=!1;const a=new WeakSet;let c={delta:0,timestamp:0,isProcessing:!1},u=0;function l(t){a.has(t)&&(f.schedule(t),e()),u++,t(c)}const f={schedule:(e,t=!1,s=!1)=>{const i=s&&o?n:r;return t&&a.add(e),i.has(e)||i.add(e),e},cancel:e=>{r.delete(e),a.delete(e)},process:e=>{c=e,o?i=!0:(o=!0,[n,r]=[r,n],n.forEach(l),t&&s.value&&s.value.frameloop[t].push(u),u=0,n.clear(),o=!1,i&&(i=!1,f.process(e)))}};return f}(a,t?n:void 0),e)),{}),{read:u,resolveKeyframes:l,update:f,preRender:d,render:h,postRender:g}=c,p=()=>{const s=performance.now();n=!1,i.delta=r?1e3/60:Math.max(Math.min(s-i.timestamp,40),1),i.timestamp=s,i.isProcessing=!0,u.process(i),l.process(i),f.process(i),d.process(i),h.process(i),g.process(i),i.isProcessing=!1,n&&t&&(r=!1,e(p))};return{schedule:o.reduce(((t,s)=>{const o=c[s];return t[s]=(t,s=!1,a=!1)=>(n||(n=!0,r=!0,i.isProcessing||e(p)),o.schedule(t,s,a)),t}),{}),cancel:e=>{for(let t=0;t<o.length;t++)c[o[t]].cancel(e)},state:i,steps:c}}const{schedule:a,cancel:c,state:u,steps:l}=i("undefined"!=typeof requestAnimationFrame?requestAnimationFrame:t,!0);function f(e,t){let n;const r=()=>{const{currentTime:r}=t,s=(null===r?0:r.value)/100;n!==s&&e(s),n=s};return a.update(r,!0),()=>c(r)}const d=new WeakMap;let h;function g({target:e,contentRect:t,borderBoxSize:n}){d.get(e)?.forEach((r=>{r({target:e,contentSize:t,get size(){return function(e,t){if(t){const{inlineSize:e,blockSize:n}=t[0];return{width:e,height:n}}return e instanceof SVGElement&&"getBBox"in e?e.getBBox():{width:e.offsetWidth,height:e.offsetHeight}}(e,n)}})}))}function p(e){e.forEach(g)}function m(e,t){h||"undefined"!=typeof ResizeObserver&&(h=new ResizeObserver(p));const n=function(e,t,n){if(e instanceof EventTarget)return[e];if("string"==typeof e){let r=document;t&&(r=t.current);const s=n?.[e]??r.querySelectorAll(e);return s?Array.from(s):[]}return Array.from(e)}(e);return n.forEach((e=>{let n=d.get(e);n||(n=new Set,d.set(e,n)),n.add(t),h?.observe(e)})),()=>{n.forEach((e=>{const n=d.get(e);n?.delete(t),n?.size||h?.unobserve(e)}))}}const y=new Set;let v;function b(e){return y.add(e),v||(v=()=>{const e={width:window.innerWidth,height:window.innerHeight},t={target:window,size:e,contentSize:e};y.forEach((e=>e(t)))},window.addEventListener("resize",v)),()=>{y.delete(e),!y.size&&v&&(v=void 0)}}const w={x:{length:"Width",position:"Left"},y:{length:"Height",position:"Top"}};function x(e,t,r,s){const o=r[t],{length:i,position:a}=w[t],c=o.current,u=r.time;o.current=e[`scroll${a}`],o.scrollLength=e[`scroll${i}`]-e[`client${i}`],o.offset.length=0,o.offset[0]=0,o.offset[1]=o.scrollLength,o.progress=n(0,o.scrollLength,o.current);const l=s-u;var f,d;o.velocity=l>50?0:(f=o.current-c,(d=l)?f*(1e3/d):0)}const E=(e,t,n)=>n>t?t:n<e?e:n,W=(e,t,n)=>e+(t-e)*n;function L(e,t,n){return n<0&&(n+=1),n>1&&(n-=1),n<1/6?e+6*(t-e)*n:n<.5?t:n<2/3?e+(t-e)*(2/3-n)*6:e}const S={test:e=>"number"==typeof e,parse:parseFloat,transform:e=>e},M={...S,transform:e=>E(0,1,e)},z=e=>Math.round(1e5*e)/1e5,A=/-?(?:\d+(?:\.\d+)?|\.\d+)/gu;const B=/^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu,O=(e,t)=>n=>Boolean("string"==typeof n&&B.test(n)&&n.startsWith(e)||t&&!function(e){return null==e}(n)&&Object.prototype.hasOwnProperty.call(n,t)),T=(e,t,n)=>r=>{if("string"!=typeof r)return r;const[s,o,i,a]=r.match(A);return{[e]:parseFloat(s),[t]:parseFloat(o),[n]:parseFloat(i),alpha:void 0!==a?parseFloat(a):1}},H={...S,transform:e=>Math.round((e=>E(0,255,e))(e))},F={test:O("rgb","red"),parse:T("red","green","blue"),transform:({red:e,green:t,blue:n,alpha:r=1})=>"rgba("+H.transform(e)+", "+H.transform(t)+", "+H.transform(n)+", "+z(M.transform(r))+")"};const P={test:O("#"),parse:function(e){let t="",n="",r="",s="";return e.length>5?(t=e.substring(1,3),n=e.substring(3,5),r=e.substring(5,7),s=e.substring(7,9)):(t=e.substring(1,2),n=e.substring(2,3),r=e.substring(3,4),s=e.substring(4,5),t+=t,n+=n,r+=r,s+=s),{red:parseInt(t,16),green:parseInt(n,16),blue:parseInt(r,16),alpha:s?parseInt(s,16)/255:1}},transform:F.transform},R=(e=>({test:t=>"string"==typeof t&&t.endsWith(e)&&1===t.split(" ").length,parse:parseFloat,transform:t=>`${t}${e}`}))("%"),$={test:O("hsl","hue"),parse:T("hue","saturation","lightness"),transform:({hue:e,saturation:t,lightness:n,alpha:r=1})=>"hsla("+Math.round(e)+", "+R.transform(z(t))+", "+R.transform(z(n))+", "+z(M.transform(r))+")"};function N(e,t){return n=>n>0?t:e}const k=(e,t,n)=>{const r=e*e,s=n*(t*t-r)+r;return s<0?0:Math.sqrt(s)},q=[P,F,$];function I(e){const t=(n=e,q.find((e=>e.test(n))));var n;if(!Boolean(t))return!1;let r=t.parse(e);return t===$&&(r=function({hue:e,saturation:t,lightness:n,alpha:r}){e/=360,n/=100;let s=0,o=0,i=0;if(t/=100){const r=n<.5?n*(1+t):n+t-n*t,a=2*n-r;s=L(a,r,e+1/3),o=L(a,r,e),i=L(a,r,e-1/3)}else s=o=i=n;return{red:Math.round(255*s),green:Math.round(255*o),blue:Math.round(255*i),alpha:r}}(r)),r}const j=(e,t)=>{const n=I(e),r=I(t);if(!n||!r)return N(e,t);const s={...n};return e=>(s.red=k(n.red,r.red,e),s.green=k(n.green,r.green,e),s.blue=k(n.blue,r.blue,e),s.alpha=W(n.alpha,r.alpha,e),F.transform(s))},G=(e,t)=>n=>t(e(n)),C=(...e)=>e.reduce(G),K=e=>F.test(e)||P.test(e)||$.test(e),V=e=>F.test(e)?F.parse(e):$.test(e)?$.parse(e):P.parse(e),D=e=>"string"==typeof e?e:e.hasOwnProperty("red")?F.transform(e):$.transform(e),J=/(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;const Q="number",U="color",X=/var\s*\(\s*--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)|#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\)|-?(?:\d+(?:\.\d+)?|\.\d+)/giu;function Y(e){const t=e.toString(),n=[],r={color:[],number:[],var:[]},s=[];let o=0;const i=t.replace(X,(e=>(K(e)?(r.color.push(o),s.push(U),n.push(V(e))):e.startsWith("var(")?(r.var.push(o),s.push("var"),n.push(e)):(r.number.push(o),s.push(Q),n.push(parseFloat(e))),++o,"${}"))).split("${}");return{values:n,split:i,indexes:r,types:s}}function Z(e){return Y(e).values}function _(e){const{split:t,types:n}=Y(e),r=t.length;return e=>{let s="";for(let o=0;o<r;o++)if(s+=t[o],void 0!==e[o]){const t=n[o];s+=t===Q?z(e[o]):t===U?D(e[o]):e[o]}return s}}const ee=e=>"number"==typeof e?0:e;const te={test:function(e){return isNaN(e)&&"string"==typeof e&&(e.match(A)?.length||0)+(e.match(J)?.length||0)>0},parse:Z,createTransformer:_,getAnimatableNone:function(e){const t=Z(e);return _(e)(t.map(ee))}},ne=(e=>t=>"string"==typeof t&&t.startsWith(e))("var(--"),re=/var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu,se=new Set(["none","hidden"]);function oe(e,t){return n=>W(e,t,n)}function ie(e){return"number"==typeof e?oe:"string"==typeof e?ne(t=e)&&re.test(t.split("/*")[0].trim())?N:K(e)?j:ue:Array.isArray(e)?ae:"object"==typeof e?K(e)?j:ce:N;var t}function ae(e,t){const n=[...e],r=n.length,s=e.map(((e,n)=>ie(e)(e,t[n])));return e=>{for(let t=0;t<r;t++)n[t]=s[t](e);return n}}function ce(e,t){const n={...e,...t},r={};for(const s in n)void 0!==e[s]&&void 0!==t[s]&&(r[s]=ie(e[s])(e[s],t[s]));return e=>{for(const t in r)n[t]=r[t](e);return n}}const ue=(e,t)=>{const n=te.createTransformer(t),r=Y(e),s=Y(t);return r.indexes.var.length===s.indexes.var.length&&r.indexes.color.length===s.indexes.color.length&&r.indexes.number.length>=s.indexes.number.length?se.has(e)&&!s.values.length||se.has(t)&&!r.values.length?function(e,t){return se.has(e)?n=>n<=0?e:t:n=>n>=1?t:e}(e,t):C(ae(function(e,t){const n=[],r={color:0,var:0,number:0};for(let s=0;s<t.values.length;s++){const o=t.types[s],i=e.indexes[o][r[o]],a=e.values[i]??0;n[s]=a,r[o]++}return n}(r,s),s.values),n):N(e,t)};function le(e,t,n){if("number"==typeof e&&"number"==typeof t&&"number"==typeof n)return W(e,t,n);return ie(e)(e,t)}function fe(e,r,{clamp:s=!0,ease:o,mixer:i}={}){const a=e.length;if(r.length,1===a)return()=>r[0];if(2===a&&r[0]===r[1])return()=>r[1];const c=e[0]===e[1];e[0]>e[a-1]&&(e=[...e].reverse(),r=[...r].reverse());const u=function(e,n,r){const s=[],o=r||le,i=e.length-1;for(let r=0;r<i;r++){let i=o(e[r],e[r+1]);if(n){const e=Array.isArray(n)?n[r]||t:n;i=C(e,i)}s.push(i)}return s}(r,o,i),l=u.length,f=t=>{if(c&&t<e[0])return r[0];let s=0;if(l>1)for(;s<e.length-2&&!(t<e[s+1]);s++);const o=n(e[s],e[s+1],t);return u[s](o)};return s?t=>f(E(e[0],e[a-1],t)):f}function de(e){const t=[0];return function(e,t){const r=e[e.length-1];for(let s=1;s<=t;s++){const o=n(0,t,s);e.push(W(r,1,o))}}(t,e.length-1),t}const he={start:0,center:.5,end:1};function ge(e,t,n=0){let r=0;if(e in he&&(e=he[e]),"string"==typeof e){const t=parseFloat(e);e.endsWith("px")?r=t:e.endsWith("%")?e=t/100:e.endsWith("vw")?r=t/100*document.documentElement.clientWidth:e.endsWith("vh")?r=t/100*document.documentElement.clientHeight:e=t}return"number"==typeof e&&(r=t*e),n+r}const pe=[0,0];function me(e,t,n,r){let s=Array.isArray(e)?e:pe,o=0,i=0;return"number"==typeof e?s=[e,e]:"string"==typeof e&&(s=(e=e.trim()).includes(" ")?e.split(" "):[e,he[e]?e:"0"]),o=ge(s[0],n,r),i=ge(s[1],t),o-i}const ye={Enter:[[0,1],[1,1]],Exit:[[0,0],[1,0]],Any:[[1,0],[0,1]],All:[[0,0],[1,1]]},ve={x:0,y:0};function be(e,t,n){const{offset:r=ye.All}=n,{target:s=e,axis:o="y"}=n,i="y"===o?"height":"width",a=s!==e?function(e,t){const n={x:0,y:0};let r=e;for(;r&&r!==t;)if(r instanceof HTMLElement)n.x+=r.offsetLeft,n.y+=r.offsetTop,r=r.offsetParent;else if("svg"===r.tagName){const e=r.getBoundingClientRect();r=r.parentElement;const t=r.getBoundingClientRect();n.x+=e.left-t.left,n.y+=e.top-t.top}else{if(!(r instanceof SVGGraphicsElement))break;{const{x:e,y:t}=r.getBBox();n.x+=e,n.y+=t;let s=null,o=r.parentNode;for(;!s;)"svg"===o.tagName&&(s=o),o=r.parentNode;r=s}}return n}(s,e):ve,c=s===e?{width:e.scrollWidth,height:e.scrollHeight}:function(e){return"getBBox"in e&&"svg"!==e.tagName?e.getBBox():{width:e.clientWidth,height:e.clientHeight}}(s),u={width:e.clientWidth,height:e.clientHeight};t[o].offset.length=0;let l=!t[o].interpolate;const f=r.length;for(let e=0;e<f;e++){const n=me(r[e],u[i],c[i],a[o]);l||n===t[o].interpolatorOffsets[e]||(l=!0),t[o].offset[e]=n}l&&(t[o].interpolate=fe(t[o].offset,de(r),{clamp:!1}),t[o].interpolatorOffsets=[...t[o].offset]),t[o].progress=E(0,1,t[o].interpolate(t[o].current))}function we(e,t,n,r={}){return{measure:()=>function(e,t=e,n){if(n.x.targetOffset=0,n.y.targetOffset=0,t!==e){let r=t;for(;r&&r!==e;)n.x.targetOffset+=r.offsetLeft,n.y.targetOffset+=r.offsetTop,r=r.offsetParent}n.x.targetLength=t===e?t.scrollWidth:t.clientWidth,n.y.targetLength=t===e?t.scrollHeight:t.clientHeight,n.x.containerLength=e.clientWidth,n.y.containerLength=e.clientHeight}(e,r.target,n),update:t=>{!function(e,t,n){x(e,"x",t,n),x(e,"y",t,n),t.time=n}(e,n,t),(r.offset||r.target)&&be(e,n,r)},notify:()=>t(n)}}const xe=new WeakMap,Ee=new WeakMap,We=new WeakMap,Le=e=>e===document.documentElement?window:e;function Se(e,{container:t=document.documentElement,...n}={}){let r=We.get(t);r||(r=new Set,We.set(t,r));const s=we(t,e,{time:0,x:{current:0,offset:[],progress:0,scrollLength:0,targetOffset:0,targetLength:0,containerLength:0,velocity:0},y:{current:0,offset:[],progress:0,scrollLength:0,targetOffset:0,targetLength:0,containerLength:0,velocity:0}},n);if(r.add(s),!xe.has(t)){const e=()=>{for(const e of r)e.measure()},n=()=>{for(const e of r)e.update(u.timestamp)},s=()=>{for(const e of r)e.notify()},c=()=>{a.read(e,!1,!0),a.read(n,!1,!0),a.update(s,!1,!0)};xe.set(t,c);const l=Le(t);window.addEventListener("resize",c,{passive:!0}),t!==document.documentElement&&Ee.set(t,(i=c,"function"==typeof(o=t)?b(o):m(o,i))),l.addEventListener("scroll",c,{passive:!0})}var o,i;const l=xe.get(t);return a.read(l,!1,!0),()=>{c(l);const e=We.get(t);if(!e)return;if(e.delete(s),e.size)return;const n=xe.get(t);xe.delete(t),n&&(Le(t).removeEventListener("scroll",n),Ee.get(t)?.(),window.removeEventListener("resize",n))}}const Me=new Map;function ze({source:e,container:t=document.documentElement,axis:n="y"}={}){e&&(t=e),Me.has(t)||Me.set(t,{});const s=Me.get(t);return s[n]||(s[n]=r()?new ScrollTimeline({source:t,axis:n}):function({source:e,container:t,axis:n="y"}){e&&(t=e);const r={value:0},s=Se((e=>{r.value=100*e[n].progress}),{container:t,axis:n});return{currentTime:r,cancel:s}}({source:t,axis:n})),s[n]}function Ae(e){return e&&(e.target||e.offset)}function Be(e,{axis:n="y",...r}={}){const s={axis:n,...r};return"function"==typeof e?function(e,t){return function(e){return 2===e.length}(e)||Ae(t)?Se((n=>{e(n[t.axis].progress,n)}),t):f(e,ze(t))}(e,s):function(e,n){if(e.flatten(),Ae(n))return e.pause(),Se((t=>{e.time=e.duration*t[n.axis].progress}),n);{const r=ze(n);return e.attachTimeline?e.attachTimeline(r,(e=>(e.pause(),f((t=>{e.time=e.duration*t}),r)))):t}}(e,s)}export{Be as scroll};
@@ -1 +1 @@
1
- const t=t=>t;let e=t;function i(t){let e;return()=>(void 0===e&&(e=t()),e)}const n=(t,e,i)=>{const n=e-t;return 0===n?1:(i-t)/n},a=t=>1e3*t,s=t=>t/1e3,o=i(()=>void 0!==window.ScrollTimeline);class r extends class{constructor(t){this.stop=()=>this.runAll("stop"),this.animations=t.filter(Boolean)}get finished(){return Promise.all(this.animations.map(t=>"finished"in t?t.finished:t))}getAll(t){return this.animations[0][t]}setAll(t,e){for(let i=0;i<this.animations.length;i++)this.animations[i][t]=e}attachTimeline(t,e){const i=this.animations.map(i=>o()&&i.attachTimeline?i.attachTimeline(t):"function"==typeof e?e(i):void 0);return()=>{i.forEach((t,e)=>{t&&t(),this.animations[e].stop()})}}get time(){return this.getAll("time")}set time(t){this.setAll("time",t)}get speed(){return this.getAll("speed")}set speed(t){this.setAll("speed",t)}get startTime(){return this.getAll("startTime")}get duration(){let t=0;for(let e=0;e<this.animations.length;e++)t=Math.max(t,this.animations[e].duration);return t}runAll(t){this.animations.forEach(e=>e[t]())}flatten(){this.runAll("flatten")}play(){this.runAll("play")}pause(){this.runAll("pause")}cancel(){this.runAll("cancel")}complete(){this.runAll("complete")}}{then(t,e){return Promise.all(this.animations).then(t).catch(e)}}const l={linearEasing:void 0};function u(t,e){const n=i(t);return()=>{var t;return null!==(t=l[e])&&void 0!==t?t:n()}}const h=u(()=>{try{document.createElement("div").animate({opacity:0},{easing:"linear(0, 1)"})}catch(t){return!1}return!0},"linearEasing"),m=([t,e,i,n])=>`cubic-bezier(${t}, ${e}, ${i}, ${n})`,c={linear:"linear",ease:"ease",easeIn:"ease-in",easeOut:"ease-out",easeInOut:"ease-in-out",circIn:m([0,.65,.55,1]),circOut:m([.55,0,1,.45]),backIn:m([.31,.01,.66,-.59]),backOut:m([.33,1.53,.69,.99])};function d(t,e){return t?"function"==typeof t&&h()?((t,e,i=10)=>{let a="";const s=Math.max(Math.round(e/i),2);for(let e=0;e<s;e++)a+=t(n(0,s-1,e))+", ";return`linear(${a.substring(0,a.length-2)})`})(t,e):(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?m(t):Array.isArray(t)?t.map(t=>d(t,e)||c.easeOut):c[t]:void 0}const p=(t=>({test:e=>"string"==typeof e&&e.endsWith(t)&&1===e.split(" ").length,parse:parseFloat,transform:e=>`${e}${t}`}))("px"),f={borderWidth:p,borderTopWidth:p,borderRightWidth:p,borderBottomWidth:p,borderLeftWidth:p,borderRadius:p,radius:p,borderTopLeftRadius:p,borderTopRightRadius:p,borderBottomRightRadius:p,borderBottomLeftRadius:p,width:p,maxWidth:p,height:p,maxHeight:p,top:p,right:p,bottom:p,left:p,padding:p,paddingTop:p,paddingRight:p,paddingBottom:p,paddingLeft:p,margin:p,marginTop:p,marginRight:p,marginBottom:p,marginLeft:p,backgroundPositionX:p,backgroundPositionY:p},y=t=>null!==t;function g(t,e,i){t.style.setProperty(e,i)}function v(t,e,i){t.style[e]=i}const A=i(()=>{try{document.createElement("div").animate({opacity:[1]})}catch(t){return!1}return!0}),b=i(()=>Object.hasOwnProperty.call(Element.prototype,"animate")),T=new WeakMap;function P(t){const e=T.get(t)||new Map;return T.set(t,e),T.get(t)}class w extends class{constructor(t){this.animation=t}get duration(){var t,e,i;const n=(null===(e=null===(t=this.animation)||void 0===t?void 0:t.effect)||void 0===e?void 0:e.getComputedTiming().duration)||(null===(i=this.options)||void 0===i?void 0:i.duration)||300;return s(Number(n))}get time(){var t;return this.animation?s((null===(t=this.animation)||void 0===t?void 0:t.currentTime)||0):0}set time(t){this.animation&&(this.animation.currentTime=a(t))}get speed(){return this.animation?this.animation.playbackRate:1}set speed(t){this.animation&&(this.animation.playbackRate=t)}get state(){return this.animation?this.animation.playState:"finished"}get startTime(){return this.animation?this.animation.startTime:null}get finished(){return this.animation?this.animation.finished:Promise.resolve()}play(){this.animation&&this.animation.play()}pause(){this.animation&&this.animation.pause()}stop(){this.animation&&"idle"!==this.state&&"finished"!==this.state&&(this.animation.commitStyles&&this.animation.commitStyles(),this.cancel())}flatten(){var t,e;this.animation&&(null===(t=this.options)||void 0===t?void 0:t.allowFlatten)&&(null===(e=this.animation.effect)||void 0===e||e.updateTiming({easing:"linear"}))}attachTimeline(e){return this.animation&&function(t,e){t.timeline=e,t.onfinish=null}(this.animation,e),t}complete(){this.animation&&this.animation.finish()}cancel(){try{this.animation&&this.animation.cancel()}catch(t){}}}{constructor(t,i,n,o){const r=i.startsWith("--");e("string"!=typeof o.type);const l=P(t).get(i);l&&l.stop();if(Array.isArray(n)||(n=[n]),function(t,e,i){for(let n=0;n<e.length;n++)null===e[n]&&(e[n]=0===n?i():e[n-1]),"number"==typeof e[n]&&f[t]&&(e[n]=f[t].transform(e[n]));!A()&&e.length<2&&e.unshift(i())}(i,n,()=>i.startsWith("--")?t.style.getPropertyValue(i):window.getComputedStyle(t)[i]),"function"==typeof o.type){const t=function(t,e=100,i){const n=i({...t,keyframes:[0,e]}),a=Math.min(function(t){let e=0,i=t.next(e);for(;!i.done&&e<2e4;)e+=50,i=t.next(e);return e>=2e4?1/0:e}(n),2e4);return{type:"keyframes",ease:t=>n.next(a*t).value/e,duration:s(a)}}(o,100,o.type);o.ease=h()?t.ease:"easeOut",o.duration=a(t.duration),o.type="keyframes"}else o.ease=o.ease||"easeOut";const u=()=>{this.setValue(t,i,function(t,{repeat:e,repeatType:i="loop"},n){const a=t.filter(y),s=e&&"loop"!==i&&e%2==1?0:a.length-1;return s&&void 0!==n?n:a[s]}(n,o)),this.cancel(),this.resolveFinishedPromise()},m=()=>{this.setValue=r?g:v,this.options=o,this.updateFinishedPromise(),this.removeAnimation=()=>{const e=T.get(t);e&&e.delete(i)}};b()?(super(function(t,e,i,{delay:n=0,duration:a=300,repeat:s=0,repeatType:o="loop",ease:r="easeInOut",times:l}={}){const u={[e]:i};l&&(u.offset=l);const h=d(r,a);return Array.isArray(h)&&(u.easing=h),t.animate(u,{delay:n,duration:a,easing:Array.isArray(h)?"linear":h,fill:"both",iterations:s+1,direction:"reverse"===o?"alternate":"normal"})}(t,i,n,o)),m(),!1===o.autoplay&&this.animation.pause(),this.animation.onfinish=u,P(t).set(i,this)):(super(),m(),u())}then(t,e){return this.currentFinishedPromise.then(t,e)}updateFinishedPromise(){this.currentFinishedPromise=new Promise(t=>{this.resolveFinishedPromise=t})}play(){"finished"===this.state&&this.updateFinishedPromise(),super.play()}cancel(){this.removeAnimation(),super.cancel()}}function R(t,e,i,n){const s=function(t,e,i){var n;if(t instanceof EventTarget)return[t];if("string"==typeof t){let a=document;e&&(a=e.current);const s=null!==(n=null==i?void 0:i[t])&&void 0!==n?n:a.querySelectorAll(t);return s?Array.from(s):[]}return Array.from(t)}(t,n),o=s.length,r=[];for(let t=0;t<o;t++){const n=s[t],h={...i};"function"==typeof h.delay&&(h.delay=h.delay(t,o));for(const t in e){const i=e[t],s={...(l=h,u=t,l?l[u]||l.default||l:void 0)};s.duration=s.duration?a(s.duration):s.duration,s.delay=a(s.delay||0),s.allowFlatten=!h.type&&!h.ease,r.push(new w(n,t,i,s))}}var l,u;return r}const x=t=>function(e,i,n){return new r(R(e,i,n,t))},k=x();export{k as animateMini,x as createScopedWaapiAnimate};
1
+ function t(t){let e;return()=>(void 0===e&&(e=t()),e)}const e=t=>t,n=t=>1e3*t,i=t=>t/1e3,a=t((()=>void 0!==window.ScrollTimeline));class r{constructor(t){this.stop=()=>this.runAll("stop"),this.animations=t.filter(Boolean)}get finished(){return Promise.all(this.animations.map((t=>t.finished)))}getAll(t){return this.animations[0][t]}setAll(t,e){for(let n=0;n<this.animations.length;n++)this.animations[n][t]=e}attachTimeline(t,e){const n=this.animations.map((n=>a()&&n.attachTimeline?n.attachTimeline(t):"function"==typeof e?e(n):void 0));return()=>{n.forEach(((t,e)=>{t&&t(),this.animations[e].stop()}))}}get time(){return this.getAll("time")}set time(t){this.setAll("time",t)}get speed(){return this.getAll("speed")}set speed(t){this.setAll("speed",t)}get startTime(){return this.getAll("startTime")}get duration(){let t=0;for(let e=0;e<this.animations.length;e++)t=Math.max(t,this.animations[e].duration);return t}runAll(t){this.animations.forEach((e=>e[t]()))}flatten(){this.runAll("flatten")}play(){this.runAll("play")}pause(){this.runAll("pause")}cancel(){this.runAll("cancel")}complete(){this.runAll("complete")}}class o extends r{then(t,e){return this.finished.finally(t).then((()=>{}))}}const s=t=>t.startsWith("--"),l=(t,e,n)=>{s(e)?t.style.setProperty(e,n):t.style[e]=n},u=(t,e)=>s(e)?t.style.getPropertyValue(e):t.style[e],m=t=>null!==t;const c=t((()=>{try{document.createElement("div").animate({opacity:[1]})}catch(t){return!1}return!0})),h=new Set(["borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderRadius","radius","borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius","width","maxWidth","height","maxHeight","top","right","bottom","left","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginTop","marginRight","marginBottom","marginLeft","backgroundPositionX","backgroundPositionY"]);const d={};function p(e,n){const i=t(e);return()=>d[n]??i()}const f=p((()=>{try{document.createElement("div").animate({opacity:0},{easing:"linear(0, 1)"})}catch(t){return!1}return!0}),"linearEasing"),y=([t,e,n,i])=>`cubic-bezier(${t}, ${e}, ${n}, ${i})`,g={linear:"linear",ease:"ease",easeIn:"ease-in",easeOut:"ease-out",easeInOut:"ease-in-out",circIn:y([0,.65,.55,1]),circOut:y([.55,0,1,.45]),backIn:y([.31,.01,.66,-.59]),backOut:y([.33,1.53,.69,.99])};function A(t,e){return t?"function"==typeof t&&f()?((t,e,n=10)=>{let i="";const a=Math.max(Math.round(e/n),2);for(let e=0;e<a;e++)i+=t(e/(a-1))+", ";return`linear(${i.substring(0,i.length-2)})`})(t,e):(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?y(t):Array.isArray(t)?t.map((t=>A(t,e)||g.easeOut)):g[t]:void 0}const b=new WeakMap;class T{constructor(t){if("animation"in t)return void(this.animation=t.animation);const{element:e,name:n,keyframes:i,pseudoElement:a,allowFlatten:r=!1}=t;let{transition:o}=t;this.allowFlatten=r;const s=function(t){const e=b.get(t)||new Map;return b.set(t,e),e}(e),d=((t,e)=>`${t}:${e}`)(n,a||""),p=s.get(d);p&&p.stop();const f=function(t,e,n,i){Array.isArray(n)||(n=[n]);for(let a=0;a<n.length;a++)null===n[a]&&(n[a]=0!==a||i?n[a-1]:u(t,e)),"number"==typeof n[a]&&h.has(e)&&(n[a]=n[a]+"px");return!i&&!c()&&n.length<2&&n.unshift(u(t,e)),n}(e,n,i,a);o.type,o=function({type:t,...e}){return function(t){return"function"==typeof t&&"applyToOptions"in t}(t)?t.applyToOptions(e):(e.duration??(e.duration=300),e.ease??(e.ease="easeOut"),e)}(o),this.animation=function(t,e,n,{delay:i=0,duration:a=300,repeat:r=0,repeatType:o="loop",ease:s="easeInOut",times:l}={},u){const m={[e]:n};l&&(m.offset=l);const c=A(s,a);return Array.isArray(c)&&(m.easing=c),t.animate(m,{delay:i,duration:a,easing:Array.isArray(c)?"linear":c,fill:"both",iterations:r+1,direction:"reverse"===o?"alternate":"normal",pseudoElement:u})}(e,n,f,o,a),!1===o.autoplay&&this.animation.pause(),this.removeAnimation=()=>s.delete(d),this.animation.onfinish=()=>{a?this.commitStyles():l(e,n,function(t,{repeat:e,repeatType:n="loop"},i){const a=t.filter(m),r=e&&"loop"!==n&&e%2==1?0:a.length-1;return r&&void 0!==i?i:a[r]}(f,o)),this.cancel()},s.set(d,this)}play(){this.animation.play()}pause(){this.animation.pause()}complete(){this.animation.finish()}cancel(){try{this.animation.cancel()}catch(t){}this.removeAnimation()}stop(){const{state:t}=this;"idle"!==t&&"finished"!==t&&(this.commitStyles(),this.cancel())}commitStyles(){this.animation.commitStyles?.()}get duration(){console.log(this.animation.effect?.getComputedTiming());const t=this.animation.effect?.getComputedTiming().duration||0;return i(Number(t))}get time(){return i(Number(this.animation.currentTime)||0)}set time(t){this.animation.currentTime=n(t)}get speed(){return this.animation.playbackRate}set speed(t){this.animation.playbackRate=t}get state(){return this.animation.playState}get startTime(){return Number(this.animation.startTime)}get finished(){return this.animation.finished}flatten(){this.allowFlatten&&this.animation.effect?.updateTiming({easing:"linear"})}attachTimeline(t){return this.animation.timeline=t,this.animation.onfinish=null,e}then(t,e){return this.finished.then(t).catch(e)}}function v(t,e,i,a){const r=function(t,e,n){if(t instanceof EventTarget)return[t];if("string"==typeof t){let i=document;e&&(i=e.current);const a=n?.[t]??i.querySelectorAll(t);return a?Array.from(a):[]}return Array.from(t)}(t,a),o=r.length,s=[];for(let t=0;t<o;t++){const a=r[t],m={...i};"function"==typeof m.delay&&(m.delay=m.delay(t,o));for(const t in e){const i=e[t],r={...(l=m,u=t,l?.[u]??l?.default??l)};r.duration&&(r.duration=n(r.duration)),r.delay&&(r.delay=n(r.delay)),s.push(new T({element:a,name:t,keyframes:i,transition:r,allowFlatten:!m.type&&!m.ease}))}}var l,u;return s}const w=t=>function(e,n,i){return new o(v(e,n,i,t))},R=w();export{R as animateMini,w as createScopedWaapiAnimate};
@@ -5,7 +5,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
5
5
  import * as React$1 from 'react';
6
6
  import { useEffect, RefObject } from 'react';
7
7
  import * as motion_dom from 'motion-dom';
8
- import { MotionValue, UnresolvedValueKeyframe, Transition, ElementOrSelector, DOMKeyframesDefinition, AnimationOptions, AnimationPlaybackOptions, Easing, AnimationScope, AnimationPlaybackControls, ValueAnimationTransition, EasingFunction, EasingModifier, ValueAnimationOptions, KeyframeGenerator, DynamicOption, MotionValueEventCallbacks, SpringOptions, RepeatType, AnimationState } from 'motion-dom';
8
+ import { MotionValue, UnresolvedValueKeyframe, Transition, ElementOrSelector, DOMKeyframesDefinition, AnimationOptions, AnimationPlaybackOptions, Easing, AnimationScope, AnimationPlaybackControlsWithThen, ValueAnimationTransition, EasingFunction, EasingModifier, ValueAnimationOptions, KeyframeGenerator, DynamicOption, MotionValueEventCallbacks, SpringOptions, RepeatType, AnimationPlaybackControls, AnimationState } from 'motion-dom';
9
9
  export * from 'motion-dom';
10
10
  export { BezierDefinition, Easing, EasingDefinition, EasingFunction, EasingModifier, MotionValue, cancelFrame, frame, frameData, hover, isDragActive, motionValue, press, time } from 'motion-dom';
11
11
  export { MotionGlobalConfig, invariant, noop, progress } from 'motion-utils';
@@ -376,23 +376,23 @@ type ResolvedAnimationDefinitions = Map<Element | MotionValue, ResolvedAnimation
376
376
  * to a specific element.
377
377
  */
378
378
  declare function createScopedAnimate(scope?: AnimationScope): {
379
- (sequence: AnimationSequence, options?: SequenceOptions): AnimationPlaybackControls;
380
- (value: string | MotionValue<string>, keyframes: string | GenericKeyframesTarget<string>, options?: ValueAnimationTransition<string>): AnimationPlaybackControls;
381
- (value: number | MotionValue<number>, keyframes: number | GenericKeyframesTarget<number>, options?: ValueAnimationTransition<number>): AnimationPlaybackControls;
382
- <V>(value: V | MotionValue<V>, keyframes: V | GenericKeyframesTarget<V>, options?: ValueAnimationTransition<V>): AnimationPlaybackControls;
383
- (element: ElementOrSelector, keyframes: DOMKeyframesDefinition, options?: AnimationOptions): AnimationPlaybackControls;
384
- <O extends {}>(object: O | O[], keyframes: ObjectTarget<O>, options?: AnimationOptions): AnimationPlaybackControls;
379
+ (sequence: AnimationSequence, options?: SequenceOptions): AnimationPlaybackControlsWithThen;
380
+ (value: string | MotionValue<string>, keyframes: string | GenericKeyframesTarget<string>, options?: ValueAnimationTransition<string>): AnimationPlaybackControlsWithThen;
381
+ (value: number | MotionValue<number>, keyframes: number | GenericKeyframesTarget<number>, options?: ValueAnimationTransition<number>): AnimationPlaybackControlsWithThen;
382
+ <V>(value: V | MotionValue<V>, keyframes: V | GenericKeyframesTarget<V>, options?: ValueAnimationTransition<V>): AnimationPlaybackControlsWithThen;
383
+ (element: ElementOrSelector, keyframes: DOMKeyframesDefinition, options?: AnimationOptions): AnimationPlaybackControlsWithThen;
384
+ <O extends {}>(object: O | O[], keyframes: ObjectTarget<O>, options?: AnimationOptions): AnimationPlaybackControlsWithThen;
385
385
  };
386
386
  declare const animate: {
387
- (sequence: AnimationSequence, options?: SequenceOptions): AnimationPlaybackControls;
388
- (value: string | MotionValue<string>, keyframes: string | GenericKeyframesTarget<string>, options?: ValueAnimationTransition<string>): AnimationPlaybackControls;
389
- (value: number | MotionValue<number>, keyframes: number | GenericKeyframesTarget<number>, options?: ValueAnimationTransition<number>): AnimationPlaybackControls;
390
- <V>(value: V | MotionValue<V>, keyframes: V | GenericKeyframesTarget<V>, options?: ValueAnimationTransition<V>): AnimationPlaybackControls;
391
- (element: ElementOrSelector, keyframes: DOMKeyframesDefinition, options?: AnimationOptions): AnimationPlaybackControls;
392
- <O extends {}>(object: O | O[], keyframes: ObjectTarget<O>, options?: AnimationOptions): AnimationPlaybackControls;
387
+ (sequence: AnimationSequence, options?: SequenceOptions): AnimationPlaybackControlsWithThen;
388
+ (value: string | MotionValue<string>, keyframes: string | GenericKeyframesTarget<string>, options?: ValueAnimationTransition<string>): AnimationPlaybackControlsWithThen;
389
+ (value: number | MotionValue<number>, keyframes: number | GenericKeyframesTarget<number>, options?: ValueAnimationTransition<number>): AnimationPlaybackControlsWithThen;
390
+ <V>(value: V | MotionValue<V>, keyframes: V | GenericKeyframesTarget<V>, options?: ValueAnimationTransition<V>): AnimationPlaybackControlsWithThen;
391
+ (element: ElementOrSelector, keyframes: DOMKeyframesDefinition, options?: AnimationOptions): AnimationPlaybackControlsWithThen;
392
+ <O extends {}>(object: O | O[], keyframes: ObjectTarget<O>, options?: AnimationOptions): AnimationPlaybackControlsWithThen;
393
393
  };
394
394
 
395
- declare const animateMini: (elementOrSelector: ElementOrSelector, keyframes: DOMKeyframesDefinition, options?: AnimationOptions) => AnimationPlaybackControls;
395
+ declare const animateMini: (elementOrSelector: ElementOrSelector, keyframes: DOMKeyframesDefinition, options?: AnimationOptions) => AnimationPlaybackControlsWithThen;
396
396
 
397
397
  declare function scrollInfo(onScroll: OnScrollInfo, { container, ...options }?: ScrollInfoOptions): () => void;
398
398
 
@@ -434,6 +434,9 @@ declare function inertia({ keyframes, velocity, power, timeConstant, bounceDampi
434
434
  declare function keyframes<T extends string | number>({ duration, keyframes: keyframeValues, times, ease, }: ValueAnimationOptions<T>): KeyframeGenerator<T>;
435
435
 
436
436
  declare function spring(optionsOrVisualDuration?: ValueAnimationOptions<number> | number, bounce?: number): KeyframeGenerator<number>;
437
+ declare namespace spring {
438
+ var applyToOptions: (options: Transition) => Transition;
439
+ }
437
440
 
438
441
  type StaggerOrigin = "first" | "last" | "center" | number;
439
442
  type StaggerOptions = {
@@ -939,6 +942,7 @@ declare abstract class BaseAnimation<T extends string | number, Resolved> implem
939
942
  abstract get duration(): number;
940
943
  abstract get state(): AnimationPlayState;
941
944
  abstract get startTime(): number | null;
945
+ abstract get finished(): Promise<void>;
942
946
  /**
943
947
  * A getter for resolved data. If keyframes are not yet resolved, accessing
944
948
  * this.resolved will synchronously flush all pending keyframe resolvers.
@@ -999,6 +1003,7 @@ declare class AcceleratedAnimation<T extends string | number> extends BaseAnimat
999
1003
  get time(): number;
1000
1004
  set time(newTime: number);
1001
1005
  get speed(): number;
1006
+ get finished(): Promise<void>;
1002
1007
  set speed(newSpeed: number);
1003
1008
  get state(): AnimationPlayState;
1004
1009
  get startTime(): number | null;
@@ -1103,6 +1108,7 @@ declare class MainThreadAnimation<T extends string | number> extends BaseAnimati
1103
1108
  private teardown;
1104
1109
  private stopDriver;
1105
1110
  sample(time: number): AnimationState<T>;
1111
+ get finished(): Promise<void>;
1106
1112
  }
1107
1113
  declare function animateValue(options: ValueAnimationOptionsWithRenderContext<any>): MainThreadAnimation<any>;
1108
1114
 
@@ -1112,15 +1118,15 @@ declare function animateValue(options: ValueAnimationOptionsWithRenderContext<an
1112
1118
  declare function animationControls(): AnimationControls;
1113
1119
 
1114
1120
  declare function useAnimate<T extends Element = any>(): [AnimationScope<T>, {
1115
- (sequence: AnimationSequence, options?: SequenceOptions | undefined): motion_dom.AnimationPlaybackControls;
1116
- (value: string | motion_dom.MotionValue<string>, keyframes: string | GenericKeyframesTarget<string>, options?: motion_dom.ValueAnimationTransition<string> | undefined): motion_dom.AnimationPlaybackControls;
1117
- (value: number | motion_dom.MotionValue<number>, keyframes: number | GenericKeyframesTarget<number>, options?: motion_dom.ValueAnimationTransition<number> | undefined): motion_dom.AnimationPlaybackControls;
1118
- <V>(value: V | motion_dom.MotionValue<V>, keyframes: V | GenericKeyframesTarget<V>, options?: motion_dom.ValueAnimationTransition<V> | undefined): motion_dom.AnimationPlaybackControls;
1119
- (element: motion_dom.ElementOrSelector, keyframes: motion_dom.DOMKeyframesDefinition, options?: motion_dom.AnimationOptions | undefined): motion_dom.AnimationPlaybackControls;
1120
- <O extends {}>(object: O | O[], keyframes: ObjectTarget<O>, options?: motion_dom.AnimationOptions | undefined): motion_dom.AnimationPlaybackControls;
1121
+ (sequence: AnimationSequence, options?: SequenceOptions | undefined): motion_dom.AnimationPlaybackControlsWithThen;
1122
+ (value: string | motion_dom.MotionValue<string>, keyframes: string | GenericKeyframesTarget<string>, options?: motion_dom.ValueAnimationTransition<string> | undefined): motion_dom.AnimationPlaybackControlsWithThen;
1123
+ (value: number | motion_dom.MotionValue<number>, keyframes: number | GenericKeyframesTarget<number>, options?: motion_dom.ValueAnimationTransition<number> | undefined): motion_dom.AnimationPlaybackControlsWithThen;
1124
+ <V>(value: V | motion_dom.MotionValue<V>, keyframes: V | GenericKeyframesTarget<V>, options?: motion_dom.ValueAnimationTransition<V> | undefined): motion_dom.AnimationPlaybackControlsWithThen;
1125
+ (element: motion_dom.ElementOrSelector, keyframes: motion_dom.DOMKeyframesDefinition, options?: motion_dom.AnimationOptions | undefined): motion_dom.AnimationPlaybackControlsWithThen;
1126
+ <O extends {}>(object: O | O[], keyframes: ObjectTarget<O>, options?: motion_dom.AnimationOptions | undefined): motion_dom.AnimationPlaybackControlsWithThen;
1121
1127
  }];
1122
1128
 
1123
- declare function useAnimateMini<T extends Element = any>(): [AnimationScope<T>, (elementOrSelector: motion_dom.ElementOrSelector, keyframes: motion_dom.DOMKeyframesDefinition, options?: motion_dom.AnimationOptions | undefined) => motion_dom.AnimationPlaybackControls];
1129
+ declare function useAnimateMini<T extends Element = any>(): [AnimationScope<T>, (elementOrSelector: motion_dom.ElementOrSelector, keyframes: motion_dom.DOMKeyframesDefinition, options?: motion_dom.AnimationOptions | undefined) => motion_dom.AnimationPlaybackControlsWithThen];
1124
1130
 
1125
1131
  /**
1126
1132
  * Creates `AnimationControls`, which can be used to manually start, stop
@@ -1380,16 +1386,7 @@ declare function findSpring({ duration, bounce, velocity, mass, }: SpringOptions
1380
1386
  duration: number;
1381
1387
  };
1382
1388
 
1383
- interface NativeAnimationOptions {
1384
- delay?: number;
1385
- duration?: number;
1386
- ease?: EasingFunction | Easing | Easing[];
1387
- times?: number[];
1388
- repeat?: number;
1389
- repeatType?: "loop" | "reverse" | "mirror";
1390
- }
1391
-
1392
- declare function startOptimizedAppearAnimation(element: HTMLElement, name: string, keyframes: string[] | number[], options: NativeAnimationOptions, onReady?: (animation: Animation) => void): void;
1389
+ declare function startOptimizedAppearAnimation(element: HTMLElement, name: string, keyframes: string[] | number[], options: ValueAnimationTransition<number | string>, onReady?: (animation: Animation) => void): void;
1393
1390
 
1394
1391
  interface NodeGroup {
1395
1392
  add: (node: IProjectionNode) => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "framer-motion",
3
- "version": "12.6.2",
3
+ "version": "12.6.3",
4
4
  "description": "A simple and powerful JavaScript animation library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/es/index.mjs",
@@ -87,8 +87,8 @@
87
87
  "measure": "rollup -c ./rollup.size.config.mjs"
88
88
  },
89
89
  "dependencies": {
90
- "motion-dom": "^12.6.1",
91
- "motion-utils": "^12.5.0",
90
+ "motion-dom": "^12.6.3",
91
+ "motion-utils": "^12.6.3",
92
92
  "tslib": "^2.4.0"
93
93
  },
94
94
  "devDependencies": {
@@ -142,5 +142,5 @@
142
142
  "maxSize": "2.7 kB"
143
143
  }
144
144
  ],
145
- "gitHead": "25839acad55383e6f26fb0c2312333fbabf721be"
145
+ "gitHead": "490a378259dcfb7bb8486b460da4c367002bc598"
146
146
  }
@@ -1,112 +0,0 @@
1
- import { NativeAnimationControls, isGenerator, createGeneratorEasing, supportsLinearEasing } from 'motion-dom';
2
- import { invariant, secondsToMilliseconds } from 'motion-utils';
3
- import { startWaapiAnimation } from './index.mjs';
4
- import { browserNumberValueTypes } from '../../../render/dom/value-types/number-browser.mjs';
5
- import { getFinalKeyframe } from './utils/get-final-keyframe.mjs';
6
- import { setCSSVar, setStyle } from './utils/style.mjs';
7
- import { supportsPartialKeyframes } from './utils/supports-partial-keyframes.mjs';
8
- import { supportsWaapi } from './utils/supports-waapi.mjs';
9
-
10
- const state = new WeakMap();
11
- function hydrateKeyframes(valueName, keyframes, read) {
12
- for (let i = 0; i < keyframes.length; i++) {
13
- if (keyframes[i] === null) {
14
- keyframes[i] = i === 0 ? read() : keyframes[i - 1];
15
- }
16
- if (typeof keyframes[i] === "number" &&
17
- browserNumberValueTypes[valueName]) {
18
- keyframes[i] = browserNumberValueTypes[valueName].transform(keyframes[i]);
19
- }
20
- }
21
- if (!supportsPartialKeyframes() && keyframes.length < 2) {
22
- keyframes.unshift(read());
23
- }
24
- }
25
- const defaultEasing = "easeOut";
26
- function getElementAnimationState(element) {
27
- const animationState = state.get(element) || new Map();
28
- state.set(element, animationState);
29
- return state.get(element);
30
- }
31
- class NativeAnimation extends NativeAnimationControls {
32
- constructor(element, valueName, valueKeyframes, options) {
33
- const isCSSVar = valueName.startsWith("--");
34
- invariant(typeof options.type !== "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "framer-motion"?`);
35
- const existingAnimation = getElementAnimationState(element).get(valueName);
36
- existingAnimation && existingAnimation.stop();
37
- const readInitialKeyframe = () => {
38
- return valueName.startsWith("--")
39
- ? element.style.getPropertyValue(valueName)
40
- : window.getComputedStyle(element)[valueName];
41
- };
42
- if (!Array.isArray(valueKeyframes)) {
43
- valueKeyframes = [valueKeyframes];
44
- }
45
- hydrateKeyframes(valueName, valueKeyframes, readInitialKeyframe);
46
- // TODO: Replace this with toString()?
47
- if (isGenerator(options.type)) {
48
- const generatorOptions = createGeneratorEasing(options, 100, options.type);
49
- options.ease = supportsLinearEasing()
50
- ? generatorOptions.ease
51
- : defaultEasing;
52
- options.duration = secondsToMilliseconds(generatorOptions.duration);
53
- options.type = "keyframes";
54
- }
55
- else {
56
- options.ease = options.ease || defaultEasing;
57
- }
58
- const onFinish = () => {
59
- this.setValue(element, valueName, getFinalKeyframe(valueKeyframes, options));
60
- this.cancel();
61
- this.resolveFinishedPromise();
62
- };
63
- const init = () => {
64
- this.setValue = isCSSVar ? setCSSVar : setStyle;
65
- this.options = options;
66
- this.updateFinishedPromise();
67
- this.removeAnimation = () => {
68
- const elementState = state.get(element);
69
- elementState && elementState.delete(valueName);
70
- };
71
- };
72
- if (!supportsWaapi()) {
73
- super();
74
- init();
75
- onFinish();
76
- }
77
- else {
78
- super(startWaapiAnimation(element, valueName, valueKeyframes, options));
79
- init();
80
- if (options.autoplay === false) {
81
- this.animation.pause();
82
- }
83
- this.animation.onfinish = onFinish;
84
- getElementAnimationState(element).set(valueName, this);
85
- }
86
- }
87
- /**
88
- * Allows the returned animation to be awaited or promise-chained. Currently
89
- * resolves when the animation finishes at all but in a future update could/should
90
- * reject if its cancels.
91
- */
92
- then(resolve, reject) {
93
- return this.currentFinishedPromise.then(resolve, reject);
94
- }
95
- updateFinishedPromise() {
96
- this.currentFinishedPromise = new Promise((resolve) => {
97
- this.resolveFinishedPromise = resolve;
98
- });
99
- }
100
- play() {
101
- if (this.state === "finished") {
102
- this.updateFinishedPromise();
103
- }
104
- super.play();
105
- }
106
- cancel() {
107
- this.removeAnimation();
108
- super.cancel();
109
- }
110
- }
111
-
112
- export { NativeAnimation };
@@ -1,32 +0,0 @@
1
- import { mapEasingToNativeEasing, statsBuffer, activeAnimations } from 'motion-dom';
2
-
3
- function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = "loop", ease = "easeInOut", times, } = {}) {
4
- const keyframeOptions = { [valueName]: keyframes };
5
- if (times)
6
- keyframeOptions.offset = times;
7
- const easing = mapEasingToNativeEasing(ease, duration);
8
- /**
9
- * If this is an easing array, apply to keyframes, not animation as a whole
10
- */
11
- if (Array.isArray(easing))
12
- keyframeOptions.easing = easing;
13
- if (statsBuffer.value) {
14
- activeAnimations.waapi++;
15
- }
16
- const animation = element.animate(keyframeOptions, {
17
- delay,
18
- duration,
19
- easing: !Array.isArray(easing) ? easing : "linear",
20
- fill: "both",
21
- iterations: repeat + 1,
22
- direction: repeatType === "reverse" ? "alternate" : "normal",
23
- });
24
- if (statsBuffer.value) {
25
- animation.finished.finally(() => {
26
- activeAnimations.waapi--;
27
- });
28
- }
29
- return animation;
30
- }
31
-
32
- export { startWaapiAnimation };
@@ -1,8 +0,0 @@
1
- function setCSSVar(element, name, value) {
2
- element.style.setProperty(name, value);
3
- }
4
- function setStyle(element, name, value) {
5
- element.style[name] = value;
6
- }
7
-
8
- export { setCSSVar, setStyle };
@@ -1,13 +0,0 @@
1
- import { memo } from 'motion-utils';
2
-
3
- const supportsPartialKeyframes = /*@__PURE__*/ memo(() => {
4
- try {
5
- document.createElement("div").animate({ opacity: [1] });
6
- }
7
- catch (e) {
8
- return false;
9
- }
10
- return true;
11
- });
12
-
13
- export { supportsPartialKeyframes };