{"version":3,"file":"HorizontalPhotoScroller.DnoWjfVo.mjs","names":["useRef","useState","useCallback"],"sources":["https:/framerusercontent.com/modules/4nsd8OKERGphbPns2E6i/u16nIa1oX5rBURgrAyFv/HorizontalPhotoScroller.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useRef,useState,useCallback}from\"react\";import{addPropertyControls,ControlType}from\"framer\";import{useInView}from\"framer-motion\";/**\n * Horizontal Photo Scroller\n *\n * An auto-scrolling horizontal gallery that takes multiple photos and scrolls them infinitely.\n * Pauses on hover. Supports various photo ratios with natural side-by-side stacking.\n *\n * @framerIntrinsicWidth 800\n * @framerIntrinsicHeight 300\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight fixed\n */export default function HorizontalPhotoScroller(props){const{photos=[{src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Photo 1\"},{src:\"https://framerusercontent.com/images/aNsAT3jCvt4zglbWCUoFe33Q.jpg\",alt:\"Photo 2\"},{src:\"https://framerusercontent.com/images/BYnxEV1zjYb9bhWh1IUatLX9a5JVJ6XPCVuHi94.jpg\",alt:\"Photo 3\"},{src:\"https://framerusercontent.com/images/2uTNEj5aTl2K3NJaEFWMbnrA.jpg\",alt:\"Photo 4\"},{src:\"https://framerusercontent.com/images/f9RiWoNpmlCMqVRIHz8l8wYfeI.jpg\",alt:\"Photo 5\"}],gap=5,speed=30,pauseOnHover=true,showOverlay=false,overlayColor=\"rgba(0, 0, 0, 0.3)\",borderRadius=8,height=300}=props;const containerRef=useRef(null);const trackRef=useRef(null);const isInView=useInView(containerRef,{once:false,amount:.1});const[isHovered,setIsHovered]=useState(false);const[trackWidth,setTrackWidth]=useState(0);const[shouldAnimate,setShouldAnimate]=useState(false);// Duplicate photos for seamless infinite scroll\nconst duplicatedPhotos=[...photos,...photos];// Measure track width and determine if animation is needed\nuseEffect(()=>{if(trackRef.current){const width=trackRef.current.scrollWidth/2;setTrackWidth(width);// Only animate if content is wider than container\nconst containerWidth=containerRef.current?.offsetWidth||0;setShouldAnimate(width>containerWidth);}},[photos,gap]);// Calculate animation duration based on track width and speed\nconst animationDuration=trackWidth/(speed*10);// Handle hover state\nconst handleMouseEnter=useCallback(()=>{if(pauseOnHover){setIsHovered(true);}},[pauseOnHover]);const handleMouseLeave=useCallback(()=>{if(pauseOnHover){setIsHovered(false);}},[pauseOnHover]);if(!photos||photos.length===0){return /*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",backgroundColor:\"#f5f5f5\",borderRadius,color:\"#999\",fontSize:14},children:\"Add photos to get started\"});}const isPaused=pauseOnHover&&isHovered;const isRunning=shouldAnimate&&isInView;return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{width:\"100%\",height,overflow:\"hidden\",position:\"relative\",borderRadius},onMouseEnter:handleMouseEnter,onMouseLeave:handleMouseLeave,children:[/*#__PURE__*/_jsx(\"div\",{ref:trackRef,style:{display:\"flex\",gap,height:\"100%\",width:\"max-content\",animation:isRunning?`scroll ${animationDuration}s linear infinite`:\"none\",animationPlayState:isPaused?\"paused\":\"running\"},children:duplicatedPhotos.map((photo,index)=>/*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",height:\"100%\",flexShrink:0},children:[/*#__PURE__*/_jsx(\"img\",{src:photo.src,alt:photo.alt||`Photo ${index%photos.length+1}`,style:{height:\"100%\",width:\"auto\",maxWidth:\"none\",display:\"block\",borderRadius:borderRadius>0?borderRadius:0,objectFit:\"cover\"}}),showOverlay&&/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,right:0,bottom:0,backgroundColor:overlayColor,borderRadius:borderRadius>0?borderRadius:0,pointerEvents:\"none\"}})]},index))}),/*#__PURE__*/_jsx(\"style\",{children:`\n                @keyframes scroll {\n                    0% {\n                        transform: translateX(0);\n                    }\n                    100% {\n                        transform: translateX(-${trackWidth}px);\n                    }\n                }\n            `}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,bottom:0,width:40,background:\"linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0))\",pointerEvents:\"none\",zIndex:2}}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,right:0,bottom:0,width:40,background:\"linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0))\",pointerEvents:\"none\",zIndex:2}})]});}addPropertyControls(HorizontalPhotoScroller,{photos:{type:ControlType.Array,title:\"Photos\",control:{type:ControlType.ResponsiveImage},maxCount:50,defaultValue:[{src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Photo 1\"},{src:\"https://framerusercontent.com/images/aNsAT3jCvt4zglbWCUoFe33Q.jpg\",alt:\"Photo 2\"},{src:\"https://framerusercontent.com/images/BYnxEV1zjYb9bhWh1IUatLX9a5JVJ6XPCVuHi94.jpg\",alt:\"Photo 3\"},{src:\"https://framerusercontent.com/images/2uTNEj5aTl2K3NJaEFWMbnrA.jpg\",alt:\"Photo 4\"},{src:\"https://framerusercontent.com/images/f9RiWoNpmlCMqVRIHz8l8wYfeI.jpg\",alt:\"Photo 5\"}]},gap:{type:ControlType.Number,title:\"Gap\",defaultValue:5,min:0,max:50,step:1,unit:\"px\"},speed:{type:ControlType.Number,title:\"Scroll Speed\",defaultValue:30,min:5,max:100,step:5},pauseOnHover:{type:ControlType.Boolean,title:\"Pause on Hover\",defaultValue:true,enabledTitle:\"Yes\",disabledTitle:\"No\"},showOverlay:{type:ControlType.Boolean,title:\"Show Overlay\",defaultValue:false,enabledTitle:\"On\",disabledTitle:\"Off\"},overlayColor:{type:ControlType.Color,title:\"Overlay Color\",defaultValue:\"rgba(0, 0, 0, 0.3)\",hidden:({showOverlay})=>!showOverlay},borderRadius:{type:ControlType.Number,title:\"Border Radius\",defaultValue:8,min:0,max:50,step:1,unit:\"px\"},height:{type:ControlType.Number,title:\"Height\",defaultValue:300,min:100,max:800,step:10,unit:\"px\"}});HorizontalPhotoScroller.displayName=\"Horizontal Photo Scroller\";\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"HorizontalPhotoScroller\",\"slots\":[],\"annotations\":{\"framerIntrinsicWidth\":\"800\",\"framerIntrinsicHeight\":\"300\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerSupportedLayoutHeight\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./HorizontalPhotoScroller.map"],"mappings":"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"}