{"version":3,"file":"HorizontalScroller.DXpmbEeX.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/W5bVGd7Xkzj5pdlHdVI1/dBKJNqR7LVVymnyqLTcY/HorizontalScroller.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 * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n *\n * @framerIntrinsicWidth 800\n * @framerIntrinsicHeight 400\n *\n * @framerDisableUnlink\n */export default function HorizontalScroller(props){const stickyTop=props.top;const containerOverflow=props.overflow;const containerRef=useRef(null);const scrollRef=useRef(null);const sizerRef=useRef(null);const[scrollRange,setScrollRange]=useState(0);const[contentWidth,setContentWidth]=useState(0);useLayoutEffect(()=>{setScrollRange(scrollRef.current.scrollWidth);const onResize=entries=>{for(let entry of entries){setContentWidth(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+contentWidth]);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:stickyTop},children:/*#__PURE__*/_jsx(\"div\",{style:{overflow:containerOverflow},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}})]});}HorizontalScroller.displayName=\"Horizontal Scroller\";addPropertyControls(HorizontalScroller,{branding:{type:ControlType.Enum,title:\"Developed By\",options:[\"artech\"],optionTitles:[\"artech\"],displaySegmentedControl:true,description:\"Live [demo](https://horizontalscroller.framer.website).\"},children:{type:ControlType.ComponentInstance,title:\"Frame\",description:\"Long, overflowing frame.\"},top:{type:ControlType.Number,title:\"Top\",description:\"Auto sticky.\\n\\n*Note*: Parent containers require their overflows set to clip for sticky to work.\",defaultValue:0,min:0,step:1,displayStepper:true},overflow:{type:ControlType.Enum,defaultValue:\"hidden\",displaySegmentedControl:true,segmentedControlDirection:\"horizontal\",options:[\"hidden\",\"visible\"],optionTitles:[\"Hidden\",\"Visible\"]}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"HorizontalScroller\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"auto\",\"framerIntrinsicWidth\":\"800\",\"framerDisableUnlink\":\"\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerIntrinsicHeight\":\"400\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./HorizontalScroller.map"],"mappings":"uQAQG,SAAwB,EAAmB,EAAM,CAAC,IAAM,EAAU,EAAM,IAAU,EAAkB,EAAM,SAAe,EAAaA,EAAO,KAAK,CAAO,EAAUA,EAAO,KAAK,CAAO,EAASA,EAAO,KAAK,CAAM,CAAC,EAAY,GAAgBC,EAAS,EAAE,CAAM,CAAC,EAAa,GAAiBA,EAAS,EAAE,CAAC,MAAoB,CAAC,EAAe,EAAU,QAAQ,YAAY,CAAC,IAAM,EAAS,GAAS,CAAC,IAAI,IAAI,KAAS,EAAS,EAAgB,EAAM,YAAY,MAAM,CAAC,EAAe,EAAU,QAAQ,YAAY,EAAU,EAAc,GAAS,CAAC,IAAI,IAAI,KAAS,EAAS,EAAe,EAAU,QAAQ,YAAY,EAAU,EAAe,IAAI,eAAe,EAAS,CAAC,EAAe,QAAQ,EAAS,QAAQ,CAAC,IAAM,EAAiB,IAAI,iBAAiB,EAAc,CAAyF,OAAxF,EAAiB,QAAQ,EAAU,QAAQ,CAAC,WAAW,GAAK,gBAAgB,CAAC,QAAQ,CAAC,CAAC,KAAW,CAAC,EAAe,YAAY,CAAC,EAAiB,YAAY,GAAK,EAAE,CAAC,CAAC,GAAK,CAAC,mBAAiB,EAAU,CAAC,OAAO,EAAa,CAAC,CAAyI,EAAO,EAA/H,EAAa,EAAgB,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAY,EAAa,CAAC,CAAe,CAAC,QAAQ,GAAG,KAAK,EAAE,UAAU,IAAI,CAA0C,CAAC,OAAoB,EAAM,MAAM,CAAC,IAAI,EAAa,GAAG,EAAM,SAAS,CAAc,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,SAAS,IAAI,EAAU,CAAC,SAAsB,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,EAAkB,CAAC,SAAsB,EAAK,EAAO,IAAI,CAAC,IAAI,EAAU,MAAM,CAAC,EAAE,EAAO,CAAC,SAAS,EAAM,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAc,EAAK,MAAM,CAAC,IAAI,EAAS,cAAc,OAAO,MAAM,CAAC,MAAM,OAAO,OAAO,EAAY,CAAC,CAAC,CAAC,CAAC,CAAC,kBARl+C,IAAoD,IAAmD,IAAmE,CAQ0zC,EAAmB,YAAY,sBAAsB,EAAoB,EAAmB,CAAC,SAAS,CAAC,KAAK,EAAY,KAAK,MAAM,eAAe,QAAQ,CAAC,SAAS,CAAC,aAAa,CAAC,SAAS,CAAC,wBAAwB,GAAK,YAAY,0DAA0D,CAAC,SAAS,CAAC,KAAK,EAAY,kBAAkB,MAAM,QAAQ,YAAY,2BAA2B,CAAC,IAAI,CAAC,KAAK,EAAY,OAAO,MAAM,MAAM,YAAY;;mFAAoG,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,GAAK,CAAC,SAAS,CAAC,KAAK,EAAY,KAAK,aAAa,SAAS,wBAAwB,GAAK,0BAA0B,aAAa,QAAQ,CAAC,SAAS,UAAU,CAAC,aAAa,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC"}