framer-motion
Version:
A simple and powerful JavaScript animation library
3 lines (2 loc) • 15.9 kB
JavaScript
const e=(e,t,n)=>n>t?t:n<e?e:n;function t(e,t){return t?`${e}. For more information and steps for solving, visit https://motion.dev/troubleshooting/${t}`:e}let n=()=>{},r=()=>{};"undefined"!=typeof process&&"production"!==process.env?.NODE_ENV&&(n=(e,n,r)=>{e||"undefined"==typeof console||console.warn(t(n,r))},r=(e,n,r)=>{if(!e)throw new Error(t(n,r))});const s={},o=e=>"object"==typeof e&&null!==e;const i=e=>e,a=(...e)=>e.reduce((e,t)=>n=>t(e(n))),c=(e,t,n)=>{const r=t-e;return r?(n-e)/r:1},l=["setup","read","resolveKeyframes","preUpdate","update","preRender","render","postRender"];function u(e,t){let n=!1,r=!0;const o={delta:0,timestamp:0,isProcessing:!1},i=()=>n=!0,a=l.reduce((e,t)=>(e[t]=function(e){let t=new Set,n=new Set,r=!1,s=!1;const o=new WeakSet;let i={delta:0,timestamp:0,isProcessing:!1};function a(t){o.has(t)&&(c.schedule(t),e()),t(i)}const c={schedule:(e,s=!1,i=!1)=>{const a=i&&r?t:n;return s&&o.add(e),a.add(e),e},cancel:e=>{n.delete(e),o.delete(e)},process:e=>{if(i=e,r)return void(s=!0);r=!0;const o=t;t=n,n=o,t.forEach(a),t.clear(),r=!1,s&&(s=!1,c.process(e))}};return c}(i),e),{}),{setup:c,read:u,resolveKeyframes:f,preUpdate:d,update:g,preRender:h,render:p,postRender:m}=a,v=()=>{const i=s.useManualTiming,a=i?o.timestamp:performance.now();n=!1,i||(o.delta=r?1e3/60:Math.max(Math.min(a-o.timestamp,40),1)),o.timestamp=a,o.isProcessing=!0,c.process(o),u.process(o),f.process(o),d.process(o),g.process(o),h.process(o),p.process(o),m.process(o),o.isProcessing=!1,n&&t&&(r=!1,e(v))};return{schedule:l.reduce((t,s)=>{const i=a[s];return t[s]=(t,s=!1,a=!1)=>(n||(n=!0,r=!0,o.isProcessing||e(v)),i.schedule(t,s,a)),t},{}),cancel:e=>{for(let t=0;t<l.length;t++)a[l[t]].cancel(e)},state:o,steps:a}}const{schedule:f,cancel:d,state:g}=u("undefined"!=typeof requestAnimationFrame?requestAnimationFrame:i,!0),h=(e=>t=>"string"==typeof t&&t.startsWith(e))("var(--"),p=/var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu,m={test:e=>"number"==typeof e,parse:parseFloat,transform:e=>e},v={...m,transform:t=>e(0,1,t)},y=e=>Math.round(1e5*e)/1e5,w=/-?(?:\d+(?:\.\d+)?|\.\d+)/gu;const b=/^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu,x=(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)),E=(e,t,n)=>r=>{if("string"!=typeof r)return r;const[s,o,i,a]=r.match(w);return{[e]:parseFloat(s),[t]:parseFloat(o),[n]:parseFloat(i),alpha:void 0!==a?parseFloat(a):1}},W={...m,transform:t=>Math.round((t=>e(0,255,t))(t))},L={test:x("rgb","red"),parse:E("red","green","blue"),transform:({red:e,green:t,blue:n,alpha:r=1})=>"rgba("+W.transform(e)+", "+W.transform(t)+", "+W.transform(n)+", "+y(v.transform(r))+")"};const A={test:x("#"),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:L.transform},S=(e=>({test:t=>"string"==typeof t&&t.endsWith(e)&&1===t.split(" ").length,parse:parseFloat,transform:t=>`${t}${e}`}))("%"),M={test:x("hsl","hue"),parse:E("hue","saturation","lightness"),transform:({hue:e,saturation:t,lightness:n,alpha:r=1})=>"hsla("+Math.round(e)+", "+S.transform(y(t))+", "+S.transform(y(n))+", "+y(v.transform(r))+")"},B={test:e=>L.test(e)||A.test(e)||M.test(e),parse:e=>L.test(e)?L.parse(e):M.test(e)?M.parse(e):A.parse(e),transform:e=>"string"==typeof e?e:e.hasOwnProperty("red")?L.transform(e):M.transform(e),getAnimatableNone:e=>{const t=B.parse(e);return t.alpha=0,B.transform(t)}},T=/(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;const $="number",O="color",H=/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 z(e){const t=e.toString(),n=[],r={color:[],number:[],var:[]},s=[];let o=0;const i=t.replace(H,e=>(B.test(e)?(r.color.push(o),s.push(O),n.push(B.parse(e))):e.startsWith("var(")?(r.var.push(o),s.push("var"),n.push(e)):(r.number.push(o),s.push($),n.push(parseFloat(e))),++o,"${}")).split("${}");return{values:n,split:i,indexes:r,types:s}}function F({split:e,types:t}){const n=e.length;return r=>{let s="";for(let o=0;o<n;o++)if(s+=e[o],void 0!==r[o]){const e=t[o];s+=e===$?y(r[o]):e===O?B.transform(r[o]):r[o]}return s}}const N=(e,t)=>{return"number"==typeof e?t?.trim().endsWith("/")?e:0:"number"==typeof(n=e)?0:B.test(n)?B.getAnimatableNone(n):n;var n};const k={test:function(e){return isNaN(e)&&"string"==typeof e&&(e.match(w)?.length||0)+(e.match(T)?.length||0)>0},parse:function(e){return z(e).values},createTransformer:function(e){return F(z(e))},getAnimatableNone:function(e){const t=z(e);return F(t)(t.values.map((e,n)=>N(e,t.split[n])))}};function P(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}function R(e,t){return n=>n>0?t:e}const q=(e,t,n)=>e+(t-e)*n,V=(e,t,n)=>{const r=e*e,s=n*(t*t-r)+r;return s<0?0:Math.sqrt(s)},j=[A,L,M];function U(e){const t=(r=e,j.find(e=>e.test(r)));var r;if(n(Boolean(t),`'${e}' is not an animatable color. Use the equivalent color code instead.`,"color-not-animatable"),!Boolean(t))return!1;let s=t.parse(e);return t===M&&(s=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=P(a,r,e+1/3),o=P(a,r,e),i=P(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}}(s)),s}const C=(e,t)=>{const n=U(e),r=U(t);if(!n||!r)return R(e,t);const s={...n};return e=>(s.red=V(n.red,r.red,e),s.green=V(n.green,r.green,e),s.blue=V(n.blue,r.blue,e),s.alpha=q(n.alpha,r.alpha,e),L.transform(s))},G=new Set(["none","hidden"]);function I(e,t){return n=>q(e,t,n)}function D(e){return"number"==typeof e?I:"string"==typeof e?h(t=e)&&p.test(t.split("/*")[0].trim())?R:B.test(e)?C:J:Array.isArray(e)?K:"object"==typeof e?B.test(e)?C:_:R;var t}function K(e,t){const n=[...e],r=n.length,s=e.map((e,n)=>D(e)(e,t[n]));return e=>{for(let t=0;t<r;t++)n[t]=s[t](e);return n}}function _(e,t){const n={...e,...t},r={};for(const s in n)void 0!==e[s]&&void 0!==t[s]&&(r[s]=D(e[s])(e[s],t[s]));return e=>{for(const t in r)n[t]=r[t](e);return n}}const J=(e,t)=>{const r=k.createTransformer(t),s=z(e),o=z(t);return s.indexes.var.length===o.indexes.var.length&&s.indexes.color.length===o.indexes.color.length&&s.indexes.number.length>=o.indexes.number.length?G.has(e)&&!o.values.length||G.has(t)&&!s.values.length?function(e,t){return G.has(e)?n=>n<=0?e:t:n=>n>=1?t:e}(e,t):a(K(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}(s,o),o.values),r):(n(!0,`Complex values '${e}' and '${t}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`,"complex-values-different"),R(e,t))};function Q(e,t,n){if("number"==typeof e&&"number"==typeof t&&"number"==typeof n)return q(e,t,n);return D(e)(e,t)}function X(t,n,{clamp:o=!0,ease:l,mixer:u}={}){const f=t.length;if(r(f===n.length,"Both input and output ranges must be the same length","range-length"),1===f)return()=>n[0];if(2===f&&n[0]===n[1])return()=>n[1];const d=t[0]===t[1];t[0]>t[f-1]&&(t=[...t].reverse(),n=[...n].reverse());const g=function(e,t,n){const r=[],o=n||s.mix||Q,c=e.length-1;for(let n=0;n<c;n++){let s=o(e[n],e[n+1]);if(t){const e=Array.isArray(t)?t[n]||i:t;s=a(e,s)}r.push(s)}return r}(n,l,u),h=g.length,p=e=>{if(d&&e<t[0])return n[0];let r=0;if(h>1)for(;r<t.length-2&&!(e<t[r+1]);r++);const s=c(t[r],t[r+1],e);return g[r](s)};return o?n=>p(e(t[0],t[f-1],n)):p}function Y(e){const t=[0];return function(e,t){const n=e[e.length-1];for(let r=1;r<=t;r++){const s=c(0,t,r);e.push(q(n,1,s))}}(t,e.length-1),t}const Z={};function ee(e,t){const n=function(e){let t;return()=>(void 0===t&&(t=e()),t)}(e);return()=>Z[t]??n()}const te=ee(()=>void 0!==window.ScrollTimeline,"scrollTimeline"),ne=ee(()=>void 0!==window.ViewTimeline,"viewTimeline");function re(e){return o(e)&&"offsetHeight"in e&&!("ownerSVGElement"in e)}const se=new WeakMap;let oe;const ie=(e,t,n)=>(r,s)=>{return s&&s[0]?s[0][e+"Size"]:o(i=r)&&"ownerSVGElement"in i&&"getBBox"in r?r.getBBox()[t]:r[n];var i},ae=ie("inline","width","offsetWidth"),ce=ie("block","height","offsetHeight");function le({target:e,borderBoxSize:t}){se.get(e)?.forEach(n=>{n(e,{get width(){return ae(e,t)},get height(){return ce(e,t)}})})}function ue(e){e.forEach(le)}function fe(e,t){oe||"undefined"!=typeof ResizeObserver&&(oe=new ResizeObserver(ue));const n=function(e){if(null==e)return[];if(e instanceof EventTarget)return[e];if("string"==typeof e){const t=document.querySelectorAll(e);return t?Array.from(t):[]}return Array.from(e).filter(e=>null!=e)}(e);return n.forEach(e=>{let n=se.get(e);n||(n=new Set,se.set(e,n)),n.add(t),oe?.observe(e)}),()=>{n.forEach(e=>{const n=se.get(e);n?.delete(t),n?.size||oe?.unobserve(e)})}}const de=new Set;let ge;function he(e){return de.add(e),ge||(ge=()=>{const e={get width(){return window.innerWidth},get height(){return window.innerHeight}};de.forEach(t=>t(e))},window.addEventListener("resize",ge)),()=>{de.delete(e),de.size||"function"!=typeof ge||(window.removeEventListener("resize",ge),ge=void 0)}}function pe(e,t){let n;const r=()=>{const{currentTime:r}=t,s=(null===r?0:r.value)/100;n!==s&&e(s),n=s};return f.preUpdate(r,!0),()=>d(r)}function me(e){return"undefined"!=typeof window&&(e?ne():te())}const ve={x:{length:"Width",position:"Left"},y:{length:"Height",position:"Top"}};function ye(e,t,n,r){const s=n[t],{length:o,position:i}=ve[t],a=s.current,l=n.time;s.current=Math.abs(e[`scroll${i}`]),s.scrollLength=e[`scroll${o}`]-e[`client${o}`],s.offset.length=0,s.offset[0]=0,s.offset[1]=s.scrollLength,s.progress=c(0,s.scrollLength,s.current);const u=r-l;var f,d;s.velocity=u>50?0:(f=s.current-a,(d=u)?f*(1e3/d):0)}const we={start:0,center:.5,end:1};function be(e,t,n=0){let r=0;if(e in we&&(e=we[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 xe=[0,0];function Ee(e,t,n,r){let s=Array.isArray(e)?e:xe,o=0,i=0;return"number"==typeof e?s=[e,e]:"string"==typeof e&&(s=(e=e.trim()).includes(" ")?e.split(" "):[e,we[e]?e:"0"]),o=be(s[0],n,r),i=be(s[1],t),o-i}const We={Enter:[[0,1],[1,1]],Exit:[[0,0],[1,0]],Any:[[1,0],[0,1]],All:[[0,0],[1,1]]},Le={x:0,y:0};function Ae(t,n,r){const{offset:s=We.All}=r,{target:o=t,axis:i="y"}=r,a="y"===i?"height":"width",c=o!==t?function(e,t){const n={x:0,y:0};let r=e;for(;r&&r!==t;)if(re(r))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}(o,t):Le,l=o===t?{width:t.scrollWidth,height:t.scrollHeight}:function(e){return"getBBox"in e&&"svg"!==e.tagName?e.getBBox():{width:e.clientWidth,height:e.clientHeight}}(o),u={width:t.clientWidth,height:t.clientHeight};n[i].offset.length=0;let f=!n[i].interpolate;const d=s.length;for(let e=0;e<d;e++){const t=Ee(s[e],u[a],l[a],c[i]);f||t===n[i].interpolatorOffsets[e]||(f=!0),n[i].offset[e]=t}f&&(n[i].interpolate=X(n[i].offset,Y(s),{clamp:!1}),n[i].interpolatorOffsets=[...n[i].offset]),n[i].progress=e(0,1,n[i].interpolate(n[i].current))}function Se(e,t,n,r={}){return{measure:t=>{!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),function(e,t,n){ye(e,"x",t,n),ye(e,"y",t,n),t.time=n}(e,n,t),(r.offset||r.target)&&Ae(e,n,r)},notify:()=>t(n)}}const Me=new WeakMap,Be=new WeakMap,Te=new WeakMap,$e=new WeakMap,Oe=new WeakMap,He=e=>e===document.scrollingElement?window:e;function ze(e,{container:t=document.scrollingElement,trackContentSize:n=!1,...r}={}){if(!t)return i;let s=Te.get(t);s||(s=new Set,Te.set(t,s));const o=Se(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}},r);if(s.add(o),!Me.has(t)){const e=()=>{for(const e of s)e.measure(g.timestamp);f.preUpdate(n)},n=()=>{for(const e of s)e.notify()},r=()=>f.read(e);Me.set(t,r);const o=He(t);window.addEventListener("resize",r),t!==document.documentElement&&Be.set(t,(c=r,"function"==typeof(a=t)?he(a):fe(a,c))),o.addEventListener("scroll",r),r()}var a,c;if(n&&!Oe.has(t)){const e=Me.get(t),n={width:t.scrollWidth,height:t.scrollHeight};$e.set(t,n);const r=()=>{const r=t.scrollWidth,s=t.scrollHeight;n.width===r&&n.height===s||(e(),n.width=r,n.height=s)},s=f.read(r,!0);Oe.set(t,s)}const l=Me.get(t);return f.read(l,!1,!0),()=>{d(l);const e=Te.get(t);if(!e)return;if(e.delete(o),e.size)return;const n=Me.get(t);Me.delete(t),n&&(He(t).removeEventListener("scroll",n),Be.get(t)?.(),window.removeEventListener("resize",n));const r=Oe.get(t);r&&(d(r),Oe.delete(t)),$e.delete(t)}}const Fe=[[We.Enter,"entry"],[We.Exit,"exit"],[We.Any,"cover"],[We.All,"contain"]],Ne={start:0,end:1};function ke(e){const t=e.trim().split(/\s+/);if(2!==t.length)return;const n=Ne[t[0]],r=Ne[t[1]];return void 0!==n&&void 0!==r?[n,r]:void 0}function Pe(e,t){const n=function(e){if(2!==e.length)return;const t=[];for(const n of e)if(Array.isArray(n))t.push(n);else{if("string"!=typeof n)return;{const e=ke(n);if(!e)return;t.push(e)}}return t}(e);if(!n)return!1;for(let e=0;e<2;e++){const r=n[e],s=t[e];if(r[0]!==s[0]||r[1]!==s[1])return!1}return!0}function Re(e){if(!e)return{rangeStart:"contain 0%",rangeEnd:"contain 100%"};for(const[t,n]of Fe)if(Pe(e,t))return{rangeStart:`${n} 0%`,rangeEnd:`${n} 100%`}}const qe=new Map;function Ve(e){const t={value:0},n=ze(n=>{t.value=100*n[e.axis].progress},e);return{currentTime:t,cancel:n}}function je({source:e,container:t,...n}){const{axis:r}=n;e&&(t=e);let s=qe.get(t);s||(s=new Map,qe.set(t,s));const o=n.target??"self";let i=s.get(o);i||(i={},s.set(o,i));const a=r+(n.offset??[]).join(",");if(!i[a])if(n.target&&me(n.target)){const e=Re(n.offset);i[a]=e?new ViewTimeline({subject:n.target,axis:r}):Ve({container:t,...n})}else me()?i[a]=new ScrollTimeline({source:t,axis:r}):i[a]=Ve({container:t,...n});return i[a]}function Ue(e,{axis:t="y",container:n=document.scrollingElement,...r}={}){if(!n)return i;const s={axis:t,container:n,...r};return"function"==typeof e?function(e,t){return function(e){return 2===e.length}(e)||function(e){return e&&(e.target||e.offset)}(t)?ze(n=>{e(n[t.axis].progress,n)},t):pe(e,je(t))}(e,s):function(e,t){const n=je(t),r=t.target?Re(t.offset):void 0,s=t.target?me(t.target)&&!!r:me();return e.attachTimeline({timeline:s?n:void 0,...r&&s&&{rangeStart:r.rangeStart,rangeEnd:r.rangeEnd},observe:e=>(e.pause(),pe(t=>{e.time=e.iterationDuration*t},n))})}(e,s)}export{Ue as scroll};
//# sourceMappingURL=size-rollup-scroll.js.map