UNPKG

framer-motion

Version:

A simple and powerful JavaScript animation library

2 lines (1 loc) • 13.2 kB
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};