{"version":3,"file":"SVGPathAnimation.BeP6Ssmf.mjs","names":["useState","useRef"],"sources":["https:/framerusercontent.com/modules/jyDQsrpvEKVW70tao1D7/YiJxRCHiRBzAW0UnEX45/SVGPathAnimation.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,useEffect,useMemo,useRef,startTransition}from\"react\";import{motion,useInView}from\"framer-motion\";import{addPropertyControls,ControlType}from\"framer\";/**\n * SVG Path Animation\n * \n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n * \n * @framerIntrinsicWidth 400\n * @framerIntrinsicHeight 400\n */export default function SVGPathAnimation(props){const{svgPath=\"M10 80 Q 95 10 180 80\",useFile=false,svgFile=\"\",bgColor=\"#EEEEEE\",animColor=\"#0099FF\",strokeWidth=4,trigger=\"appear\",playback=\"loop\",animationType=\"auto\",length=100,transition}=props;const[pathLength,setPathLength]=useState(0);const[extractedPath,setExtractedPath]=useState(\"\");const[viewBox,setViewBox]=useState(\"0 0 200 200\");const pathRef=useRef(null);const bgPathRef=useRef(null);const containerRef=useRef(null);const svgRef=useRef(null);const[scaledStrokeWidth,setScaledStrokeWidth]=useState(strokeWidth);const isInView=useInView(containerRef,{once:trigger===\"appear\"||playback===\"once\"});useEffect(()=>{if(useFile&&svgFile){fetch(svgFile).then(response=>response.text()).then(svgText=>{const parser=new DOMParser;const svgDoc=parser.parseFromString(svgText,\"image/svg+xml\");const pathElement=svgDoc.querySelector(\"path\");if(pathElement){const d=pathElement.getAttribute(\"d\");if(d){startTransition(()=>setExtractedPath(d));}}}).catch(error=>{console.error(\"Error loading SVG file:\",error);});}},[useFile,svgFile]);const activePath=useFile&&extractedPath?extractedPath:svgPath;useEffect(()=>{if(pathRef.current){// Use requestAnimationFrame to ensure the path is fully rendered with vector-effect applied\nrequestAnimationFrame(()=>{if(pathRef.current){const length=pathRef.current.getTotalLength();startTransition(()=>setPathLength(length));}});try{const bbox=pathRef.current.getBBox();const padding=strokeWidth*2;const newViewBox=`${bbox.x-padding} ${bbox.y-padding} ${bbox.width+padding*2} ${bbox.height+padding*2}`;startTransition(()=>setViewBox(newViewBox));}catch(error){console.error(\"Error calculating viewBox:\",error);}}},[activePath,strokeWidth]);// Calculate scaled stroke width to keep it visually constant\nuseEffect(()=>{const updateStrokeWidth=()=>{if(svgRef.current&&containerRef.current){const svgRect=svgRef.current.getBoundingClientRect();const containerRect=containerRef.current.getBoundingClientRect();// Parse viewBox to get its dimensions\nconst[,,vbWidth,vbHeight]=viewBox.split(\" \").map(Number);// Calculate scale factor (how much the SVG is scaled from its viewBox)\nconst scaleX=svgRect.width/vbWidth;const scaleY=svgRect.height/vbHeight;const scale=Math.min(scaleX,scaleY);// Scale the stroke width inversely to keep it visually constant\nconst newStrokeWidth=strokeWidth/scale;startTransition(()=>setScaledStrokeWidth(newStrokeWidth));}};updateStrokeWidth();// Update on resize\nif(typeof window!==\"undefined\"){window.addEventListener(\"resize\",updateStrokeWidth);return()=>window.removeEventListener(\"resize\",updateStrokeWidth);}},[strokeWidth,viewBox]);const shouldAnimate=trigger===\"appear\"?true:isInView;const animationProps=useMemo(()=>{if(animationType===\"manual\"){return{strokeDasharray:pathLength,strokeDashoffset:pathLength*(1-length/100)};}return{strokeDasharray:pathLength,initial:{strokeDashoffset:pathLength},animate:shouldAnimate?{strokeDashoffset:0}:{strokeDashoffset:pathLength},transition:{duration:2,ease:\"easeInOut\",repeat:playback===\"loop\"?Infinity:0,repeatType:\"loop\"}};},[animationType,pathLength,length,shouldAnimate,playback]);return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{width:\"100%\",height:\"100%\"},children:/*#__PURE__*/_jsxs(\"svg\",{ref:svgRef,viewBox:viewBox,style:{width:\"100%\",height:\"100%\"},preserveAspectRatio:\"xMidYMid meet\",children:[/*#__PURE__*/_jsx(\"path\",{ref:bgPathRef,d:activePath,stroke:bgColor,strokeWidth:scaledStrokeWidth,fill:\"none\",strokeLinecap:\"butt\",strokeLinejoin:\"round\"}),/*#__PURE__*/_jsx(motion.path,{ref:pathRef,d:activePath,stroke:animColor,strokeWidth:scaledStrokeWidth,fill:\"none\",strokeLinecap:\"butt\",strokeLinejoin:\"round\",strokeDasharray:pathLength,initial:animationType===\"auto\"?{strokeDashoffset:pathLength}:false,animate:animationType===\"manual\"?{strokeDashoffset:pathLength*(1-length/100)}:shouldAnimate?{strokeDashoffset:0}:{strokeDashoffset:pathLength},transition:animationType===\"manual\"?transition:{duration:2,ease:\"easeInOut\",repeat:playback===\"loop\"?Infinity:0,repeatType:\"loop\"}})]})});}addPropertyControls(SVGPathAnimation,{useFile:{type:ControlType.Boolean,title:\"Source\",defaultValue:false,enabledTitle:\"File\",disabledTitle:\"Path\"},svgFile:{type:ControlType.File,title:\"SVG File\",allowedFileTypes:[\"svg\"],hidden:({useFile})=>!useFile},svgPath:{type:ControlType.String,title:\"SVG Path\",defaultValue:\"M10 80 Q 95 10 180 80\",displayTextArea:true,hidden:({useFile})=>useFile},animationType:{type:ControlType.Enum,title:\"Animation Type\",options:[\"auto\",\"manual\"],optionTitles:[\"Auto\",\"Manual\"],defaultValue:\"auto\",displaySegmentedControl:true},length:{type:ControlType.Number,title:\"Length\",defaultValue:100,min:0,max:100,step:1,unit:\"%\",hidden:({animationType})=>animationType!==\"manual\"},transition:{type:ControlType.Transition,title:\"Transition\",hidden:({animationType})=>animationType!==\"manual\"},trigger:{type:ControlType.Enum,title:\"Trigger\",options:[\"appear\",\"inView\"],optionTitles:[\"Appear\",\"In View\"],defaultValue:\"appear\",displaySegmentedControl:true,hidden:({animationType})=>animationType===\"manual\"},playback:{type:ControlType.Enum,title:\"Playback\",options:[\"once\",\"loop\"],optionTitles:[\"Once\",\"Loop\"],defaultValue:\"loop\",displaySegmentedControl:true,hidden:({animationType})=>animationType===\"manual\"},bgColor:{type:ControlType.Color,title:\"Background Color\",defaultValue:\"#EEEEEE\"},animColor:{type:ControlType.Color,title:\"Animation Color\",defaultValue:\"#0099FF\"},strokeWidth:{type:ControlType.Number,title:\"Stroke Width\",defaultValue:4,min:1,max:20,step:1}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"SVGPathAnimation\",\"slots\":[],\"annotations\":{\"framerIntrinsicHeight\":\"400\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerIntrinsicWidth\":\"400\",\"framerSupportedLayoutWidth\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./SVGPathAnimation.map"],"mappings":"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"}