{"version":3,"file":"Animator_Basic_With_Scroll.CLTL6LTG.mjs","names":["useRef","Children","ScrollTrigger"],"sources":["https:/framerusercontent.com/modules/K3yJRCQaP4LkHLMnK88Z/1XNZSuErBQIfpKT5SF0p/Animator_Basic_With_Scroll.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useRef,useEffect,Children}from\"react\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";import gsap from\"gsap\";import{ScrollTrigger}from\"gsap/ScrollTrigger\";gsap.registerPlugin(ScrollTrigger);export default function Animator(props){const{animate,shouldLoop,loopOptions,slots=[]}=props;const pathRef=useRef(null);useEffect(()=>{if(!animate||RenderTarget.current()===RenderTarget.canvas)return;const pathElement=pathRef.current;const pathLength=pathElement.getTotalLength();pathElement.style.strokeDasharray=pathLength;pathElement.style.strokeDashoffset=pathLength;gsap.fromTo(pathElement,{strokeDashoffset:pathLength},{strokeDashoffset:0,ease:\"none\",scrollTrigger:{trigger:pathElement,start:\"top 50%\",end:\"bottom 50%\",scrub:.5,toggleActions:shouldLoop?\"play none none reverse\":\"play none none none\",repeat:shouldLoop?-1:0,repeatType:loopOptions}});return()=>{ScrollTrigger.getAll().forEach(trigger=>trigger.kill());};},[animate,shouldLoop,loopOptions]);const hasChildren=Children.count(slots)>0;if(!hasChildren){return /*#__PURE__*/_jsxs(\"div\",{style:placeholderStyles,children:[/*#__PURE__*/_jsx(\"div\",{style:emojiStyles,children:\"✍️\"}),/*#__PURE__*/_jsx(\"p\",{style:titleStyles,children:\"Connect to Graphic\"}),/*#__PURE__*/_jsx(\"p\",{style:subtitleStyles,children:\"Animates single or joined paths on Web Pages only.\"})]});}const firstChild=getFirstChild(slots);const svgChild=getFirstChild(firstChild.props.svg);if(!svgChild||RenderTarget.current()===RenderTarget.canvas){return firstChild;}const attributes=svgChild.match(/[\\w-]+=\"[^\"]*\"/g);let pathD,stroke,strokeWidth,strokeLinecap,strokeLinejoin,svgViewbox;for(const element of attributes){if(element.includes(\"d=\"))pathD=splitAndReplace(element);if(element.includes(\"stroke=\"))stroke=splitAndReplace(element);if(element.includes(\"stroke-width=\"))strokeWidth=splitAndReplace(element);if(element.includes(\"stroke-linecap=\"))strokeLinecap=splitAndReplace(element);if(element.includes(\"stroke-linejoin=\"))strokeLinejoin=splitAndReplace(element);}svgViewbox=svgChild.split(\"viewBox=\")[1]?.split(\">\")[0]?.replace(/^\"(.+(?=\"$))\"$/,\"$1\");return /*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100%\",display:\"flex\",placeContent:\"center\",placeItems:\"center\",backgroundColor:\"transparent\",overflow:\"hidden\"},children:/*#__PURE__*/_jsx(\"svg\",{xmlns:\"http://www.w3.org/2000/svg\",width:\"100%\",height:\"100%\",viewBox:svgViewbox,children:/*#__PURE__*/_jsx(\"path\",{ref:pathRef,d:pathD,stroke:stroke,strokeWidth:strokeWidth,strokeLinejoin:strokeLinejoin,strokeLinecap:strokeLinecap,fill:\"transparent\"})})});}// Default Properties\nAnimator.defaultProps={animate:true,shouldLoop:false,loopOptions:\"reverse\"};// Property Controls\naddPropertyControls(Animator,{slots:{type:ControlType.ComponentInstance,title:\"Children\"},animate:{title:\"Animate\",type:ControlType.Boolean,defaultValue:Animator.defaultProps.animate,enabledTitle:\"True\",disabledTitle:\"False\"},shouldLoop:{title:\"Loop\",type:ControlType.Boolean,defaultValue:Animator.defaultProps.shouldLoop,enabledTitle:\"True\",disabledTitle:\"False\",hidden(props){return props.animate===false;}},loopOptions:{type:ControlType.Enum,title:\"Type\",defaultValue:Animator.defaultProps.loopOptions,options:[\"loop\",\"reverse\",\"mirror\"],optionTitles:[\"Loop\",\"Reverse\",\"Mirror\"],hidden(props){return props.shouldLoop===false;}}});// Helper Functions\nconst splitAndReplace=string=>{return string.split(\"=\")[1].replace(/['\"]+/g,\"\");};function getFirstChild(slots){let firstChild;Children.map(slots,child=>{if(firstChild===undefined){firstChild=child;}});return firstChild;}// Styles\nconst placeholderStyles={display:\"flex\",width:\"100%\",height:\"100%\",placeContent:\"center\",placeItems:\"center\",flexDirection:\"column\",color:\"#96F\",background:\"rgba(136, 85, 255, 0.1)\",fontSize:11,overflow:\"hidden\"};const emojiStyles={fontSize:32,marginBottom:10};const titleStyles={margin:0,marginBottom:10,fontWeight:600,textAlign:\"center\"};const subtitleStyles={margin:0,opacity:.7,maxWidth:150,lineHeight:1.5,textAlign:\"center\"};\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"Animator\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Animator_Basic_With_Scroll.map"],"mappings":"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"}