@14islands/r3f-scroll-rig/dist/scrollrig.modern.js

Progressively enhance any React website with WebGL using @react-three/fiber

import e,{useLayoutEffect as t,useEffect as r,forwardRef as n,useRef as o,useImperativeHandle as l,useMemo as i,Fragment as a,cloneElement as s,Component as c,startTransition as u,useState as d,useCallback as p}from"react";import{useThree as h,invalidate as m,useFrame as g,Canvas as v,createPortal as f,useLoader as w,addEffect as b}from"@react-three/fiber";import{ResizeObserver as y}from"@juggle/resize-observer";import{parse as S}from"query-string";import R from"zustand";import{Vector2 as E,Color as C,Scene as T,MathUtils as I,DefaultLoadingManager as O,TextureLoader as L,ImageBitmapLoader as M,Texture as k,CanvasTexture as _}from"three";import{useInView as x}from"react-intersection-observer";import P from"debounce";import V from"vecn";import{suspend as D}from"suspend-react";import A from"supports-webp";import j from"fast-deep-equal";import U from"lenis";function z(){return z=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},z.apply(this,arguments)}function Y(e,t){if(null==e)return{};var r,n,o={},l=Object.keys(e);for(n=0;n<l.length;n++)t.indexOf(r=l[n])>=0||(o[r]=e[r]);return o}function F(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,"string");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==typeof t?t:String(t)}const Q="undefined"!=typeof window?t:r,q={PRIORITY_PRELOAD:0,PRIORITY_SCISSORS:1,PRIORITY_VIEWPORTS:1,PRIORITY_GLOBAL:1e3,DEFAULT_SCALE_MULTIPLIER:1,preloadQueue:[]},B=R(e=>({debug:!1,scaleMultiplier:q.DEFAULT_SCALE_MULTIPLIER,globalRender:!0,globalPriority:q.PRIORITY_GLOBAL,globalClearDepth:!1,globalRenderQueue:!1,clearGlobalRenderQueue:()=>e(()=>({globalRenderQueue:!1})),isCanvasAvailable:!1,hasSmoothScrollbar:!1,canvasChildren:{},renderToCanvas:(t,r,n={})=>e(({canvasChildren:e})=>Object.getOwnPropertyDescriptor(e,t)?(e[t].instances+=1,e[t].props.inactive=!1,{canvasChildren:e}):{canvasChildren:z({},e,{[t]:{mesh:r,props:n,instances:1}})}),updateCanvas:(t,r)=>e(({canvasChildren:e})=>{if(!e[t])return;const{[t]:{mesh:n,props:o,instances:l}}=e;return{canvasChildren:z({},e,{[t]:{mesh:n,props:z({},o,r),instances:l}})}}),removeFromCanvas:(t,r=!0)=>e(({canvasChildren:e})=>{var n;return(null==(n=e[t])?void 0:n.instances)>1?(e[t].instances-=1,{canvasChildren:e}):r?{canvasChildren:Y(e,[t].map(F))}:(e[t].instances=0,e[t].props.inactive=!0,{canvasChildren:z({},e)})}),pageReflow:0,requestReflow:()=>{e(e=>({pageReflow:e.pageReflow+1}))},scroll:{y:0,x:0,limit:0,velocity:0,progress:0,direction:0,scrollDirection:void 0},__lenis:void 0,scrollTo:()=>{},onScroll:()=>()=>{}})),W=()=>{const e=B(e=>e.requestReflow),t=B(e=>e.debug);return r(()=>{let r=new(window.ResizeObserver||y)(()=>{e(),t&&console.log("ResizeManager","document.body height changed")});return r.observe(document.body),()=>{null==r||r.disconnect()}},[]),null},G=["makeDefault","margin"],H=n((t,r)=>{let{makeDefault:n=!1,margin:a=0}=t,s=Y(t,G);const c=h(e=>e.set),u=h(e=>e.camera),d=h(e=>e.size),p=h(e=>e.viewport),m=o(null);l(r,()=>m.current);const g=B(e=>e.pageReflow),v=B(e=>e.scaleMultiplier),{fov:f,distance:w,aspect:b}=i(()=>{var e;const t=(d.height+2*a)*v,r=(d.width+2*a)*v/t;let n=s.fov||50,o=null==s||null==(e=s.position)?void 0:e[2];return o?n=180/Math.PI*2*Math.atan(t/(2*o)):o=t/(2*Math.tan(n/2*Math.PI/180)),{fov:n,distance:o,aspect:r}},[d,v,g]);return Q(()=>{m.current.lookAt(0,0,0),m.current.updateProjectionMatrix(),m.current.updateMatrixWorld(),c(e=>({viewport:z({},e.viewport,p.getCurrentViewport(u))}))},[d,v,g]),Q(()=>{if(n){const e=u;return c(()=>({camera:m.current})),()=>c(()=>({camera:e}))}},[m,n,c]),e.createElement("perspectiveCamera",z({ref:m,position:[0,0,w],onUpdate:e=>e.updateProjectionMatrix(),near:.1,aspect:b,fov:f,far:2*w},s))}),X=["makeDefault","margin"],N=n((t,r)=>{let{makeDefault:n=!1,margin:a=0}=t,s=Y(t,X);const c=h(e=>e.set),u=h(e=>e.camera),d=h(e=>e.size),p=B(e=>e.pageReflow),m=B(e=>e.scaleMultiplier),g=i(()=>Math.max(d.width*m,d.height*m),[d,p,m]),v=o(null);return l(r,()=>v.current),Q(()=>{v.current.lookAt(0,0,0),v.current.updateProjectionMatrix(),v.current.updateMatrixWorld()},[g,d]),Q(()=>{if(n){const e=u;return c(()=>({camera:v.current})),()=>c(()=>({camera:e}))}},[v,n,c]),e.createElement("orthographicCamera",z({left:d.width*m/-2-a*m,right:d.width*m/2+a*m,top:d.height*m/2+a*m,bottom:d.height*m/-2-a*m,far:2*g,position:[0,0,g],near:.001,ref:v,onUpdate:e=>e.updateProjectionMatrix()},s))});function J(e,t){e&&(!1===t?(e.wasFrustumCulled=e.frustumCulled,e.wasVisible=e.visible,e.visible=!0,e.frustumCulled=!1):(e.visible=!!e.wasVisible,e.frustumCulled=!!e.wasFrustumCulled),e.children.forEach(e=>J(e,t)))}const K=new E,Z=(e=[0])=>{B.getState().globalRenderQueue=B.getState().globalRenderQueue||[0],B.getState().globalRenderQueue=[...B.getState().globalRenderQueue||[],...e]},$=({gl:e,scene:t,camera:r,left:n,top:o,width:l,height:i,layer:a=0,autoClear:s=!1,clearDepth:c=!1})=>{t&&r&&(e.autoClear=s,e.setScissor(n,o,l,i),e.setScissorTest(!0),r.layers.set(a),c&&e.clearDepth(),e.render(t,r),e.setScissorTest(!1))},ee=({gl:e,scene:t,camera:r,left:n,top:o,width:l,height:i,layer:a=0,scissor:s=!0,autoClear:c=!1,clearDepth:u=!1})=>{t&&r&&(e.getSize(K),e.autoClear=c,e.setViewport(n,o,l,i),e.setScissor(n,o,l,i),e.setScissorTest(s),r.layers.set(a),u&&e.clearDepth(),e.render(t,r),e.setScissorTest(!1),e.setViewport(0,0,K.x,K.y))},te=({scene:e,camera:t,layer:r=0},n)=>{q.preloadQueue.push((o,l,i)=>{o.setScissorTest(!1),J(e||l,!1),(t||i).layers.set(r),o.render(e||l,t||i),J(e||l,!0),n&&n()}),m()},re=()=>{const e=B(e=>e.isCanvasAvailable),t=B(e=>e.hasSmoothScrollbar),n=B(e=>e.requestReflow),o=B(e=>e.pageReflow),l=B(e=>e.debug),i=B(e=>e.scaleMultiplier);return r(()=>{l&&(window._scrollRig=window._scrollRig||{},window._scrollRig.reflow=n)},[]),{debug:l,isCanvasAvailable:e,hasSmoothScrollbar:t,scaleMultiplier:i,preloadScene:te,requestRender:Z,renderScissor:$,renderViewport:ee,reflow:n,reflowCompleted:o}},ne=({children:t})=>{const n=h(e=>e.gl),o=B(e=>e.canvasChildren),l=re();return r(()=>{Object.keys(o).length||(l.debug&&console.log("GlobalRenderer","auto render empty canvas"),n.clear(),l.requestRender(),m())},[o]),l.debug&&console.log("GlobalChildren",Object.keys(o).length),e.createElement(e.Fragment,null,t,Object.keys(o).map(t=>{const{mesh:r,props:n}=o[t];return"function"==typeof r?e.createElement(a,{key:t},r(z({key:t},l,n))):s(r,z({key:t},n))}))},oe=()=>{const e=h(e=>e.gl),t=h(e=>e.frameloop),r=B(e=>e.globalClearDepth),n=B(e=>e.globalPriority),o=re();return Q(()=>{e.debug.checkShaderErrors=o.debug},[o.debug]),g(({camera:t,scene:r})=>{q.preloadQueue.length&&(q.preloadQueue.forEach(n=>n(e,r,t)),e.clear(),q.preloadQueue=[],o.debug&&console.log("GlobalRenderer","preload complete. trigger global render"),o.requestRender(),m())},q.PRIORITY_PRELOAD),g(({camera:n,scene:o})=>{const l=B.getState().globalRenderQueue;("always"===t||l)&&(n.layers.disableAll(),l?l.forEach(e=>{n.layers.enable(e)}):n.layers.enable(0),r&&e.clearDepth(),e.render(o,n)),B.getState().clearGlobalRenderQueue()},n),null};class le extends c{constructor(e){super(e),this.state={error:!1},this.props=e}static getDerivedStateFromError(e){return{error:e}}render(){return this.state.error?(this.props.onError&&this.props.onError(this.state.error),null):this.props.children}}var ie="8.14.0";const ae=["children","as","gl","style","orthographic","camera","debug","scaleMultiplier","globalRender","globalPriority","globalClearDepth"],se=["children","onError"];let ce;"undefined"!=typeof window&&(ce=window.ResizeObserver||y);const ue=t=>{let{children:r,as:n=v,gl:o,style:l,orthographic:i,camera:a,debug:s,scaleMultiplier:c=q.DEFAULT_SCALE_MULTIPLIER,globalRender:d=!0,globalPriority:p=q.PRIORITY_GLOBAL,globalClearDepth:h=!1}=t,m=Y(t,ae);const g=B(e=>e.globalRender);return Q(()=>{"undefined"!=typeof window&&(window.__r3f_scroll_rig=ie);const e=S(window.location.search);(s||void 0!==e.debug)&&(B.setState({debug:!0}),console.info("@14islands/r3f-scroll-rig@"+ie))},[s]),Q(()=>{u(()=>{B.setState({scaleMultiplier:c,globalRender:d,globalPriority:p,globalClearDepth:h})})},[c,p,d,h]),e.createElement(n,z({id:"ScrollRig-canvas",camera:{manual:!0},gl:z({failIfMajorPerformanceCaveat:!0},o),resize:{scroll:!1,debounce:0,polyfill:ce},style:z({position:"fixed",top:0,left:0,right:0,height:"100vh"},l)},m),!i&&e.createElement(H,z({manual:!0,makeDefault:!0},a)),i&&e.createElement(N,z({manual:!0,makeDefault:!0},a)),g&&e.createElement(oe,null),"function"==typeof r?r(e.createElement(ne,null)):e.createElement(ne,null,r),e.createElement(W,null))},de=t=>{let{children:r,onError:n}=t,o=Y(t,se);return Q(()=>{document.documentElement.classList.add("js-has-global-canvas"),B.setState({isCanvasAvailable:!0})},[]),e.createElement(le,{onError:e=>{n&&n(e),B.setState({isCanvasAvailable:!1}),document.documentElement.classList.remove("js-has-global-canvas"),document.documentElement.classList.add("js-global-canvas-error")}},e.createElement(ue,z({},o),r),e.createElement("noscript",null,e.createElement("style",null,"\n          .ScrollRig-visibilityHidden,\n          .ScrollRig-transparentColor {\n            visibility: unset;\n            color: unset;\n          }\n          ")))},pe=({scale:t})=>e.createElement("mesh",{scale:t},e.createElement("planeGeometry",null),e.createElement("shaderMaterial",{args:[{uniforms:{color:{value:new C("hotpink")}},vertexShader:"\n            void main() {\n              gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n            }\n          ",fragmentShader:"\n            uniform vec3 color;\n            uniform float opacity;\n            void main() {\n              gl_FragColor.rgba = vec4(color, .5);\n            }\n          "}],transparent:!0})),he="undefined"!=typeof window;function me({debounce:e=0}={}){const[t,n]=d({width:he?window.innerWidth:Infinity,height:he?window.innerHeight:Infinity});return r(()=>{const r=document.getElementById("ScrollRig-canvas");function o(){const e=r?r.clientWidth:window.innerWidth,o=r?r.clientHeight:window.innerHeight;e===t.width&&o===t.height||n({width:e,height:o})}const l=P.debounce(o,e),i=window.ResizeObserver||y;let a;return r?(a=new i(l),a.observe(r)):window.addEventListener("resize",l),o(),()=>{var e;window.removeEventListener("resize",l),null==(e=a)||e.disconnect()}},[t,n]),t}function ge(e,t,r,n,o){return n+(e-t)*(o-n)/(r-t)}const ve=()=>({enabled:B(e=>e.hasSmoothScrollbar),scroll:B(e=>e.scroll),scrollTo:B(e=>e.scrollTo),onScroll:B(e=>e.onScroll),__lenis:B(e=>e.__lenis)});function fe(e,t){const n=me(),{scroll:l,onScroll:a}=ve(),s=B(e=>e.scaleMultiplier),c=B(e=>e.pageReflow),u=B(e=>e.debug),{rootMargin:h,threshold:m,autoUpdate:g,wrapper:v}=i(()=>{const e={rootMargin:"0%",threshold:0,autoUpdate:!0},r=t||{};return Object.keys(r).map((t,n)=>{void 0!==r[t]&&(e[t]=r[t])}),e},[t]),{ref:f,inView:w}=x({rootMargin:h,threshold:m});Q(()=>{f(e.current)},[e,null==e?void 0:e.current]);const[b,y]=d(V.vec3(0,0,0)),S=o({inViewport:!1,progress:-1,visibility:-1,viewport:-1}).current,R=o({top:0,bottom:0,left:0,right:0,width:0,height:0}).current,[E,C]=d(R),T=o({top:0,bottom:0,left:0,right:0,width:0,height:0,x:0,y:0,positiveYUpBottom:0}).current,I=o(V.vec3(0,0,0)).current;Q(()=>{var t;const r=null==(t=e.current)?void 0:t.getBoundingClientRect();if(!r)return;const o=v?v.scrollTop:window.scrollY,l=v?v.scrollLeft:window.scrollX;R.top=r.top+o,R.bottom=r.bottom+o,R.left=r.left+l,R.right=r.right+l,R.width=r.width,R.height=r.height,C(z({},R)),y(V.vec3((null==R?void 0:R.width)*s,(null==R?void 0:R.height)*s,1)),u&&console.log("useTracker.getBoundingClientRect:",R,"intialScroll:",{initialY:o,initialX:l},"size:",n,"pageReflow:",c)},[e,n,c,s,u]);const O=p(({onlyUpdateInViewport:t=!1,scroll:r}={})=>{if(!e.current||t&&!S.inViewport)return;const o=r||l;!function(e,t,r,n){e.top=t.top-(r.y||0),e.bottom=t.bottom-(r.y||0),e.left=t.left-(r.x||0),e.right=t.right-(r.x||0),e.width=t.width,e.height=t.height,e.x=e.left+.5*t.width-.5*n.width,e.y=e.top+.5*t.height-.5*n.height,e.positiveYUpBottom=n.height-e.bottom}(T,R,o,n),function(e,t,r){e.x=t.x*r,e.y=-1*t.y*r}(I,T,s);const i="horizontal"===o.scrollDirection,a=i?"width":"height",c=n[a]-T[i?"left":"top"];S.progress=ge(c,0,n[a]+T[a],0,1),S.visibility=ge(c,0,T[a],0,1),S.viewport=ge(c,0,n[a],0,1)},[e,n,s,l]);return Q(()=>{S.inViewport=w,O({onlyUpdateInViewport:!1}),u&&console.log("useTracker.inViewport:",w,"update()")},[w]),Q(()=>{O({onlyUpdateInViewport:!1}),u&&console.log("useTracker.update on resize/reflow")},[O,c]),r(()=>{if(g)return a(e=>O({onlyUpdateInViewport:!0}))},[g,O,a]),{scale:b,inViewport:w,rect:E,bounds:T,position:I,scrollState:S,update:O}}const we=["track","children","margin","inViewportMargin","inViewportThreshold","visible","hideOffscreen","scissor","debug","as","priority","scene"];function be(t){let{track:n,children:l,margin:i=0,inViewportMargin:a,inViewportThreshold:s,visible:c=!0,hideOffscreen:u=!0,scissor:p=!1,debug:m=!1,as:v="scene",priority:w=q.PRIORITY_SCISSORS,scene:b}=t,y=Y(t,we);const S=h(e=>e.scene),R=o(),[E]=d(b||(p?new T:null)),{requestRender:C,renderScissor:I}=re(),O=B(e=>e.globalRender),{bounds:L,scale:M,position:k,scrollState:_,inViewport:x}=fe(n,{rootMargin:a,threshold:s});Q(()=>{R.current&&(R.current.visible=u?x&&c:c)},[x,u,c]),r(()=>{R.current&&(R.current.position.y=k.y,R.current.position.x=k.x)},[M,x]),g(({gl:e,camera:t})=>{R.current&&R.current.visible&&(R.current.position.y=k.y,R.current.position.x=k.x,p?I({gl:e,portalScene:E,camera:t,left:L.left-i,top:L.positiveYUpBottom-i,width:L.width+2*i,height:L.height+2*i}):C())},O?w:void 0);const P=e.createElement(v,{ref:R},(!l||m)&&M&&e.createElement(pe,{scale:M}),l&&M&&l(z({track:n,margin:i,scene:E||S,scale:M,scrollState:_,inViewport:x,priority:w},y)));return E?f(P,E):P}const ye=["track","children","margin","visible","hideOffscreen","debug","orthographic","priority","inViewport","bounds","scale","scrollState","camera","hud","position","rect"],Se=["track","margin","inViewportMargin","inViewportThreshold","priority"],Re=["bounds"],Ee=t=>{let{track:n,children:o,margin:l=0,visible:i=!0,hideOffscreen:a=!0,debug:s=!1,orthographic:c=!1,priority:u=q.PRIORITY_VIEWPORTS,inViewport:d,bounds:p,scale:m,scrollState:v,camera:f,hud:w}=t,b=Y(t,ye);const y=h(e=>e.scene),S=h(e=>e.get),R=h(e=>e.setEvents),{renderViewport:E}=re();return Q(()=>{y.visible=a?d&&i:i},[d,a,i]),r(()=>{const e=S().events.connected;return R({connected:n.current}),()=>R({connected:e})},[]),g(({gl:e,scene:t,camera:r})=>{t.visible&&E({gl:e,scene:t,camera:r,left:p.left-l,top:p.positiveYUpBottom-l,width:p.width+2*l,height:p.height+2*l,clearDepth:!!w})},u),e.createElement(e.Fragment,null,!c&&e.createElement(H,z({manual:!0,margin:l,makeDefault:!0},f)),c&&e.createElement(N,z({manual:!0,margin:l,makeDefault:!0},f)),(!o||s)&&m&&e.createElement(pe,{scale:m}),o&&m&&o(z({track:n,margin:l,scale:m,scrollState:v,inViewport:d,priority:u},b)))};function Ce(t){let{track:r,margin:n=0,inViewportMargin:o,inViewportThreshold:l,priority:i}=t,a=Y(t,Se);const[s]=d(()=>new T),c=fe(r,{rootMargin:o,threshold:l}),{bounds:u}=c,h=Y(c,Re),m=p((e,t)=>{if(r.current&&e.target===r.current){const{width:r,height:o,left:l,top:i}=u;t.pointer.set((e.clientX-l+n)/(r+2*n)*2-1,-(e.clientY-i+n)/(o+2*n)*2+1),t.raycaster.setFromCamera(t.pointer,t.camera)}},[u]);return u&&f(e.createElement(Ee,z({track:r,bounds:u,priority:i,margin:n},a,h)),s,{events:{compute:m,priority:i},size:{width:u.width,height:u.height}})}function Te(e,t={},{key:n,dispose:o=!0}={}){const l=B(e=>e.updateCanvas),a=B(e=>e.renderToCanvas),s=B(e=>e.removeFromCanvas),c=i(()=>n||I.generateUUID(),[]);Q(()=>{a(c,e,z({},t,{inactive:!1}))},[c]),r(()=>()=>{s(c,o)},[c]);const u=p(e=>{l(c,e)},[l,c]);return r(()=>{u(t)},[...Object.values(t)]),u}const Ie=["children","id","dispose"],Oe=n((e,t)=>{let{children:r,id:n,dispose:o=!0}=e,l=Y(e,Ie);return r?(Te(r,z({},l,{id:n,ref:t}),{key:n,dispose:o}),null):null});let Le=!1;function Me(e,{initTexture:t=!0,premultiplyAlpha:n="default"}={}){var o,l;const a=h(e=>e.gl),s=me(),c=B(e=>e.debug),[u,p]=d(null==(o=e.current)?void 0:o.currentSrc);r(()=>{const t=e.current,r=()=>{var t;p(null==(t=e.current)?void 0:t.currentSrc)};return null==t||t.addEventListener("load",r),()=>null==t?void 0:t.removeEventListener("load",r)},[e,u,p]);const m=D(()=>(O.itemStart("waiting for DOM image"),new Promise(t=>{const r=e.current;function n(){t(null==r?void 0:r.currentSrc),O.itemEnd("waiting for DOM image")}null==r||r.addEventListener("load",n,{once:!0}),null!=r&&r.complete&&(null==r||r.removeEventListener("load",n),n())})),[e,s,null==(l=e.current)?void 0:l.currentSrc,u],{equal:j}),g=function(){const e=!0===/^((?!chrome|android).)*safari/i.test(navigator.userAgent),t=navigator.userAgent.indexOf("Firefox")>-1,r=t?navigator.userAgent.match(/Firefox\/([0-9]+)\./)[1]:-1;return"undefined"==typeof createImageBitmap||e||t&&Number(r)<98}()?L:M,v=w(g,m,e=>{e instanceof M&&(e.setOptions({colorSpaceConversion:"none",premultiplyAlpha:n,imageOrientation:"flipY"}),e.setRequestHeader({Accept:(Le?"image/webp,":"")+"*/*"}))}),f=i(()=>v instanceof k?v:v instanceof ImageBitmap?new _(v):void 0,[v]);return r(function(){t&&a.initTexture(f),c&&console.log("useImageAsTexture","initTexture()")},[a,f,t]),f}A.then(e=>{Le=e});const ke=n(({children:e,enabled:t=!0,locked:n=!1,scrollRestoration:i="auto",disablePointerOnScroll:a=!0,horizontal:s=!1,scrollInContainer:c=!1,updateGlobalState:u=!0,onScroll:d,config:h={},invalidate:m=(()=>{}),addEffect:g},v)=>{const f=o(),w=o(!1),b=B(e=>e.scroll);l(v,()=>({start:()=>{var e;return null==(e=f.current)?void 0:e.start()},stop:()=>{var e;return null==(e=f.current)?void 0:e.stop()},on:(e,t)=>{var r;return null==(r=f.current)?void 0:r.on(e,t)},scrollTo:(e,t)=>{var r;return null==(r=f.current)?void 0:r.scrollTo(e,t)},raf:e=>{var t;return null==(t=f.current)?void 0:t.raf(e)},__lenis:f.current}));const y=p(e=>{a&&w.current!==e&&(w.current=e,document.documentElement.style.pointerEvents=e?"none":"auto")},[a,w]);return Q(()=>{"scrollRestoration"in window.history&&(window.history.scrollRestoration=i)},[]),Q(()=>{const e=document.documentElement,r=document.body,n=document.body.firstElementChild;let o;if(e.classList.toggle("ScrollRig-scrollHtml",c),r.classList.toggle("ScrollRig-scrollWrapper",c),c&&Object.assign(h,{smoothTouch:!0,wrapper:r,content:n}),f.current=new U(z({orientation:s?"horizontal":"vertical"},h,t?{}:{smoothWheel:!1,syncTouch:!1,smoothTouch:!1})),g)o=g(e=>{var t;return null==(t=f.current)?void 0:t.raf(e)});else{let e;e=requestAnimationFrame(function t(r){var n;null==(n=f.current)||n.raf(r),e=requestAnimationFrame(t)}),o=()=>cancelAnimationFrame(e)}return()=>{var e;o(),null==(e=f.current)||e.destroy()}},[t]),Q(()=>{const e=f.current,t=({scroll:e,limit:t,velocity:r,direction:n,progress:o})=>{const l=s?e:0;u&&(b.y=s?0:e,b.x=l,b.limit=t,b.velocity=r,b.direction=n,b.progress=o||0),Math.abs(r)>1.5&&y(!0),Math.abs(r)<1&&y(!1),d&&d({scroll:e,limit:t,velocity:r,direction:n,progress:o}),m()};return null==e||e.on("scroll",t),u&&(b.scrollDirection=s?"horizontal":"vertical",B.setState({__lenis:e,scrollTo:(...t)=>{null==e||e.scrollTo(...t)},onScroll:t=>(null==e||e.on("scroll",t),null==e||e.emit(),()=>null==e?void 0:e.off("scroll",t))}),B.getState().scroll.y=window.scrollY,B.getState().scroll.x=window.scrollX),null==e||e.emit(),()=>{null==e||e.off("scroll",t),u&&B.setState({__lenis:void 0,onScroll:()=>()=>{},scrollTo:()=>{}})}},[t]),Q(()=>{const e=()=>m(),t=()=>y(!1);return window.addEventListener("pointermove",t),window.addEventListener("pointerdown",t),window.addEventListener("wheel",e),()=>{window.removeEventListener("pointermove",t),window.removeEventListener("pointerdown",t),window.removeEventListener("wheel",e)}},[]),r(()=>(u&&(document.documentElement.classList.toggle("js-smooth-scrollbar-enabled",t),document.documentElement.classList.toggle("js-smooth-scrollbar-disabled",!t),B.setState({hasSmoothScrollbar:t})),()=>{document.documentElement.classList.remove("js-smooth-scrollbar-enabled"),document.documentElement.classList.remove("js-smooth-scrollbar-disabled")}),[t]),r(()=>{var e,t;n?null==(e=f.current)||e.stop():null==(t=f.current)||t.start()},[n]),e?e({}):null});var _e=n(function(t,r){const n=B(e=>e.isCanvasAvailable);return e.createElement(ke,z(n?{key:"r3f",ref:r,invalidate:m,addEffect:b}:{key:"native",ref:r},t))});const xe={hidden:"ScrollRig-visibilityHidden",hiddenWhenSmooth:"ScrollRig-visibilityHidden ScrollRig-hiddenIfSmooth",transparentColor:"ScrollRig-transparentColor",transparentColorWhenSmooth:"ScrollRig-transparentColor ScrollRig-hiddenIfSmooth"};export{de as GlobalCanvas,be as ScrollScene,_e as SmoothScrollbar,Oe as UseCanvas,Ce as ViewportScrollScene,xe as styles,Te as useCanvas,B as useCanvasStore,Me as useImageAsTexture,re as useScrollRig,ve as useScrollbar,fe as useTracker,me as useWindowSize};
//# sourceMappingURL=scrollrig.modern.js.map