{"version":3,"file":"Circle_Animation.CD6VHugF.mjs","names":["React.useRef","React.useCallback"],"sources":["https:/framerusercontent.com/modules/WhYSln59vSRayZNpv2RL/cULTZ9r2IJrBxfnl6Bx3/Circle_Animation.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";import{motion,useAnimation}from\"framer-motion\";export default function DoubleProgressCircle(props){const{size,strokeWidth,color1,color2,duration,gap,replay}=props;const controls1=useAnimation();const controls2=useAnimation();const svgRef=React.useRef(null);const center=size/2;const radius1=(size-strokeWidth)/2;const radius2=radius1-gap;const circumference1=2*Math.PI*radius1;const circumference2=2*Math.PI*radius2;const playAnimation=React.useCallback(()=>{controls1.set({strokeDashoffset:circumference1});controls2.set({strokeDashoffset:-circumference2});controls1.start({strokeDashoffset:0,transition:{duration,ease:\"easeInOut\",delay:.1}});controls2.start({strokeDashoffset:0,transition:{duration,ease:\"easeInOut\"}});},[circumference1,circumference2,duration]);React.useEffect(()=>{const el=svgRef.current;if(!el)return;// Reset to hidden state\ncontrols1.set({strokeDashoffset:circumference1});controls2.set({strokeDashoffset:-circumference2});const observer=new IntersectionObserver(entries=>{entries.forEach(entry=>{if(entry.isIntersecting){playAnimation();// 👇 If replay is OFF, stop observing after first play\nif(!replay){observer.disconnect();}}});},{threshold:.3});observer.observe(el);return()=>observer.disconnect();},[replay,size,strokeWidth,duration,gap]);return /*#__PURE__*/_jsxs(\"svg\",{ref:svgRef,width:size,height:size,children:[/*#__PURE__*/_jsx(motion.circle,{cx:center,cy:center,r:radius1,fill:\"transparent\",stroke:color1,strokeWidth:strokeWidth,strokeDasharray:circumference1,strokeLinecap:\"round\",transform:`rotate(-90 ${center} ${center})`,animate:controls1,initial:false}),/*#__PURE__*/_jsx(motion.circle,{cx:center,cy:center,r:radius2,fill:\"transparent\",stroke:color2,strokeWidth:strokeWidth,strokeDasharray:circumference2,strokeLinecap:\"round\",transform:`rotate(-90 ${center} ${center})`,animate:controls2,initial:false})]});}// DEFAULTS\nDoubleProgressCircle.defaultProps={size:160,strokeWidth:6,color1:\"#3B82F6\",color2:\"#06B6D4\",duration:2,gap:32,replay:false};// CONTROLS\naddPropertyControls(DoubleProgressCircle,{size:{type:ControlType.Number,title:\"Size\",min:100,max:400},strokeWidth:{type:ControlType.Number,title:\"Stroke\",min:2,max:20},gap:{type:ControlType.Number,title:\"Gap\",min:10,max:80},color1:{type:ControlType.Color,title:\"Outer Color\"},color2:{type:ControlType.Color,title:\"Inner Color\"},duration:{type:ControlType.Number,title:\"Duration\",min:.2,max:5,step:.1},replay:{type:ControlType.Boolean,title:\"Replay\",defaultValue:false,enabledTitle:\"Yes\",disabledTitle:\"No\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"DoubleProgressCircle\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Circle_Animation.map"],"mappings":"kPAAwL,SAAwB,EAAqB,EAAM,CAAC,GAAK,CAAC,OAAK,cAAY,SAAO,SAAO,WAAS,MAAI,UAAQ,EAAY,EAAU,GAAc,CAAO,EAAU,GAAc,CAAO,EAAOA,EAAa,KAAK,CAAO,EAAO,EAAK,EAAQ,GAAS,EAAK,GAAa,EAAQ,EAAQ,EAAQ,EAAU,EAAe,EAAE,KAAK,GAAG,EAAc,EAAe,EAAE,KAAK,GAAG,EAAc,EAAcC,MAAsB,CAAC,EAAU,IAAI,CAAC,iBAAiB,EAAe,CAAC,CAAC,EAAU,IAAI,CAAC,iBAAiB,CAAC,EAAe,CAAC,CAAC,EAAU,MAAM,CAAC,iBAAiB,EAAE,WAAW,CAAC,WAAS,KAAK,YAAY,MAAM,GAAG,CAAC,CAAC,CAAC,EAAU,MAAM,CAAC,iBAAiB,EAAE,WAAW,CAAC,WAAS,KAAK,YAAY,CAAC,CAAC,EAAG,CAAC,EAAe,EAAe,EAAS,CAAC,CAE7uB,OAF8uB,MAAoB,CAAC,IAAM,EAAG,EAAO,QAAQ,GAAG,CAAC,EAAG,OAC17B,EAAU,IAAI,CAAC,iBAAiB,EAAe,CAAC,CAAC,EAAU,IAAI,CAAC,iBAAiB,CAAC,EAAe,CAAC,CAAC,IAAM,EAAS,IAAI,qBAAqB,GAAS,CAAC,EAAQ,QAAQ,GAAO,CAAI,EAAM,iBAAgB,GAAe,CACjN,GAAQ,EAAS,YAAY,GAAK,EAAG,CAAC,UAAU,GAAG,CAAC,CAAsB,OAArB,EAAS,QAAQ,EAAG,KAAW,EAAS,YAAY,EAAG,CAAC,EAAO,EAAK,EAAY,EAAS,EAAI,CAAC,CAAqB,EAAM,MAAM,CAAC,IAAI,EAAO,MAAM,EAAK,OAAO,EAAK,SAAS,CAAc,EAAK,EAAO,OAAO,CAAC,GAAG,EAAO,GAAG,EAAO,EAAE,EAAQ,KAAK,cAAc,OAAO,EAAmB,cAAY,gBAAgB,EAAe,cAAc,QAAQ,UAAU,cAAc,EAAO,GAAG,EAAO,GAAG,QAAQ,EAAU,QAAQ,GAAM,CAAC,CAAc,EAAK,EAAO,OAAO,CAAC,GAAG,EAAO,GAAG,EAAO,EAAE,EAAQ,KAAK,cAAc,OAAO,EAAmB,cAAY,gBAAgB,EAAe,cAAc,QAAQ,UAAU,cAAc,EAAO,GAAG,EAAO,GAAG,QAAQ,EAAU,QAAQ,GAAM,CAAC,CAAC,CAAC,CAAC,kBAFpqB,IAA4B,IAAoD,IAA+C,CAGxL,EAAqB,aAAa,CAAC,KAAK,IAAI,YAAY,EAAE,OAAO,UAAU,OAAO,UAAU,SAAS,EAAE,IAAI,GAAG,OAAO,GAAM,CAC3H,EAAoB,EAAqB,CAAC,KAAK,CAAC,KAAK,EAAY,OAAO,MAAM,OAAO,IAAI,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,EAAY,OAAO,MAAM,SAAS,IAAI,EAAE,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,EAAY,OAAO,MAAM,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,OAAO,CAAC,KAAK,EAAY,MAAM,MAAM,cAAc,CAAC,OAAO,CAAC,KAAK,EAAY,MAAM,MAAM,cAAc,CAAC,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,WAAW,IAAI,GAAG,IAAI,EAAE,KAAK,GAAG,CAAC,OAAO,CAAC,KAAK,EAAY,QAAQ,MAAM,SAAS,aAAa,GAAM,aAAa,MAAM,cAAc,KAAK,CAAC,CAAC"}