{"version":3,"file":"ImageComparisonSlider_1.9O2CcK-4.mjs","names":["useRef","useState","useCallback"],"sources":["https:/framerusercontent.com/modules/nDQCQ5DAfWsA6m65u5hZ/IUfzJEYzfXx7ZF49GR6x/ImageComparisonSlider_1.js"],"sourcesContent":["// Image before-and-after slider with customizable images, object-fit modes, and arrow icon\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{useCallback,useEffect,useRef,useState,startTransition}from\"react\";/**\n * Before After Image Slider\n *\n * @framerIntrinsicWidth 600\n * @framerIntrinsicHeight 400\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function ImageComparisonSlider(props){const{beforeImage={src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Before image\"},afterImage={src:\"https://framerusercontent.com/images/aNsAT3jCvt4zglbWCUoFe33Q.jpg\",alt:\"After image\"},initialPosition=50,dividerColor=\"#FFFFFF\",dividerWidth=3,showArrow=true,arrowColor=\"#000000\",arrowSize=20,arrowBackgroundColor=\"#FFFFFF\",arrowBackgroundSize=48,arrowBorderRadius=24,objectFit=\"cover\",borderRadius=0,autoAnimate=false,animationDuration=3,animationLoop=true,backgroundImage={src:\"https://framerusercontent.com/images/BYnxEV1zjYb9bhWh1IwBZ1ZoS60.jpg\",alt:\"Background image\"}}=props;const containerRef=useRef(null);const[position,setPosition]=useState(initialPosition);const[isDragging,setIsDragging]=useState(false);const isStatic=useIsStaticRenderer();const animationRef=useRef(null);const startTimeRef=useRef(null);// Map \"fit\" to \"contain\" for CSS background-size\nconst backgroundSize=objectFit===\"fit\"?\"contain\":objectFit;const updatePositionFromEvent=useCallback(e=>{if(!containerRef.current)return;const rect=containerRef.current.getBoundingClientRect();const x=e.clientX-rect.left;const newPosition=Math.max(0,Math.min(100,x/rect.width*100));startTransition(()=>setPosition(newPosition));},[]);const handleClick=useCallback(e=>{if(!isDragging){updatePositionFromEvent(e);}},[isDragging,updatePositionFromEvent]);const handleDoubleClick=()=>{startTransition(()=>setPosition(initialPosition));};const handleMouseDown=e=>{e.preventDefault();startTransition(()=>setIsDragging(true));};const handleMouseMove=useCallback(e=>{if(!isDragging||!containerRef.current)return;updatePositionFromEvent(e);},[isDragging,updatePositionFromEvent]);const handleMouseUp=useCallback(()=>{startTransition(()=>setIsDragging(false));},[]);useEffect(()=>{if(isStatic)return;const handleGlobalMouseMove=e=>handleMouseMove(e);const handleGlobalMouseUp=()=>handleMouseUp();if(isDragging){window.addEventListener(\"mousemove\",handleGlobalMouseMove);window.addEventListener(\"mouseup\",handleGlobalMouseUp);}return()=>{window.removeEventListener(\"mousemove\",handleGlobalMouseMove);window.removeEventListener(\"mouseup\",handleGlobalMouseUp);};},[isDragging,handleMouseMove,handleMouseUp,isStatic]);useEffect(()=>{if(!autoAnimate||isStatic||isDragging){if(animationRef.current){cancelAnimationFrame(animationRef.current);animationRef.current=null;startTimeRef.current=null;}return;}// Reset animation start time when animation settings change\nstartTimeRef.current=null;const animate=timestamp=>{if(!startTimeRef.current){startTimeRef.current=timestamp;}const elapsed=timestamp-startTimeRef.current;const duration=animationDuration*1e3;if(animationLoop){// Loop animation: 0% -> 100% -> 0%\nconst progress=elapsed%duration/duration;const loopProgress=progress<.5?progress*2:(1-progress)*2;const newPosition=loopProgress*100;startTransition(()=>setPosition(newPosition));animationRef.current=requestAnimationFrame(animate);}else{// One-time animation: 0% -> 100%\nconst progress=Math.min(elapsed/duration,1);const newPosition=progress*100;startTransition(()=>setPosition(newPosition));if(progress<1){animationRef.current=requestAnimationFrame(animate);}else{animationRef.current=null;startTimeRef.current=null;}}};animationRef.current=requestAnimationFrame(animate);return()=>{if(animationRef.current){cancelAnimationFrame(animationRef.current);}};},[autoAnimate,animationDuration,animationLoop,isStatic,isDragging]);return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{position:\"relative\",width:\"100%\",height:\"100%\",overflow:\"hidden\",cursor:isDragging?\"ew-resize\":\"pointer\",userSelect:\"none\",borderRadius:`${borderRadius}px`},onClick:isStatic?undefined:handleClick,onMouseMove:isStatic?undefined:handleMouseMove,onMouseDown:isStatic?undefined:handleMouseDown,onMouseUp:isStatic?undefined:handleMouseUp,onDoubleClick:handleDoubleClick,onKeyDown:e=>{if(e.key===\" \"||e.key===\"Enter\"){handleClick(e);}},tabIndex:0,role:\"slider\",\"aria-valuenow\":position,\"aria-valuemin\":0,\"aria-valuemax\":100,\"aria-orientation\":\"horizontal\",children:[/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",backgroundImage:`url(${backgroundImage.src})`,backgroundSize:backgroundSize,backgroundPosition:\"center\",backgroundRepeat:\"no-repeat\",zIndex:0},\"aria-label\":backgroundImage.alt,role:\"img\"}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",backgroundImage:`url(${afterImage.src})`,backgroundSize:backgroundSize,backgroundPosition:\"center\",backgroundRepeat:\"no-repeat\",zIndex:1},\"aria-label\":afterImage.alt,role:\"img\"}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",backgroundImage:`url(${beforeImage.src})`,backgroundSize:backgroundSize,backgroundPosition:\"center\",backgroundRepeat:\"no-repeat\",clipPath:`inset(0 ${100-position}% 0 0)`,zIndex:1},\"aria-label\":beforeImage.alt,role:\"img\"}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:`${position}%`,width:`${dividerWidth}px`,height:\"100%\",backgroundColor:dividerColor,transform:`translateX(-${dividerWidth/2}px)`,cursor:\"ew-resize\",zIndex:2},onMouseDown:isStatic?undefined:handleMouseDown}),showArrow&&/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:`calc(50% - ${arrowBackgroundSize/2}px)`,left:`${position}%`,width:`${arrowBackgroundSize}px`,height:`${arrowBackgroundSize}px`,borderRadius:`${arrowBorderRadius}px`,backgroundColor:arrowBackgroundColor,boxShadow:\"0 2px 8px rgba(0, 0, 0, 0.15)\",transform:`translateX(-${arrowBackgroundSize/2}px)`,cursor:\"ew-resize\",zIndex:3,display:\"flex\",justifyContent:\"center\",alignItems:\"center\"},onMouseDown:isStatic?undefined:handleMouseDown,children:/*#__PURE__*/_jsxs(\"svg\",{viewBox:\"0 0 24 24\",width:arrowSize,height:arrowSize,strokeWidth:\"2.5\",stroke:arrowColor,fill:\"none\",strokeLinecap:\"round\",strokeLinejoin:\"round\",\"aria-label\":\"Drag handle\",children:[/*#__PURE__*/_jsx(\"title\",{children:\"Drag handle\"}),/*#__PURE__*/_jsx(\"path\",{d:\"M18 8l4 4m0 0l-4 4m4-4H2m4-4L2 12m0 0l4 4\"})]})})]});}addPropertyControls(ImageComparisonSlider,{beforeImage:{type:ControlType.ResponsiveImage,title:\"Before Image\"},afterImage:{type:ControlType.ResponsiveImage,title:\"After Image\"},backgroundImage:{type:ControlType.ResponsiveImage,title:\"Background Image\"},objectFit:{type:ControlType.Enum,title:\"Image Fit\",options:[\"cover\",\"contain\",\"fill\",\"fit\"],optionTitles:[\"Cover\",\"Contain\",\"Fill\",\"Fit\"],defaultValue:\"cover\",displaySegmentedControl:true},borderRadius:{type:ControlType.Number,title:\"Border Radius\",defaultValue:0,min:0,max:50,step:1,unit:\"px\"},initialPosition:{type:ControlType.Number,title:\"Initial Position\",defaultValue:50,min:0,max:100,step:1,unit:\"%\"},autoAnimate:{type:ControlType.Boolean,title:\"Auto Animate\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},animationLoop:{type:ControlType.Boolean,title:\"Loop Animation\",defaultValue:true,enabledTitle:\"Loop\",disabledTitle:\"Once\",hidden:({autoAnimate})=>!autoAnimate},animationDuration:{type:ControlType.Number,title:\"Duration\",defaultValue:3,min:1,max:20,step:.5,unit:\"s\",hidden:({autoAnimate})=>!autoAnimate},dividerColor:{type:ControlType.Color,title:\"Divider Color\",defaultValue:\"#FFFFFF\"},dividerWidth:{type:ControlType.Number,title:\"Divider Width\",defaultValue:3,min:1,max:10,step:1,unit:\"px\"},showArrow:{type:ControlType.Boolean,title:\"Show Arrow\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\"},arrowBackgroundColor:{type:ControlType.Color,title:\"Arrow Background\",defaultValue:\"#FFFFFF\",hidden:({showArrow})=>!showArrow},arrowBackgroundSize:{type:ControlType.Number,title:\"Background Size\",defaultValue:48,min:30,max:80,step:2,unit:\"px\",hidden:({showArrow})=>!showArrow},arrowBorderRadius:{type:ControlType.Number,title:\"Border Radius\",defaultValue:24,min:0,max:40,step:1,unit:\"px\",hidden:({showArrow})=>!showArrow},arrowColor:{type:ControlType.Color,title:\"Arrow Color\",defaultValue:\"#000000\",hidden:({showArrow})=>!showArrow},arrowSize:{type:ControlType.Number,title:\"Arrow Size\",defaultValue:20,min:12,max:40,step:2,unit:\"px\",hidden:({showArrow})=>!showArrow}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ImageComparisonSlider\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any\",\"framerSupportedLayoutHeight\":\"any\",\"framerIntrinsicWidth\":\"600\",\"framerIntrinsicHeight\":\"400\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ImageComparisonSlider_1.map"],"mappings":"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"}