UNPKG

framer-motion

Version:

A simple and powerful JavaScript animation library

3 lines (2 loc) • 9.08 kB
const e=(e,t,n)=>n>t?t:n<e?e:n,t={},n=e=>"object"==typeof e&&null!==e;const r=e=>e,o=(e,t,n)=>{const r=t-e;return r?(n-e)/r:1},s={delta:0,timestamp:0,isProcessing:!1},i=["setup","read","resolveKeyframes","preUpdate","update","preRender","render","postRender"];function c(e,n,r={delta:0,timestamp:0,isProcessing:!1}){let o=!1,s=!0;const c=()=>o=!0,f=i.reduce((e,t)=>(e[t]=function(e){let t,n=new Set,r=new Set,o=!1,s=!1;const i=new Set;let c={delta:0,timestamp:0,isProcessing:!1};function f(n){i.has(n)&&(r.add(n),e()),(t=n)(c)}const l={schedule:(e,s=!1,c=!1)=>{const f=c&&o,l=f?n:r;return s&&i.add(e),f&&e!==t&&l.delete(e),l.add(e),e},cancel:e=>{r.delete(e),i.delete(e)},process:e=>{if(c=e,o)return void(s=!0);o=!0;const i=n;n=r,r=i,n.forEach(f),n.clear(),t=void 0,o=!1,s&&(s=!1,l.process(e))}};return l}(c),e),{}),{setup:l,read:a,resolveKeyframes:u,preUpdate:d,update:g,preRender:h,render:p,postRender:m}=f,w=()=>{const i=t.useManualTiming,c=i?r.timestamp:performance.now();o=!1,i||(r.delta=s?1e3/60:Math.max(Math.min(c-r.timestamp,40),1)),r.timestamp=c,r.isProcessing=!0,l.process(r),a.process(r),u.process(r),d.process(r),g.process(r),h.process(r),p.process(r),m.process(r),r.isProcessing=!1,o&&n&&(s=!1,e(w))};return{schedule:i.reduce((t,n)=>{const i=f[n];return t[n]=(t,n=!1,c=!1)=>(o||(o=!0,s=!0,r.isProcessing||e(w)),i.schedule(t,n,c)),t},{}),cancel:e=>{for(let t=0;t<i.length;t++)f[i[t]].cancel(e)},state:r,steps:f}}const{schedule:f,cancel:l}=c("undefined"!=typeof requestAnimationFrame?requestAnimationFrame:r,!0,s),a={};function u(e,t){const n=function(e){let t;return()=>(void 0===t&&(t=e()),t)}(e);return()=>a[t]??n()}const d=u(()=>void 0!==window.ScrollTimeline,"scrollTimeline"),g=u(()=>void 0!==window.ViewTimeline,"viewTimeline");function h(e){return n(e)&&"offsetHeight"in e&&!("ownerSVGElement"in e)}const p={};function m(e){return p.current?.add(e),e}const w=new WeakMap;let y;const v=(e,t,r)=>(o,s)=>{return s&&s[0]?s[0][e+"Size"]:n(i=o)&&"ownerSVGElement"in i&&"getBBox"in o?o.getBBox()[t]:o[r];var i},x=v("inline","width","offsetWidth"),L=v("block","height","offsetHeight");function E({target:e,borderBoxSize:t}){w.get(e)?.forEach(n=>{n(e,{get width(){return x(e,t)},get height(){return L(e,t)}})})}function W(e){e.forEach(E)}function b(e,t){y||"undefined"!=typeof ResizeObserver&&(y=new ResizeObserver(W));const n=function(e){if(null==e)return[];if(e instanceof EventTarget)return[e];if("string"==typeof e){const t=(p.current?.root||document).querySelectorAll(e);return t?Array.from(t):[]}return Array.from(e).filter(e=>null!=e)}(e);return n.forEach(e=>{let n=w.get(e);n||(n=new Set,w.set(e,n)),n.add(t),y?.observe(e)}),()=>{n.forEach(e=>{const n=w.get(e);n?.delete(t),n?.size||y?.unobserve(e)})}}const S=new Set;let B;function M(e){return S.add(e),B||(B=()=>{const e={get width(){return window.innerWidth},get height(){return window.innerHeight}};S.forEach(t=>t(e))},window.addEventListener("resize",B)),()=>{S.delete(e),S.size||"function"!=typeof B||(window.removeEventListener("resize",B),B=void 0)}}function T(e,t){return m("function"==typeof e?M(e):b(e,t))}const z={x:{length:"Width",position:"Left"},y:{length:"Height",position:"Top"}},O=new WeakMap;function k(t,n,r,s){const i=r[n],{length:c,position:f}=z[n],l=i.current,a=r.time,u=t[`scroll${f}`];i.current=function(e,t){const n=e===document.scrollingElement,r=n&&document.body||e;let o=O.get(r);o||O.set(r,o=getComputedStyle(r));const{writingMode:s,flexDirection:i}=o,c="x"===t!==/^[vs]/.test(s);return(c?"rtl"===o.direction!=("sideways-lr"===s):s.endsWith("rl"))!==(!n&&o.display.includes("flex")&&(c!==("c"===i[0])?i:o.flexWrap).endsWith("reverse"))}(t,n)?-u||0:u,i.containerLength=t[`client${c}`],i.targetLength=t[`scroll${c}`],i.scrollLength=i.targetLength-i.containerLength,i.offset.length=0,i.offset[0]=0,i.offset[1]=i.scrollLength,i.progress=e(0,1,o(0,i.scrollLength,i.current));const d=s-a;var g,h;i.velocity=d>50?0:(g=i.current-l,(h=d)?g*(1e3/h):0)}const H={start:0,center:.5,end:1};function A(e,t,n=0){let r=0;if(e in H&&(e=H[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 R=[0,0];function P(e,t,n,r){let o=Array.isArray(e)?e:R,s=0,i=0;return"number"==typeof e?o=[e,e]:"string"==typeof e&&(o=(e=e.trim()).includes(" ")?e.split(" "):[e,H[e]?e:"0"]),s=A(o[0],n,r),i=A(o[1],t),s-i}const N=[[0,0],[1,1]];function V(e,t){const n=e.length-1;if(n<1)return 0;const r=e[0]>e[n],s=t=>e[r?n-t:t];if(e[0]===e[1]&&t<s(0))return r?1:0;let i=0;for(;i<n-1&&t>=s(i+1);)i++;const c=(i+o(s(i),s(i+1),t))/n;return r?1-c:c}function $(t,n,r,o={}){const{target:s}=o,i=s||o.offset;return{measure:n=>{if(i){r.time=n.time;for(const e in z){const t=e,{offset:o}=r[t];Object.assign(r[t],n[t]),r[t].offset=o}if(s&&s!==t){const e=function(e,t){const n={x:0,y:0};let r=e;for(;r&&r!==t;)if(h(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 o=null,s=r.parentNode;for(;!o;)"svg"===s.tagName&&(o=s),s=r.parentNode;r=o}}return n}(s,t),n=function(e){return"getBBox"in e&&"svg"!==e.tagName?e.getBBox():{width:e.clientWidth,height:e.clientHeight}}(s);r.x.targetOffset=e.x,r.y.targetOffset=e.y,r.x.targetLength=n.width,r.y.targetLength=n.height}!function(t,{offset:n=N}){for(const r in z){const o=t[r];o.offset.length=0;for(let e=0;e<n.length;e++)o.offset[e]=P(n[e],o.containerLength,o.targetLength,o.targetOffset);o.progress=e(0,1,V(o.offset,o.current))}}(r,o)}},notify:e=>n(i?r:e)}}const j=new WeakMap,C=new WeakMap,G=new WeakMap,q=new WeakMap,F=e=>e===document.scrollingElement?window:e;function U(e,{container:t=document.scrollingElement,trackContentSize:n=!1,...o}={}){if(!t)return r;let i=G.get(t);i||(i=new Set,G.set(t,i));const c=$(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}},o);if(i.add(c),!j.has(t)){const 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=()=>{!function(e,t,n){for(const r in z)k(e,r,t,n);t.time=n}(t,e,s.timestamp);for(const t of i)t.measure(e);f.preUpdate(r)},r=()=>{for(const t of i)t.notify(e)},o=()=>f.read(n);j.set(t,o);const c=F(t);window.addEventListener("resize",o),t!==document.documentElement&&C.set(t,T(t,o)),c.addEventListener("scroll",o),o()}if(n&&!q.has(t)){const e=j.get(t),n={width:t.scrollWidth,height:t.scrollHeight},r=()=>{const r=t.scrollWidth,o=t.scrollHeight;n.width===r&&n.height===o||(e(),n.width=r,n.height=o)},o=f.read(r,!0);q.set(t,o)}const a=j.get(t);return f.read(a,!1,!0),()=>{l(a);const e=G.get(t);if(!e)return;if(e.delete(c),e.size)return;G.delete(t);const n=j.get(t);j.delete(t),n&&(F(t).removeEventListener("scroll",n),C.get(t)?.(),window.removeEventListener("resize",n));const r=q.get(t);r&&(l(r),q.delete(t))}}const D=new Map;const K=e=>{if(/v/u.test(e))return[];const t=P(e,0,0,0);return[P(e,0,1,0)-t,t-P(e,1,0,0),t]},I=([e,t,n])=>!n&&(0===t||1===t)&&`${t?"entry":"exit"}-crossing ${100*e}%`;function J(e,t){const{target:n,container:r,axis:o}=t,s=n&&function(e=N){if(2!==e.length)return;const[t,n]=e.map(K),r=[I(t),I(n)],o=n[0]-t[0],s=t[1]-n[1];return r[0]&&r[1]&&(o||s)?{points:r,a:o,b:s,cover:!t[0]&&1===o&&1===s}:void 0}(t.offset),i=function(e){return"undefined"!=typeof window&&(e?g():d())}(n)&&(n?!!s:!t.offset),c=new Map,f=new Set;let l,a=!1;const u=(e,t)=>{const[n,r]=s.points;t.effect.updateTiming({direction:a?"normal"===e?"reverse":"alternate-reverse":e}),Object.assign(t,{rangeStart:a?r:n,rangeEnd:a?n:r}),t.play()},h=[e.attachTimeline({get timeline(){return i?function({container:e,target:t,axis:n}){let r=D.get(e);r||(r=new Map,D.set(e,r));const o=t??"self";let s=r.get(o);return s||(s={},r.set(o,s)),s[n]||(s[n]=t?new ViewTimeline({subject:t,axis:n}):new ScrollTimeline({source:e,axis:n}))}(t):void 0},onAttach:s&&(e=>{const t=e.effect.getTiming().direction;c.set(e,t),u(t,e)}),observe:e=>(e.pause(),f.add(e),l||(l=U(e=>{f.forEach(t=>{t.time=t.iterationDuration*e[o].progress})},t)),()=>f.delete(e))})];if(i&&s){const{a:e,b:t}=s,i="y"===o?"clientHeight":"clientWidth",f=()=>{a!==(a=e*n[i]+t*r[i]<0)&&c.forEach(u)};f(),e*t<0&&h.push(T(f),T([n,r],f))}return()=>{h.forEach(e=>e()),l?.()}}function Q(e,{axis:t="y",source:n,container:o=document.scrollingElement,...s}={}){if(!o)return r;const i={axis:t,container:n||o,...s};if("function"==typeof e){const n=(e=>p.current?p.current.bind(e):e)(e);return m(U(e=>n(e[t].progress,e),i))}return m(J(e,i))}export{Q as scroll}; //# sourceMappingURL=size-rollup-scroll.js.map