{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/j9AEAU6ACAbwAAxPTvWl/ysQA2kmX0qhQ3WSVnZNE/SlideBeforeAfter_1.js"],
  "sourcesContent": ["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";export function BeforeAfter(props){const{beforeImage,afterImage,handlerImage,handlerSize,beforeLabel,afterLabel}=props;// If there's no afterImage, just show the beforeImage\nif(!afterImage){return /*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",width:\"100%\",height:\"100%\",overflow:\"hidden\"},children:[/*#__PURE__*/_jsx(\"img\",{src:beforeImage,style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",objectFit:\"cover\"}}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",bottom:10,left:10,padding:\"5px 12px\",backgroundColor:\"rgba(0,0,0,1)\",color:\"#fafafa\",borderRadius:\"20px\",fontFamily:\"Golos Text\",fontWeight:\"500\",fontSize:\"12px\"},children:beforeLabel})]});}const[position,setPosition]=React.useState(50);const[dragging,setDragging]=React.useState(false);const[isInView,setIsInView]=React.useState(false);const containerRef=React.useRef(null);const draggingRef=React.useRef(false);React.useEffect(()=>{draggingRef.current=dragging;},[dragging]);React.useEffect(()=>{const observer=new IntersectionObserver(([entry])=>{if(entry.isIntersecting)setIsInView(true);},{threshold:.25});if(containerRef.current)observer.observe(containerRef.current);return()=>{if(containerRef.current)observer.unobserve(containerRef.current);};},[]);React.useEffect(()=>{if(!isInView||draggingRef.current)return;let startTime=null;const duration=3e3;const segment=duration/3;const animate=timestamp=>{if(draggingRef.current)return;if(!startTime)startTime=timestamp;const elapsed=timestamp-startTime;if(elapsed>=duration){setPosition(50);return;}let newPos=50;if(elapsed<=segment){newPos=50+(25-50)*(elapsed/segment);}else if(elapsed<=2*segment){newPos=25+(75-25)*((elapsed-segment)/segment);}else{newPos=75+(50-75)*((elapsed-2*segment)/segment);}setPosition(newPos);requestAnimationFrame(animate);};requestAnimationFrame(animate);},[isInView]);const handleDrag=e=>{const rect=containerRef.current.getBoundingClientRect();let newPosition=(e.clientX-rect.left)/rect.width*100;newPosition=Math.max(0,Math.min(newPosition,100));setPosition(newPosition);setDragging(true);};const handleDragStart=()=>{document.addEventListener(\"mousemove\",handleDrag);document.addEventListener(\"mouseup\",handleDragEnd);document.body.style.userSelect=\"none\";document.body.style.pointerEvents=\"none\";};const handleDragEnd=()=>{document.removeEventListener(\"mousemove\",handleDrag);document.removeEventListener(\"mouseup\",handleDragEnd);document.body.style.userSelect=\"\";document.body.style.pointerEvents=\"\";setDragging(false);};return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,onMouseDown:handleDragStart,style:{position:\"relative\",width:\"100%\",height:\"100%\",overflow:\"hidden\",cursor:\"ew-resize\"},children:[/*#__PURE__*/_jsx(\"img\",{src:beforeImage,style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",objectFit:\"cover\",clipPath:`polygon(0 0, ${position}% 0, ${position}% 100%, 0 100%)`,transition:dragging?\"none\":\"clip-path 0.5s ease-out\"}}),/*#__PURE__*/_jsx(\"img\",{src:afterImage,style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",objectFit:\"cover\",clipPath:`polygon(${position}% 0, 100% 0, 100% 100%, ${position}% 100%)`,transition:dragging?\"none\":\"clip-path 0.5s ease-out\"}}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,bottom:0,left:`${position}%`,width:\"2px\",backgroundColor:\"rgba(0, 0, 0, 1)\",transition:dragging?\"none\":\"left 0.5s ease-out\"}}),handlerImage?/*#__PURE__*/_jsx(\"img\",{src:handlerImage,style:{position:\"absolute\",top:\"50%\",left:`${position}%`,transform:\"translate(-50%, -50%)\",height:`${handlerSize}px`,borderRadius:\"50%\",transition:dragging?\"none\":\"left 0.5s ease-out\"}}):/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:\"50%\",left:`${position}%`,transform:\"translate(-50%, -50%)\",width:`${handlerSize}px`,height:`${handlerSize}px`,backgroundColor:\"#fff\",borderRadius:\"50%\",transition:dragging?\"none\":\"left 0.5s ease-out\"}}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",bottom:10,left:10,padding:\"5px 12px\",backgroundColor:\"rgba(0,0,0,1)\",color:\"#fafafa\",borderRadius:\"20px\",fontFamily:\"Golos Text\",fontWeight:\"500\",fontSize:\"12px\",opacity:position>25?1:0,transition:\"opacity 0.15s\"},children:beforeLabel}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",bottom:10,right:10,padding:\"5px 12px\",backgroundColor:\"rgba(0,0,0,1)\",color:\"#fafafa\",fontFamily:\"Golos Text\",fontWeight:\"500\",fontSize:\"12px\",borderRadius:\"20px\",opacity:position<75?1:0,transition:\"opacity 0.15s\"},children:afterLabel})]});}BeforeAfter.defaultProps={beforeImage:\"https://example.com/before.jpg\",afterImage:\"\",handlerSize:20,beforeLabel:\"Before\",afterLabel:\"After\"};addPropertyControls(BeforeAfter,{beforeImage:{type:ControlType.String,title:\"Before Image URL\",defaultValue:BeforeAfter.defaultProps.beforeImage},afterImage:{type:ControlType.String,title:\"After Image URL\",defaultValue:BeforeAfter.defaultProps.afterImage},handlerImage:{type:ControlType.File,title:\"Handler Image\",allowedFileTypes:[\"jpg\",\"jpeg\",\"png\",\"svg\"]},handlerSize:{type:ControlType.Number,title:\"Handler Size\",defaultValue:BeforeAfter.defaultProps.handlerSize,min:10,max:200},beforeLabel:{type:ControlType.String,title:\"Before Label\",defaultValue:BeforeAfter.defaultProps.beforeLabel},afterLabel:{type:ControlType.String,title:\"After Label\",defaultValue:BeforeAfter.defaultProps.afterLabel}});\nexport const __FramerMetadata__ = {\"exports\":{\"BeforeAfter\":{\"type\":\"reactComponent\",\"name\":\"BeforeAfter\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./SlideBeforeAfter_1.map"],
  "mappings": "qHAAgJ,SAASA,EAAYC,EAAM,CAAC,GAAK,CAAC,YAAAC,EAAY,WAAAC,EAAW,aAAAC,EAAa,YAAAC,EAAY,YAAAC,EAAY,WAAAC,CAAU,EAAEN,EAC1P,GAAG,CAACE,EAAY,OAAoBK,EAAM,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,MAAM,OAAO,OAAO,OAAO,SAAS,QAAQ,EAAE,SAAS,CAAcC,EAAK,MAAM,CAAC,IAAIP,EAAY,MAAM,CAAC,SAAS,WAAW,IAAI,EAAE,KAAK,EAAE,MAAM,OAAO,OAAO,OAAO,UAAU,OAAO,CAAC,CAAC,EAAeO,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,OAAO,GAAG,KAAK,GAAG,QAAQ,WAAW,gBAAgB,gBAAgB,MAAM,UAAU,aAAa,OAAO,WAAW,aAAa,WAAW,MAAM,SAAS,MAAM,EAAE,SAASH,CAAW,CAAC,CAAC,CAAC,CAAC,EAAG,GAAK,CAACI,EAASC,CAAW,EAAQC,EAAS,EAAE,EAAO,CAACC,EAASC,CAAW,EAAQF,EAAS,EAAK,EAAO,CAACG,EAASC,CAAW,EAAQJ,EAAS,EAAK,EAAQK,EAAmBC,EAAO,IAAI,EAAQC,EAAkBD,EAAO,EAAK,EAAQE,EAAU,IAAI,CAACD,EAAY,QAAQN,CAAS,EAAE,CAACA,CAAQ,CAAC,EAAQO,EAAU,IAAI,CAAC,IAAMC,EAAS,IAAI,qBAAqB,CAAC,CAACC,CAAK,IAAI,CAAIA,EAAM,gBAAeN,EAAY,EAAI,CAAE,EAAE,CAAC,UAAU,GAAG,CAAC,EAAE,OAAGC,EAAa,SAAQI,EAAS,QAAQJ,EAAa,OAAO,EAAQ,IAAI,CAAIA,EAAa,SAAQI,EAAS,UAAUJ,EAAa,OAAO,CAAE,CAAE,EAAE,CAAC,CAAC,EAAQG,EAAU,IAAI,CAAC,GAAG,CAACL,GAAUI,EAAY,QAAQ,OAAO,IAAII,EAAU,KAAWC,EAAS,IAAUC,EAAQD,EAAS,EAAQE,EAAQC,GAAW,CAAC,GAAGR,EAAY,QAAQ,OAAWI,IAAUA,EAAUI,GAAU,IAAMC,EAAQD,EAAUJ,EAAU,GAAGK,GAASJ,EAAS,CAACb,EAAY,EAAE,EAAE,MAAO,CAAC,IAAIkB,EAAO,GAAMD,GAASH,EAASI,EAAO,GAAI,KAAQD,EAAQH,GAAkBG,GAAS,EAAEH,EAASI,EAAO,GAAI,KAASD,EAAQH,GAASA,GAAeI,EAAO,GAAI,MAASD,EAAQ,EAAEH,GAASA,GAAUd,EAAYkB,CAAM,EAAE,sBAAsBH,CAAO,CAAE,EAAE,sBAAsBA,CAAO,CAAE,EAAE,CAACX,CAAQ,CAAC,EAAE,IAAMe,EAAWC,GAAG,CAAC,IAAMC,EAAKf,EAAa,QAAQ,sBAAsB,EAAMgB,GAAaF,EAAE,QAAQC,EAAK,MAAMA,EAAK,MAAM,IAAIC,EAAY,KAAK,IAAI,EAAE,KAAK,IAAIA,EAAY,GAAG,CAAC,EAAEtB,EAAYsB,CAAW,EAAEnB,EAAY,EAAI,CAAE,EAAQoB,EAAgB,IAAI,CAAC,SAAS,iBAAiB,YAAYJ,CAAU,EAAE,SAAS,iBAAiB,UAAUK,CAAa,EAAE,SAAS,KAAK,MAAM,WAAW,OAAO,SAAS,KAAK,MAAM,cAAc,MAAO,EAAQA,EAAc,IAAI,CAAC,SAAS,oBAAoB,YAAYL,CAAU,EAAE,SAAS,oBAAoB,UAAUK,CAAa,EAAE,SAAS,KAAK,MAAM,WAAW,GAAG,SAAS,KAAK,MAAM,cAAc,GAAGrB,EAAY,EAAK,CAAE,EAAE,OAAoBN,EAAM,MAAM,CAAC,IAAIS,EAAa,YAAYiB,EAAgB,MAAM,CAAC,SAAS,WAAW,MAAM,OAAO,OAAO,OAAO,SAAS,SAAS,OAAO,WAAW,EAAE,SAAS,CAAczB,EAAK,MAAM,CAAC,IAAIP,EAAY,MAAM,CAAC,SAAS,WAAW,IAAI,EAAE,KAAK,EAAE,MAAM,OAAO,OAAO,OAAO,UAAU,QAAQ,SAAS,gBAAgBQ,CAAQ,QAAQA,CAAQ,kBAAkB,WAAWG,EAAS,OAAO,yBAAyB,CAAC,CAAC,EAAeJ,EAAK,MAAM,CAAC,IAAIN,EAAW,MAAM,CAAC,SAAS,WAAW,IAAI,EAAE,KAAK,EAAE,MAAM,OAAO,OAAO,OAAO,UAAU,QAAQ,SAAS,WAAWO,CAAQ,2BAA2BA,CAAQ,UAAU,WAAWG,EAAS,OAAO,yBAAyB,CAAC,CAAC,EAAeJ,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,IAAI,EAAE,OAAO,EAAE,KAAK,GAAGC,CAAQ,IAAI,MAAM,MAAM,gBAAgB,mBAAmB,WAAWG,EAAS,OAAO,oBAAoB,CAAC,CAAC,EAAET,EAA0BK,EAAK,MAAM,CAAC,IAAIL,EAAa,MAAM,CAAC,SAAS,WAAW,IAAI,MAAM,KAAK,GAAGM,CAAQ,IAAI,UAAU,wBAAwB,OAAO,GAAGL,CAAW,KAAK,aAAa,MAAM,WAAWQ,EAAS,OAAO,oBAAoB,CAAC,CAAC,EAAeJ,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,IAAI,MAAM,KAAK,GAAGC,CAAQ,IAAI,UAAU,wBAAwB,MAAM,GAAGL,CAAW,KAAK,OAAO,GAAGA,CAAW,KAAK,gBAAgB,OAAO,aAAa,MAAM,WAAWQ,EAAS,OAAO,oBAAoB,CAAC,CAAC,EAAeJ,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,OAAO,GAAG,KAAK,GAAG,QAAQ,WAAW,gBAAgB,gBAAgB,MAAM,UAAU,aAAa,OAAO,WAAW,aAAa,WAAW,MAAM,SAAS,OAAO,QAAQC,EAAS,GAAG,EAAE,EAAE,WAAW,eAAe,EAAE,SAASJ,CAAW,CAAC,EAAeG,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,OAAO,GAAG,MAAM,GAAG,QAAQ,WAAW,gBAAgB,gBAAgB,MAAM,UAAU,WAAW,aAAa,WAAW,MAAM,SAAS,OAAO,aAAa,OAAO,QAAQC,EAAS,GAAG,EAAE,EAAE,WAAW,eAAe,EAAE,SAASH,CAAU,CAAC,CAAC,CAAC,CAAC,CAAE,CAACP,EAAY,aAAa,CAAC,YAAY,iCAAiC,WAAW,GAAG,YAAY,GAAG,YAAY,SAAS,WAAW,OAAO,EAAEoC,EAAoBpC,EAAY,CAAC,YAAY,CAAC,KAAKqC,EAAY,OAAO,MAAM,mBAAmB,aAAarC,EAAY,aAAa,WAAW,EAAE,WAAW,CAAC,KAAKqC,EAAY,OAAO,MAAM,kBAAkB,aAAarC,EAAY,aAAa,UAAU,EAAE,aAAa,CAAC,KAAKqC,EAAY,KAAK,MAAM,gBAAgB,iBAAiB,CAAC,MAAM,OAAO,MAAM,KAAK,CAAC,EAAE,YAAY,CAAC,KAAKA,EAAY,OAAO,MAAM,eAAe,aAAarC,EAAY,aAAa,YAAY,IAAI,GAAG,IAAI,GAAG,EAAE,YAAY,CAAC,KAAKqC,EAAY,OAAO,MAAM,eAAe,aAAarC,EAAY,aAAa,WAAW,EAAE,WAAW,CAAC,KAAKqC,EAAY,OAAO,MAAM,cAAc,aAAarC,EAAY,aAAa,UAAU,CAAC,CAAC",
  "names": ["BeforeAfter", "props", "beforeImage", "afterImage", "handlerImage", "handlerSize", "beforeLabel", "afterLabel", "u", "p", "position", "setPosition", "ye", "dragging", "setDragging", "isInView", "setIsInView", "containerRef", "pe", "draggingRef", "ue", "observer", "entry", "startTime", "duration", "segment", "animate", "timestamp", "elapsed", "newPos", "handleDrag", "e", "rect", "newPosition", "handleDragStart", "handleDragEnd", "addPropertyControls", "ControlType"]
}