{"version":3,"file":"ImageScrollCard.C2ZPWep7.mjs","names":["useState","useRef","_Fragment"],"sources":["https:/framerusercontent.com/modules/N5cwNhYvHkqzvf3c394a/UgY8GyjmXRXJjlCVsb0c/ImageScrollCard.js"],"sourcesContent":["// Image card with hover scrolling - scrolls down on first hover, then enables top/bottom area scrolling\nimport{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{useState,useRef,useEffect,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";/**\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function ImageScrollCard(props){const{image={src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Long image\"},scrollSpeed=50,autoplay=false,loop=false,borderRadius=8,shadow=true}=props;const[scrollY,setScrollY]=useState(0);const[isHovering,setIsHovering]=useState(false);const[hasInitialHover,setHasInitialHover]=useState(false);const[imageHeight,setImageHeight]=useState(0);const[containerHeight,setContainerHeight]=useState(0);const containerRef=useRef(null);const imageRef=useRef(null);const animationRef=useRef();const isStatic=useIsStaticRenderer();// Calculate max scroll distance\nconst maxScroll=Math.max(0,imageHeight-containerHeight);const effectiveScrollSpeed=Math.max(1,scrollSpeed);useEffect(()=>{if(isStatic||!autoplay)return;if(maxScroll<=0)return;startTransition(()=>{setHasInitialHover(true);setIsHovering(true);setScrollY(0);});startScrollAnimation(\"down\");return()=>{stopScrollAnimation();startTransition(()=>setIsHovering(false));};// eslint-disable-next-line react-hooks/exhaustive-deps\n},[autoplay,isStatic,maxScroll]);useEffect(()=>{const updateDimensions=()=>{if(containerRef.current&&imageRef.current){const containerRect=containerRef.current.getBoundingClientRect();const imageRect=imageRef.current.getBoundingClientRect();startTransition(()=>{setContainerHeight(containerRect.height);setImageHeight(imageRect.height);});}};const img=new Image;img.onload=()=>{setTimeout(updateDimensions,100);};img.src=image.src;const resizeObserver=new ResizeObserver(updateDimensions);if(containerRef.current){resizeObserver.observe(containerRef.current);}return()=>{resizeObserver.disconnect();};},[image.src]);const startScrollAnimation=direction=>{if(animationRef.current){cancelAnimationFrame(animationRef.current);}const animate=()=>{setScrollY(current=>{let newScrollY=current;if(direction===\"initial\"){// Initial hover - scroll down a bit\nconst targetScroll=Math.min(maxScroll*.3,maxScroll);const diff=targetScroll-current;newScrollY=current+diff*.05;if(Math.abs(diff)>1){animationRef.current=requestAnimationFrame(animate);}}else if(direction===\"down\"){newScrollY=Math.min(current+effectiveScrollSpeed*.016,maxScroll);if(newScrollY<maxScroll){animationRef.current=requestAnimationFrame(animate);}else if(loop&&(autoplay||isHovering)){// Loop back to start\nnewScrollY=0;animationRef.current=requestAnimationFrame(animate);}}else if(direction===\"up\"){newScrollY=Math.max(current-effectiveScrollSpeed*.016,0);if(newScrollY>0){animationRef.current=requestAnimationFrame(animate);}else if(loop&&(autoplay||isHovering)){// Loop back to end\nnewScrollY=maxScroll;animationRef.current=requestAnimationFrame(animate);}}return newScrollY;});};animate();};const stopScrollAnimation=()=>{if(animationRef.current){cancelAnimationFrame(animationRef.current);}};const handleMouseEnter=()=>{if(isStatic||autoplay)return;startTransition(()=>{setIsHovering(true);if(!hasInitialHover){setHasInitialHover(true);startScrollAnimation(\"initial\");}});};const handleMouseLeave=()=>{if(isStatic||autoplay)return;startTransition(()=>{setIsHovering(false);});stopScrollAnimation();// Reset to top\nstartTransition(()=>{setScrollY(0);});};const handleMouseMove=e=>{if(isStatic||autoplay||!isHovering||!hasInitialHover||!containerRef.current)return;const rect=containerRef.current.getBoundingClientRect();const mouseY=e.clientY-rect.top;const centerY=rect.height/2;stopScrollAnimation();if(mouseY<centerY){// Top half - scroll up\nstartScrollAnimation(\"up\");}else{// Bottom half - scroll down\nstartScrollAnimation(\"down\");}};useEffect(()=>{return()=>{if(animationRef.current){cancelAnimationFrame(animationRef.current);}};},[]);return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{width:\"100%\",height:\"100%\",position:\"relative\",overflow:\"hidden\",borderRadius:borderRadius,boxShadow:shadow?\"0 4px 20px rgba(0, 0, 0, 0.1)\":\"none\",cursor:\"pointer\",...props.style},onMouseEnter:handleMouseEnter,onMouseLeave:handleMouseLeave,onMouseMove:handleMouseMove,children:[/*#__PURE__*/_jsx(\"img\",{ref:imageRef,src:image.src,alt:image.alt,style:{width:\"100%\",height:\"auto\",display:\"block\",transform:`translateY(-${scrollY}px)`,transition:isHovering?\"none\":\"transform 0.3s ease-out\",objectFit:\"cover\",objectPosition:\"top\"},draggable:false}),isHovering&&hasInitialHover&&!isStatic&&/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,right:0,height:\"50%\",background:\"linear-gradient(to bottom, rgba(0,0,0,0.05), transparent)\",pointerEvents:\"none\",opacity:.3}}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",bottom:0,left:0,right:0,height:\"50%\",background:\"linear-gradient(to top, rgba(0,0,0,0.05), transparent)\",pointerEvents:\"none\",opacity:.3}})]})]});}addPropertyControls(ImageScrollCard,{image:{type:ControlType.ResponsiveImage,title:\"Image\"},scrollSpeed:{type:ControlType.Number,title:\"Scroll Speed\",defaultValue:50,min:1,max:300,step:1},autoplay:{type:ControlType.Boolean,title:\"Autoplay\",defaultValue:false,enabledTitle:\"On\",disabledTitle:\"Off\"},loop:{type:ControlType.Boolean,title:\"Loop\",defaultValue:false,enabledTitle:\"On\",disabledTitle:\"Off\"},borderRadius:{type:ControlType.Number,title:\"Border Radius\",defaultValue:8,min:0,max:32,step:1,unit:\"px\"},shadow:{type:ControlType.Boolean,title:\"Shadow\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\",description:\"More components by [Sarib Khan](https://xtarc.agency/)\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ImageScrollCard\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerSupportedLayoutWidth\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ImageScrollCard.map"],"mappings":"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"}