scroller-motion/dist/index.umd.js

🛹 Elegant motion scrolling for React

!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react/jsx-runtime"),require("react"),require("framer-motion"),require("debounce-fn")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime","react","framer-motion","debounce-fn"],r):r((e||self).scrollerMotion={},e.jsxRuntime,e.react,e.framerMotion,e.debounceFn)}(this,function(e,r,n,t,i){function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=/*#__PURE__*/o(i);function l(){return l=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e},l.apply(this,arguments)}function u(e,r){if(null==e)return{};var n,t,i={},o=Object.keys(e);for(t=0;t<o.length;t++)r.indexOf(n=o[t])>=0||(i[n]=e[n]);return i}var c=n.createContext(void 0),d=function(e){var r=e.axisSpring,i=e.scale,o=e.refSize,s=e.windowSize,l=n.useMemo(function(){return o>s?o*i:o},[o,i,s]),u=n.useMemo(function(){return[0,l-s]},[l,s]),c=n.useMemo(function(){return[0,-1*(o-s)]},[o,s]);return{axis:t.useTransform(r,u,c,{clamp:!1}),progress:t.useTransform(r,function(e){return Math.max(0,Math.min(t.transform(e,u,[0,1]),1))}),size:l}},f="function"==typeof ResizeObserver,a=["children","childrenRef","disabled","height","style","width","x","y"],h={position:"fixed",left:0,top:0,right:0,bottom:0},g=function(e){var i=e.children,o=e.childrenRef,s=e.disabled,c=e.height,d=e.style,f=e.width,g=e.x,m=e.y,v=u(e,a),w=n.useMemo(function(){return l({},d,s?{}:{height:c,width:f})},[s,c,d,f]),p=n.useMemo(function(){return s?{}:h},[s]),x=n.useMemo(function(){return{x:s?0:g,y:s?0:m}},[s,g,m]);return r.jsx("div",l({},v,{style:w,children:r.jsx("div",{style:p,children:r.jsx(t.motion.div,{style:x,ref:o,children:i})})}))},m=["children","disabled","scale","spring"],v={damping:50,mass:1.25,stiffness:200},w=n.forwardRef(function(e,i){var o=e.children,a=e.disabled,h=e.scale,w=void 0===h?1:h,p=e.spring,x=void 0===p?v:p,y=u(e,m),b=n.useRef(null),S=function(e){var r,i,o,l=e.ref,u=e.scale,c=e.spring,a=n.useMemo(function(){return Math.max(1,u)},[u]),h=(i=(r=n.useState({height:0,width:0}))[0],o=r[1],n.useEffect(function(){var e=function(){return o({width:window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,height:window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight})};return e(),window.addEventListener("resize",e,!1),function(){return window.removeEventListener("resize",e,!1)}},[]),i),g=h.height,m=h.width,v=function(e){var r=n.useState({height:0,width:0}),t=r[0],i=r[1];return n.useEffect(function(){var r=function(){return i({height:null!=(n=null==(r=e.current)?void 0:r.scrollHeight)?n:0,width:null!=(t=null==r?void 0:r.scrollWidth)?t:0});var r,n,t},n=s.default(r,{wait:400}),t=null;return e.current&&(r(),window.addEventListener("resize",n),f&&(t=new ResizeObserver(r)).observe(e.current)),function(){window.removeEventListener("resize",n),t&&t.disconnect()}},[]),t}(l),w=v.height,p=v.width,x=function(e){var r=t.useScroll(),n=r.scrollX,i=r.scrollY,o="object"==typeof e?e:void 0,s=t.useSpring(n,o),l=t.useSpring(i,o);return{x:o?s:n,y:o?l:i}}(c),y=x.x,b=x.y,S=d({axisSpring:y,scale:a,refSize:p,windowSize:m}),M=S.axis,j=S.progress,z=S.size,P=d({axisSpring:b,scale:a,refSize:w,windowSize:g});return{height:P.size,width:z,scrollX:y,scrollXProgress:j,scrollY:b,scrollYProgress:P.progress,x:M,y:P.axis}}({ref:b,scale:w,spring:x}),M=S.height,j=S.width,z=S.scrollX,P=S.scrollXProgress,E=S.scrollY,X=S.scrollYProgress,Y=S.x,O=S.y;n.useImperativeHandle(i,function(){return{scrollX:z,scrollXProgress:P,scrollY:E,scrollYProgress:X,x:Y,y:O}},[z,P,E,X,Y,O]);var R=n.useMemo(function(){return{scrollX:z,scrollXProgress:P,scrollY:E,scrollYProgress:X,x:Y,y:O}},[z,P,E,X,Y,O]);return r.jsx(g,l({},y,{childrenRef:b,disabled:a,height:M,width:j,x:Y,y:O,children:r.jsx(c.Provider,{value:R,children:o})}))});w.displayName="ScrollerMotion",e.ScrollerMotion=w,e.useScrollerMotion=function(){var e=n.useContext(c);if(void 0===e)throw new Error("useScrollerMotion must be used within ScrollerMotion");return e}});
//# sourceMappingURL=index.umd.js.map