{"version":3,"file":"ImageClipPath.BjMyfdlG.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/ctPxuNqoVJrelvxMgBSi/Y1ZlChVA0Tkfq4grT5QR/ImageClipPath.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{motion,useInView}from\"framer-motion\";import{useRef,useState,useEffect,startTransition}from\"react\";/**\n * Image Clip Path Animation with customizable direction and transition\n * \n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function ImageClipPath(props){const{image={src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Gradient 1 - Blue\"},direction=\"right\",inset=false,revealOnView=true,revealOnlyOnce=true,viewThreshold=.3,transition,scale=1,animationEnabled=true,style}=props;const containerRef=useRef(null);const[hasAnimated,setHasAnimated]=useState(false);const[isRevealed,setIsRevealed]=useState(false);const isStatic=useIsStaticRenderer();// Use Framer Motion's useInView for efficient visibility tracking\nconst isInView=useInView(containerRef,{once:revealOnlyOnce,amount:viewThreshold});// Handle visibility changes\nuseEffect(()=>{if(isStatic||!animationEnabled)return;if(isInView&&revealOnView&&(!revealOnlyOnce||!hasAnimated)){startTransition(()=>{setIsRevealed(true);if(revealOnlyOnce)setHasAnimated(true);});}},[isInView,revealOnView,revealOnlyOnce,hasAnimated,isStatic,animationEnabled]);// Calculate clip path based on direction and inset\nconst getClipPath=revealed=>{if(isStatic||!animationEnabled)return\"inset(0% 0% 0% 0%)\"// Show full image when animation is disabled\n;if(!revealed){// Initial state (hidden)\nif(inset){return\"inset(0% 0% 0% 0%)\"// Fully visible\n;}else{switch(direction){case\"left\":return\"inset(0% 100% 0% 0%)\"// Hidden from left\n;case\"right\":return\"inset(0% 0% 0% 100%)\"// Hidden from right\n;case\"top\":return\"inset(100% 0% 0% 0%)\"// Hidden from top\n;case\"bottom\":return\"inset(0% 0% 100% 0%)\"// Hidden from bottom\n;case\"center\":return\"inset(50% 50% 50% 50%)\"// Hidden from center\n;default:return\"inset(0% 0% 0% 100%)\"// Default: hidden from right\n;}}}else{// Revealed state\nif(inset){switch(direction){case\"left\":return\"inset(0% 0% 0% 100%)\"// Reveal from left\n;case\"right\":return\"inset(0% 100% 0% 0%)\"// Reveal from right\n;case\"top\":return\"inset(0% 0% 100% 0%)\"// Reveal from top\n;case\"bottom\":return\"inset(100% 0% 0% 0%)\"// Reveal from bottom\n;case\"center\":return\"inset(50% 50% 50% 50%)\"// Reveal from center\n;default:return\"inset(0% 100% 0% 0%)\"// Default: reveal from right\n;}}else{return\"inset(0% 0% 0% 0%)\"// Fully visible\n;}}};return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{width:\"100%\",height:\"100%\",position:\"relative\",overflow:\"hidden\",...style},children:/*#__PURE__*/_jsx(motion.img,{src:image.src,alt:image.alt||\"\",style:{width:\"100%\",height:\"100%\",objectFit:\"cover\",position:\"absolute\",top:0,left:0},initial:{clipPath:animationEnabled?getClipPath(false):\"inset(0% 0% 0% 0%)\"},animate:{clipPath:animationEnabled?isRevealed?getClipPath(true):getClipPath(false):\"inset(0% 0% 0% 0%)\",scale:animationEnabled?isRevealed?scale:1:scale},transition:transition})});}addPropertyControls(ImageClipPath,{image:{type:ControlType.ResponsiveImage,title:\"Image\"},direction:{type:ControlType.Enum,title:\"Direction\",options:[\"left\",\"right\",\"top\",\"bottom\",\"center\"],defaultValue:\"right\",displaySegmentedControl:true},inset:{type:ControlType.Boolean,title:\"Inset\",defaultValue:false,enabledTitle:\"Yes\",disabledTitle:\"No\"},transition:{type:ControlType.Transition,title:\"Transition\"},revealOnView:{type:ControlType.Boolean,title:\"Reveal On View\",defaultValue:true},revealOnlyOnce:{type:ControlType.Boolean,title:\"Reveal Only Once\",defaultValue:true,hidden:({revealOnView})=>!revealOnView},viewThreshold:{type:ControlType.Number,title:\"View Threshold\",defaultValue:.3,min:0,max:1,step:.05,displayStepper:true,hidden:({revealOnView})=>!revealOnView},scale:{type:ControlType.Number,title:\"Scale\",defaultValue:1,min:.5,max:2,step:.05,displayStepper:true},animationEnabled:{type:ControlType.Boolean,title:\"Animation Enabled\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ImageClipPath\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerSupportedLayoutWidth\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ImageClipPath.map"],"mappings":"iZAKG,SAAwB,EAAc,EAAM,CAAC,GAAK,CAAC,QAAM,CAAC,IAAI,sEAAsE,IAAI,oBAAoB,CAAC,YAAU,QAAQ,QAAM,GAAM,eAAa,GAAK,iBAAe,GAAK,gBAAc,GAAG,aAAW,QAAM,EAAE,mBAAiB,GAAK,SAAO,EAAY,EAAaA,EAAO,KAAK,CAAM,CAAC,EAAY,GAAgBC,EAAS,GAAM,CAAM,CAAC,EAAW,GAAeA,EAAS,GAAM,CAAO,EAAS,GAAqB,CAC3c,EAAS,EAAU,EAAa,CAAC,KAAK,EAAe,OAAO,EAAc,CAAC,CACjF,MAAc,CAAI,GAAU,CAAC,GAA2B,GAAU,IAAe,CAAC,GAAgB,CAAC,IAAc,MAAoB,CAAC,EAAc,GAAK,CAAI,GAAe,EAAe,GAAK,EAAG,EAAI,CAAC,EAAS,EAAa,EAAe,EAAY,EAAS,EAAiB,CAAC,CACpR,IAAM,EAAY,GAAU,CAAC,GAAG,GAAU,CAAC,EAAiB,MAAM,qBACjE,GAAI,KASF,EAAO,OAAO,EAAP,CAAkB,IAAI,OAAO,MAAM,uBAC5C,IAAI,QAAQ,MAAM,uBAClB,IAAI,MAAM,MAAM,uBAChB,IAAI,SAAS,MAAM,uBACnB,IAAI,SAAS,MAAM,yBACnB,QAAQ,MAAM,4BACP,MAAM,yBAdd,IAAG,EAAO,MAAM,qBACT,OAAO,EAAP,CAAkB,IAAI,OAAO,MAAM,uBACzC,IAAI,QAAQ,MAAM,uBAClB,IAAI,MAAM,MAAM,uBAChB,IAAI,SAAS,MAAM,uBACnB,IAAI,SAAS,MAAM,yBACnB,QAAQ,MAAM,0BASV,OAAoB,EAAK,MAAM,CAAC,IAAI,EAAa,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,SAAS,WAAW,SAAS,SAAS,GAAG,EAAM,CAAC,SAAsB,EAAK,EAAO,IAAI,CAAC,IAAI,EAAM,IAAI,IAAI,EAAM,KAAK,GAAG,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,UAAU,QAAQ,SAAS,WAAW,IAAI,EAAE,KAAK,EAAE,CAAC,QAAQ,CAAC,SAAS,EAAiB,EAAY,GAAM,CAAC,qBAAqB,CAAC,QAAQ,CAAC,SAAS,EAA4B,EAAX,IAA+C,CAAC,qBAAqB,MAAM,EAAiB,EAAW,EAAM,EAAE,EAAM,CAAY,aAAW,CAAC,CAAC,CAAC,kBAzBxf,IAAwE,IAA4C,IAA6D,CAyByU,EAAoB,EAAc,CAAC,MAAM,CAAC,KAAK,EAAY,gBAAgB,MAAM,QAAQ,CAAC,UAAU,CAAC,KAAK,EAAY,KAAK,MAAM,YAAY,QAAQ,CAAC,OAAO,QAAQ,MAAM,SAAS,SAAS,CAAC,aAAa,QAAQ,wBAAwB,GAAK,CAAC,MAAM,CAAC,KAAK,EAAY,QAAQ,MAAM,QAAQ,aAAa,GAAM,aAAa,MAAM,cAAc,KAAK,CAAC,WAAW,CAAC,KAAK,EAAY,WAAW,MAAM,aAAa,CAAC,aAAa,CAAC,KAAK,EAAY,QAAQ,MAAM,iBAAiB,aAAa,GAAK,CAAC,eAAe,CAAC,KAAK,EAAY,QAAQ,MAAM,mBAAmB,aAAa,GAAK,QAAQ,CAAC,kBAAgB,CAAC,EAAa,CAAC,cAAc,CAAC,KAAK,EAAY,OAAO,MAAM,iBAAiB,aAAa,GAAG,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,eAAe,GAAK,QAAQ,CAAC,kBAAgB,CAAC,EAAa,CAAC,MAAM,CAAC,KAAK,EAAY,OAAO,MAAM,QAAQ,aAAa,EAAE,IAAI,GAAG,IAAI,EAAE,KAAK,IAAI,eAAe,GAAK,CAAC,iBAAiB,CAAC,KAAK,EAAY,QAAQ,MAAM,oBAAoB,aAAa,GAAK,aAAa,KAAK,cAAc,MAAM,CAAC,CAAC"}