{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/89cSFglclNracpvIBq8W/PfOOebVVwxtfLObxj7Fh/HorizontalScroll.js"],
  "sourcesContent": ["import{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useRef,useState,useLayoutEffect}from\"react\";import{motion,useTransform,useScroll}from\"framer-motion\";/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function HorizontalScroll(props){const{items,backgroundColor}=props;const targetRef=useRef(null);const contentRef=useRef(null);const[offset,setOffset]=useState(0);const{scrollYProgress}=useScroll({target:targetRef});useLayoutEffect(()=>{if(!contentRef.current||!window)return;const contentWidth=contentRef.current.scrollWidth;const viewportWidth=window.innerWidth;const distance=contentWidth-viewportWidth;setOffset(-distance);},[items]);const x=useTransform(scrollYProgress,[0,1],[\"0px\",`${offset}px`]);return /*#__PURE__*/_jsx(\"section\",{ref:targetRef,style:{height:\"100%\",backgroundColor},children:/*#__PURE__*/_jsx(\"div\",{style:{position:\"sticky\",top:0,left:0,right:0,display:\"flex\",height:\"100vh\",alignItems:\"center\",overflow:\"hidden\"},children:/*#__PURE__*/_jsx(motion.div,{ref:contentRef,style:{x,display:\"flex\"},children:items.map((item,index)=>/*#__PURE__*/_jsx(\"div\",{style:{flexShrink:0,height:\"100vh\"},children:item},index))})})});}HorizontalScroll.displayName=\"Horizontal Scroll\";addPropertyControls(HorizontalScroll,{items:{type:ControlType.Array,control:{type:ControlType.ComponentInstance}},backgroundColor:{type:ControlType.Color,title:\"Background Color\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"HorizontalScroll\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./HorizontalScroll.map"],
  "mappings": "4KAGkB,SAARA,EAAkCC,EAAM,CAAC,GAAK,CAAC,MAAAC,EAAM,gBAAAC,CAAe,EAAEF,EAAYG,EAAUC,EAAO,IAAI,EAAQC,EAAWD,EAAO,IAAI,EAAO,CAACE,EAAOC,CAAS,EAAEC,EAAS,CAAC,EAAO,CAAC,gBAAAC,CAAe,EAAEC,EAAU,CAAC,OAAOP,CAAS,CAAC,EAAEQ,EAAgB,IAAI,CAAC,GAAG,CAACN,EAAW,SAAS,CAACO,EAAO,OAAO,IAAMC,EAAaR,EAAW,QAAQ,YAAkBS,EAAcF,EAAO,WAAiBG,EAASF,EAAaC,EAAcP,EAAU,CAACQ,CAAQ,CAAE,EAAE,CAACd,CAAK,CAAC,EAAE,IAAMe,EAAEC,EAAaR,EAAgB,CAAC,EAAE,CAAC,EAAE,CAAC,MAAM,GAAGH,CAAM,IAAI,CAAC,EAAE,OAAoBY,EAAK,UAAU,CAAC,IAAIf,EAAU,MAAM,CAAC,OAAO,OAAO,gBAAAD,CAAe,EAAE,SAAsBgB,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,SAAS,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,OAAO,OAAO,QAAQ,WAAW,SAAS,SAAS,QAAQ,EAAE,SAAsBA,EAAKC,EAAO,IAAI,CAAC,IAAId,EAAW,MAAM,CAAC,EAAAW,EAAE,QAAQ,MAAM,EAAE,SAASf,EAAM,IAAI,CAACmB,EAAKC,IAAqBH,EAAK,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,OAAO,OAAO,EAAE,SAASE,CAAI,EAAEC,CAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,CAACtB,EAAiB,YAAY,oBAAoBuB,EAAoBvB,EAAiB,CAAC,MAAM,CAAC,KAAKwB,EAAY,MAAM,QAAQ,CAAC,KAAKA,EAAY,iBAAiB,CAAC,EAAE,gBAAgB,CAAC,KAAKA,EAAY,MAAM,MAAM,kBAAkB,CAAC,CAAC",
  "names": ["HorizontalScroll", "props", "items", "backgroundColor", "targetRef", "pe", "contentRef", "offset", "setOffset", "ye", "scrollYProgress", "useScroll", "fe", "window", "contentWidth", "viewportWidth", "distance", "x", "useTransform", "p", "motion", "item", "index", "addPropertyControls", "ControlType"]
}