{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/pudlqDNVEuzARYKFQ2Mu/G2qPzYtAYykyJmoVM5W6/Horizontal_scroll_1.js"],
  "sourcesContent": ["import{jsx as _jsx}from\"react/jsx-runtime\";import{useRef,useEffect}from\"react\";import{motionValue,useMotionValueEvent}from\"framer\";let globalTriggerRef=null// Global storage for the Projects ref\n;let stackRef=null// Global storage for the Stack ref\n;// Override to attach the ref to the Projects container\nexport function useProjectsRef(){const triggerRef=useRef(null);useEffect(()=>{globalTriggerRef=triggerRef.current// Assign ref to global variable\n;// Dynamically set the height of projectsRef based on stackRef's width\nconst updateHeight=()=>{if(globalTriggerRef&&stackRef){const stackWidth=stackRef.offsetWidth;globalTriggerRef.style.height=`${stackWidth}px`// Set height to match stack width\n;}};updateHeight()// Update height on initial render\n;window.addEventListener(\"resize\",updateHeight)// Update height on resize\n;return()=>window.removeEventListener(\"resize\",updateHeight);},[]);return{ref:triggerRef};}// Override to attach the ref to the Stack container\nexport function useStackRef(){const ref=useRef(null);useEffect(()=>{stackRef=ref.current// Assign ref to global variable\n;},[]);return{ref:ref};}// Override to animate horizontal scrolling without lag\nexport function useSideScroll(){const scrollY=motionValue(0)// Track vertical scroll\n;const x=motionValue(0)// Horizontal translation value\n;useEffect(()=>{const handleScroll=()=>{const scrollTop=window.pageYOffset||document.documentElement.scrollTop;scrollY.set(scrollTop)// Update scrollY with the current scroll position\n;};window.addEventListener(\"scroll\",handleScroll);return()=>window.removeEventListener(\"scroll\",handleScroll);},[scrollY]);useMotionValueEvent(scrollY,\"change\",latest=>{if(!globalTriggerRef||!stackRef)return;// Get the position and dimensions of the Projects container\nconst triggerRect=globalTriggerRef.getBoundingClientRect();const triggerTop=triggerRect.top+window.pageYOffset;const triggerBottom=triggerRect.bottom+window.pageYOffset// Bottom edge of the container\n;const viewportHeight=window.innerHeight;const viewportWidth=window.innerWidth;// Calculate the scroll range\nconst scrollStart=triggerTop;const scrollEnd=triggerBottom-viewportHeight// When the bottom aligns with the viewport bottom\n;// Calculate the maximum horizontal movement based on the width of the Stack\nconst stackWidth=stackRef.offsetWidth;const maxOffset=Math.min(0,viewportWidth-stackWidth)// Ensure it stops when aligned with the viewport\n;if(latest>=scrollStart&&latest<=scrollEnd){// Map vertical scroll to horizontal translation within the scroll range\nconst progress=(latest-scrollStart)/(scrollEnd-scrollStart)// Progress from 0 to 1\n;const targetX=progress*maxOffset;// Set the x value directly (no animation, real-time binding)\nx.set(targetX);}else if(latest<scrollStart){// Reset position before animation starts\nx.set(0);}else if(latest>scrollEnd){// Lock position at the end of the animation\nx.set(maxOffset);}});return{style:{x}};}import{useContext as __legacyOverrideHOC_useContext}from\"react\";import{DataObserverContext as __legacyOverrideHOC_DataObserverContext}from\"framer\";export function withuseProjectsRef(C){return props=>{__legacyOverrideHOC_useContext(__legacyOverrideHOC_DataObserverContext);return _jsx(C,{...props,...useProjectsRef(props)});};}withuseProjectsRef.displayName=\"useProjectsRef\";export function withuseStackRef(C){return props=>{__legacyOverrideHOC_useContext(__legacyOverrideHOC_DataObserverContext);return _jsx(C,{...props,...useStackRef(props)});};}withuseStackRef.displayName=\"useStackRef\";export function withuseSideScroll(C){return props=>{__legacyOverrideHOC_useContext(__legacyOverrideHOC_DataObserverContext);return _jsx(C,{...props,...useSideScroll(props)});};}withuseSideScroll.displayName=\"useSideScroll\";\nexport const __FramerMetadata__ = {\"exports\":{\"useProjectsRef\":{\"type\":\"override\",\"name\":\"useProjectsRef\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"useStackRef\":{\"type\":\"override\",\"name\":\"useStackRef\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withuseStackRef\":{\"type\":\"reactHoc\",\"name\":\"withuseStackRef\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withuseProjectsRef\":{\"type\":\"reactHoc\",\"name\":\"withuseProjectsRef\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withuseSideScroll\":{\"type\":\"reactHoc\",\"name\":\"withuseSideScroll\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"useSideScroll\":{\"type\":\"override\",\"name\":\"useSideScroll\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Horizontal_scroll_1.map"],
  "mappings": "6HAAmI,IAAIA,EAAiB,KACnJC,EAAS,KAEP,SAASC,GAAgB,CAAC,IAAMC,EAAWC,EAAO,IAAI,EAAE,OAAAC,EAAU,IAAI,CAACL,EAAiBG,EAAW,QAE1G,IAAMG,EAAa,IAAI,CAAC,GAAGN,GAAkBC,EAAS,CAAC,IAAMM,EAAWN,EAAS,YAAYD,EAAiB,MAAM,OAAO,GAAGO,CAAU,IACvI,CAAC,EAAE,OAAAD,EAAa,EAChBE,EAAO,iBAAiB,SAASF,CAAY,EACvC,IAAIE,EAAO,oBAAoB,SAASF,CAAY,CAAE,EAAE,CAAC,CAAC,EAAQ,CAAC,IAAIH,CAAU,CAAE,CACnF,SAASM,GAAa,CAAC,IAAMC,EAAIN,EAAO,IAAI,EAAE,OAAAC,EAAU,IAAI,CAACJ,EAASS,EAAI,OAChF,EAAE,CAAC,CAAC,EAAQ,CAAC,IAAIA,CAAG,CAAE,CAChB,SAASC,GAAe,CAAC,IAAMC,EAAQC,EAAY,CAAC,EACpDC,EAAED,EAAY,CAAC,EACrB,OAAAR,EAAU,IAAI,CAAC,IAAMU,EAAa,IAAI,CAAC,IAAMC,EAAUR,EAAO,aAAa,SAAS,gBAAgB,UAAUI,EAAQ,IAAII,CAAS,CACnI,EAAE,OAAAR,EAAO,iBAAiB,SAASO,CAAY,EAAQ,IAAIP,EAAO,oBAAoB,SAASO,CAAY,CAAE,EAAE,CAACH,CAAO,CAAC,EAAEK,EAAoBL,EAAQ,SAASM,GAAQ,CAAC,GAAG,CAAClB,GAAkB,CAACC,EAAS,OACzM,IAAMkB,EAAYnB,EAAiB,sBAAsB,EAAQoB,EAAWD,EAAY,IAAIX,EAAO,YAAkBa,EAAcF,EAAY,OAAOX,EAAO,YACtJc,EAAed,EAAO,YAAkBe,EAAcf,EAAO,WAC9DgB,EAAYJ,EAAiBK,EAAUJ,EAAcC,EAErDf,EAAWN,EAAS,YAAkByB,EAAU,KAAK,IAAI,EAAEH,EAAchB,CAAU,EACxF,GAAGW,GAAQM,GAAaN,GAAQO,EAAU,CAE1C,IAAME,GADST,EAAOM,IAAcC,EAAUD,GACvBE,EACxBZ,EAAE,IAAIa,CAAO,CAAE,MAAST,EAAOM,EAC/BV,EAAE,IAAI,CAAC,EAAWI,EAAOO,GACzBX,EAAE,IAAIY,CAAS,CAAG,CAAC,EAAQ,CAAC,MAAM,CAAC,EAAAZ,CAAC,CAAC,CAAE,CAA2J,SAASc,EAAmBC,EAAE,CAAC,OAAOC,IAAQC,EAA+BC,CAAuC,EAASC,EAAKJ,EAAE,CAAC,GAAGC,EAAM,GAAG5B,EAAe4B,CAAK,CAAC,CAAC,EAAI,CAACF,EAAmB,YAAY,iBAAwB,SAASM,EAAgBL,EAAE,CAAC,OAAOC,IAAQC,EAA+BC,CAAuC,EAASC,EAAKJ,EAAE,CAAC,GAAGC,EAAM,GAAGrB,EAAYqB,CAAK,CAAC,CAAC,EAAI,CAACI,EAAgB,YAAY,cAAqB,SAASC,EAAkBN,EAAE,CAAC,OAAOC,IAAQC,EAA+BC,CAAuC,EAASC,EAAKJ,EAAE,CAAC,GAAGC,EAAM,GAAGnB,EAAcmB,CAAK,CAAC,CAAC,EAAI,CAACK,EAAkB,YAAY",
  "names": ["globalTriggerRef", "stackRef", "useProjectsRef", "triggerRef", "pe", "ue", "updateHeight", "stackWidth", "window", "useStackRef", "ref", "useSideScroll", "scrollY", "motionValue", "x", "handleScroll", "scrollTop", "useMotionValueEvent", "latest", "triggerRect", "triggerTop", "triggerBottom", "viewportHeight", "viewportWidth", "scrollStart", "scrollEnd", "maxOffset", "targetX", "withuseProjectsRef", "C", "props", "re", "DataObserverContext", "p", "withuseStackRef", "withuseSideScroll"]
}