{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/bERtgpwu9Ae5HpjYMofJ/WFveBw4x5QztPsAs0DpU/HorizontalScroll.js"],
  "sourcesContent": ["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useLayoutEffect,useRef,useState}from\"react\";import{motion,useScroll,useSpring,useTransform}from\"framer-motion\";/**\n * These annotations control how your component sizes\n * Learn more: https://www.framer.com/docs/guides/auto-sizing\n *\n * @framerSupportedLayoutWidth auto\n * @framerSupportedLayoutHeight auto\n */export default function HorizontalScroll(props){const containerRef=useRef(null);const scrollRef=useRef(null);const sizerRef=useRef(null);const[scrollRange,setScrollRange]=useState(0);const[viewportW,setViewportW]=useState(0);useLayoutEffect(()=>{setScrollRange(scrollRef.current.scrollWidth);const onResize=entries=>{for(let entry of entries){setViewportW(entry.contentRect.width);setScrollRange(scrollRef.current.scrollWidth);}};const onStyleChange=entries=>{for(let entry of entries){setScrollRange(scrollRef.current.scrollWidth);}};const resizeObserver=new ResizeObserver(onResize);resizeObserver.observe(sizerRef.current);const mutationObserver=new MutationObserver(onStyleChange);mutationObserver.observe(scrollRef.current,{attributes:true,attributeFilter:[\"style\"]});return()=>{resizeObserver.disconnect();mutationObserver.disconnect();};},[]);const{scrollYProgress}=useScroll({target:containerRef});const transform=useTransform(scrollYProgress,[0,1],[0,-scrollRange+viewportW]);const physics={damping:60,mass:1,stiffness:500};const spring=useSpring(transform,physics);return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,...props,children:[/*#__PURE__*/_jsx(\"div\",{style:{position:\"sticky\",top:0},children:/*#__PURE__*/_jsx(\"div\",{style:{overflow:\"hidden\"},children:/*#__PURE__*/_jsx(motion.div,{ref:scrollRef,style:{x:spring},children:props.children})})}),/*#__PURE__*/_jsx(\"div\",{ref:sizerRef,\"aria-hidden\":\"true\",style:{width:\"100%\",height:scrollRange}})]});}addPropertyControls(HorizontalScroll,{children:{type:ControlType.ComponentInstance}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"HorizontalScroll\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"auto\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"auto\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./HorizontalScroll.map"],
  "mappings": "+GAMkB,SAARA,EAAkCC,EAAM,CAAC,IAAMC,EAAaC,EAAO,IAAI,EAAQC,EAAUD,EAAO,IAAI,EAAQE,EAASF,EAAO,IAAI,EAAO,CAACG,EAAYC,CAAc,EAAEC,EAAS,CAAC,EAAO,CAACC,EAAUC,CAAY,EAAEF,EAAS,CAAC,EAAEG,EAAgB,IAAI,CAACJ,EAAeH,EAAU,QAAQ,WAAW,EAAE,IAAMQ,EAASC,GAAS,CAAC,QAAQC,KAASD,EAASH,EAAaI,EAAM,YAAY,KAAK,EAAEP,EAAeH,EAAU,QAAQ,WAAW,CAAG,EAAQW,EAAcF,GAAS,CAAC,QAAQC,KAASD,EAASN,EAAeH,EAAU,QAAQ,WAAW,CAAG,EAAQY,EAAe,IAAI,eAAeJ,CAAQ,EAAEI,EAAe,QAAQX,EAAS,OAAO,EAAE,IAAMY,EAAiB,IAAI,iBAAiBF,CAAa,EAAE,OAAAE,EAAiB,QAAQb,EAAU,QAAQ,CAAC,WAAW,GAAK,gBAAgB,CAAC,OAAO,CAAC,CAAC,EAAQ,IAAI,CAACY,EAAe,WAAW,EAAEC,EAAiB,WAAW,CAAE,CAAE,EAAE,CAAC,CAAC,EAAE,GAAK,CAAC,gBAAAC,CAAe,EAAEC,EAAU,CAAC,OAAOjB,CAAY,CAAC,EAAQkB,EAAUC,EAAaH,EAAgB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAACZ,EAAYG,CAAS,CAAC,EAAwDa,EAAOC,EAAUH,EAAzD,CAAC,QAAQ,GAAG,KAAK,EAAE,UAAU,GAAG,CAA0C,EAAE,OAAoBI,EAAM,MAAM,CAAC,IAAItB,EAAa,GAAGD,EAAM,SAAS,CAAcwB,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,SAAS,IAAI,CAAC,EAAE,SAAsBA,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,QAAQ,EAAE,SAAsBA,EAAKC,EAAO,IAAI,CAAC,IAAItB,EAAU,MAAM,CAAC,EAAEkB,CAAM,EAAE,SAASrB,EAAM,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,EAAewB,EAAK,MAAM,CAAC,IAAIpB,EAAS,cAAc,OAAO,MAAM,CAAC,MAAM,OAAO,OAAOC,CAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,CAACqB,EAAoB3B,EAAiB,CAAC,SAAS,CAAC,KAAK4B,EAAY,iBAAiB,CAAC,CAAC",
  "names": ["HorizontalScroll", "props", "containerRef", "pe", "scrollRef", "sizerRef", "scrollRange", "setScrollRange", "ye", "viewportW", "setViewportW", "fe", "onResize", "entries", "entry", "onStyleChange", "resizeObserver", "mutationObserver", "scrollYProgress", "useScroll", "transform", "useTransform", "spring", "useSpring", "u", "p", "motion", "addPropertyControls", "ControlType"]
}