{"version":3,"file":"Stroke_Animation.DirTODUx.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/49XuG5VbLnODMqV5z71e/f9UECMl8GetFwUOiaiDE/Stroke_Animation.js"],"sourcesContent":["// Fill Effect Component - Simple fill animation from start to end\n// Supports: direction (left/right/top/bottom), animation types (once, repeat, mirror, continuous)\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{useRef,useEffect,useState}from\"react\";import{motion,useInView,useScroll,useTransform}from\"framer-motion\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n * @framerDisableUnlink\n *\n * @framerIntrinsicWidth 400\n * @framerIntrinsicHeight 1\n */export default function FillEffect(props){const{fillColor=\"#000000\",animate=true,transition={duration:2,ease:\"linear\"},backgroundColor=\"transparent\",direction=\"right\",animationType=\"once\",trigger=\"onView\",replay=false,loop=true,loopCount=0,scrollStart=0,scrollEnd=1,style}=props;const isStatic=useIsStaticRenderer();const containerRef=useRef(null);const isInView=useInView(containerRef,{once:false,amount:.1});const wasInView=useRef(false);const[hasPlayed,setHasPlayed]=useState(false);const[key,setKey]=useState(0);// Scroll tracking untuk onScroll mode\nconst{scrollYProgress}=useScroll({target:containerRef,offset:[\"start end\",\"end start\"]});const isHorizontal=direction===\"left\"||direction===\"right\";const shouldAnimate=animate&&!isStatic;// Reset animation ketika component keluar dari view (hanya jika replay true)\nuseEffect(()=>{if(!shouldAnimate||trigger===\"onLoad\"||trigger===\"onScroll\"||!replay)return;if(wasInView.current&&!isInView){setHasPlayed(false);setKey(prev=>prev+1);}wasInView.current=isInView;},[isInView,trigger,replay,shouldAnimate]);// Logika Trigger\nconst isTriggered=trigger===\"onLoad\"||trigger===\"onView\"&&isInView||trigger===\"onScroll\"&&isInView;// Set hasPlayed menjadi true ketika animasi dimulai\nuseEffect(()=>{if(isTriggered&&!hasPlayed&&trigger!==\"onScroll\"){setHasPlayed(true);}},[isTriggered,hasPlayed,trigger]);// Hitung repeat berdasarkan loop setting\nconst getRepeatCount=()=>{if(animationType===\"once\")return 0;if(!loop)return 0;return loopCount>0?loopCount-1:Infinity;};// Scroll-driven values untuk onScroll mode\nconst scrollWidth=useTransform(scrollYProgress,[scrollStart,scrollEnd],[\"0%\",\"100%\"]);const scrollHeight=useTransform(scrollYProgress,[scrollStart,scrollEnd],[\"0%\",\"100%\"]);const getAnimationProps=()=>{const duration=transition?.duration??2;const ease=transition?.ease??\"linear\";const delay=transition?.delay??0;const repeatCount=getRepeatCount();// onScroll mode tidak menggunakan animate props\nif(trigger===\"onScroll\"){return{initial:{},animate:{}};}// Jika mode \"once\" sudah pernah jalan, tahan di 100%\nif(animationType===\"once\"&&hasPlayed&&!replay){return{initial:isHorizontal?{width:\"100%\"}:{height:\"100%\"},animate:isHorizontal?{width:\"100%\"}:{height:\"100%\"}};}// Jika belum tertrigger, mulai dari 0%\nif(!isTriggered&&!hasPlayed){return{initial:isHorizontal?{width:\"0%\"}:{height:\"0%\"},animate:isHorizontal?{width:\"0%\"}:{height:\"0%\"}};}if(animationType===\"continuous\"){const side=direction===\"right\"?\"left\":direction===\"left\"?\"right\":direction===\"bottom\"?\"top\":\"bottom\";const size=isHorizontal?\"width\":\"height\";return{initial:{[side]:\"0%\",[size]:\"0%\"},animate:{[side]:[\"0%\",\"0%\",\"100%\"],[size]:[\"0%\",\"100%\",\"0%\"]},transition:{duration:duration*2,ease,delay,// times: [0, 0.5, 1],\nrepeat:repeatCount,repeatDelay:0}};}// Mode: Once, Repeat, Mirror\nconst sizeProp=isHorizontal?\"width\":\"height\";return{initial:{[sizeProp]:\"0%\"},animate:{[sizeProp]:\"100%\"},transition:{duration,ease,delay,repeat:repeatCount,repeatType:animationType===\"mirror\"?\"mirror\":\"loop\"}};};const animationProps=getAnimationProps();const getBaseStyles=()=>{const base={backgroundColor:fillColor,position:\"absolute\"};// Untuk onScroll mode, gunakan scroll-driven values\nif(trigger===\"onScroll\"){if(direction===\"right\")return{...base,top:0,left:0,height:\"100%\",width:scrollWidth};if(direction===\"left\")return{...base,top:0,right:0,height:\"100%\",width:scrollWidth};if(direction===\"bottom\")return{...base,top:0,left:0,width:\"100%\",height:scrollHeight};if(direction===\"top\")return{...base,bottom:0,left:0,width:\"100%\",height:scrollHeight};}// Untuk onLoad & onView mode\nif(direction===\"right\")return{...base,top:0,left:0,height:\"100%\"};if(direction===\"left\")return{...base,top:0,right:0,height:\"100%\"};if(direction===\"bottom\")return{...base,top:0,left:0,width:\"100%\"};if(direction===\"top\")return{...base,bottom:0,left:0,width:\"100%\"};return base;};if(isStatic){return /*#__PURE__*/_jsx(\"div\",{style:{position:\"relative\",width:\"100%\",height:\"100%\",backgroundColor,overflow:\"hidden\",...style},children:/*#__PURE__*/_jsx(\"div\",{style:{...getBaseStyles(),width:\"100%\",height:\"100%\"}})});}return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{position:\"relative\",width:\"100%\",height:\"100%\",minWidth:1,minHeight:1,backgroundColor,overflow:\"hidden\",...style},children:/*#__PURE__*/_jsx(motion.div,{style:getBaseStyles(),initial:animationProps.initial,animate:animationProps.animate,transition:animationProps.transition},key)});}FillEffect.displayName=\"Stroke Animation\";addPropertyControls(FillEffect,{fillColor:{type:ControlType.Color,title:\"Fill Color\",defaultValue:\"#000000\"},direction:{type:ControlType.Enum,title:\"Direction\",defaultValue:\"right\",options:[\"left\",\"right\",\"top\",\"bottom\"],optionTitles:[\"Left\",\"Right\",\"Top\",\"Bottom\"],optionIcons:[\"direction-left\",\"direction-right\",\"direction-up\",\"direction-down\"],displaySegmentedControl:true},animationType:{type:ControlType.Enum,title:\"Type\",options:[\"once\",\"repeat\",\"mirror\",\"continuous\"],optionTitles:[\"Once\",\"Repeat\",\"Mirror\",\"Continuous\"],defaultValue:\"once\",hidden:props=>props.trigger===\"onScroll\"},trigger:{type:ControlType.Enum,title:\"Trigger\",options:[\"onLoad\",\"onView\",\"onScroll\"],optionTitles:[\"On Load\",\"On View\",\"On Scroll\"],defaultValue:\"onView\"},scrollStart:{type:ControlType.Number,title:\"Scroll Start\",defaultValue:0,min:0,max:1,step:.01,displayStepper:true,description:\"When animation starts (0 = top, 1 = bottom)\",hidden:props=>props.trigger!==\"onScroll\"},scrollEnd:{type:ControlType.Number,title:\"Scroll End\",defaultValue:1,min:0,max:1,step:.01,displayStepper:true,description:\"When animation completes (0 = top, 1 = bottom)\",hidden:props=>props.trigger!==\"onScroll\"},loop:{type:ControlType.Boolean,title:\"Loop\",defaultValue:true,hidden:props=>props.animationType===\"once\"||props.trigger===\"onScroll\"},loopCount:{type:ControlType.Number,title:\"Loop Count\",defaultValue:0,min:0,description:\"0: Infinity | 1+: Specific number of loops\",hidden:props=>props.animationType===\"once\"||!props.loop||props.trigger===\"onScroll\"},replay:{type:ControlType.Boolean,title:\"Replay\",defaultValue:false,hidden:props=>props.trigger===\"onLoad\"||props.trigger===\"onScroll\"},animate:{type:ControlType.Boolean,title:\"Animate\",defaultValue:true},transition:{type:ControlType.Transition,title:\"Transition\",hidden:props=>props.trigger===\"onScroll\"},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"transparent\",description:\"See more component from [Iklil Najma M](https://framer.link/YR9Yat6)\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"FillEffect\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerDisableUnlink\":\"*\",\"framerIntrinsicWidth\":\"400\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerIntrinsicHeight\":\"1\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Stroke_Animation.map"],"mappings":"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"}