{"version":3,"file":"HorizontalPhotoScroller.1MGK43Fm.mjs","names":["useRef","useState","useCallback"],"sources":["https:/framerusercontent.com/modules/4nsd8OKERGphbPns2E6i/U5L5PpwttHjotDMidIil/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{motion,useInView,useAnimationControls}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[containerWidth,setContainerWidth]=useState(0);const controls=useAnimationControls();const animationRef=useRef(null);// Duplicate photos for seamless infinite scroll\nconst duplicatedPhotos=[...photos,...photos];// Calculate track width after images load\nconst updateDimensions=useCallback(()=>{if(trackRef.current&&containerRef.current){const fullWidth=trackRef.current.scrollWidth;const halfWidth=fullWidth/2;setTrackWidth(halfWidth);setContainerWidth(containerRef.current.offsetWidth);}},[]);// Initial setup and resize handling\nuseEffect(()=>{const timer=setTimeout(()=>{updateDimensions();},100);const resizeObserver=new ResizeObserver(()=>{updateDimensions();});if(containerRef.current){resizeObserver.observe(containerRef.current);}return()=>{clearTimeout(timer);resizeObserver.disconnect();};},[updateDimensions]);// Recalculate when photos or gap changes\nuseEffect(()=>{const timer=setTimeout(()=>{updateDimensions();},100);return()=>clearTimeout(timer);},[photos,gap,updateDimensions]);// Start/restart animation when trackWidth changes\nuseEffect(()=>{if(trackWidth<=0||!isInView){controls.stop();return;}// Only animate if content is wider than container\nif(trackWidth<=containerWidth){controls.stop();return;}const duration=trackWidth/(speed*10);const startAnimation=async()=>{await controls.start({x:-trackWidth,transition:{duration,ease:\"linear\",repeat:Infinity,repeatType:\"loop\"}});};startAnimation();return()=>{controls.stop();};},[trackWidth,containerWidth,speed,isInView,controls]);// Handle pause/play on hover\nuseEffect(()=>{if(!trackWidth||trackWidth<=containerWidth)return;if(pauseOnHover&&isHovered){controls.stop();}else if(isInView){// Resume from current position\nconst currentX=animationRef.current?.x?.get?.()||0;const remainingDistance=trackWidth+currentX;const duration=remainingDistance/(speed*10);controls.start({x:-trackWidth,transition:{duration,ease:\"linear\",repeat:Infinity,repeatType:\"loop\"}});}},[isHovered,pauseOnHover,trackWidth,containerWidth,speed,isInView,controls]);// 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\"});}return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{width:\"100%\",height,overflow:\"hidden\",position:\"relative\",borderRadius},onMouseEnter:handleMouseEnter,onMouseLeave:handleMouseLeave,children:[/*#__PURE__*/_jsx(motion.div,{ref:trackRef,animate:controls,style:{display:\"flex\",gap,height:\"100%\",width:\"max-content\"},onUpdate:latest=>{animationRef.current=latest;},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}`,onLoad:updateDimensions,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\"}})]},`${photo.src}-${index}`))}),/*#__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\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerIntrinsicHeight\":\"300\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./HorizontalPhotoScroller.map"],"mappings":"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"}