{"version":3,"file":"MaskImageScroll.D0U6PB4a.mjs","names":["useState","useRef","useState"],"sources":["https:/framerusercontent.com/modules/I1DC9cTt2FcHsDUAaRxW/6iIIX4SzvuX6GX8XtSv5/SVG_Prod.js","https:/framerusercontent.com/modules/zr4TA3Xf8DW9WC3M2zEF/5CIsOhtyje1AHkxxFsYm/MaskImageScroll.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{useState,useEffect}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * @framerDisableUnlink\n *\n * @framerIntrinsicWidth 24\n * @framerIntrinsicHeight 24\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */function SVG(props){const[customSvgElement,setCustomSvgElement]=useState(null);useEffect(()=>{const svgContent=props.customSvgCode;processCustomSVGContent(svgContent);});const processCustomSVGContent=svgContent=>{const replacements=[[/width=\"[^\"]*\"/,'width=\"100%\"'],[/height=\"[^\"]*\"/,'height=\"100%\"']];const hasCustomStroke=svgContent.includes('stroke=\"');const hasCustomStrokeWidth=svgContent.includes('stroke-width=\"');const hasLineCap=svgContent.includes('stroke-linecap=\"');const hasLineJoin=svgContent.includes('stroke-linejoin=\"');if(svgContent.includes(\"<circle\")){const circleFillRegex=/<circle[^>]*fill=\"([^\"]*)\"/;const match=svgContent.match(circleFillRegex);if(match){const updatedCircle=match[0].replace(match[1],props.customColor);svgContent=svgContent.replace(circleFillRegex,updatedCircle);}else{replacements.push([/<circle/g,`<circle fill=\"${props.customColor}\"`]);}}if(hasCustomStroke){if(!hasLineCap){replacements.push([/<path/g,`<path stroke=\"${props.customColor}\"`]);}else{replacements.push([/<path/g,`<path stroke=\"${props.customColor}\" stroke-linecap=\"${props.lineCap}\"`]);}if(hasCustomStrokeWidth){replacements.push([/stroke-width=\"(?!0\\b)\\d+(\\.\\d+)?\"/g,`stroke-width=\"${props.customStrokeWidth}\"`]);}}else{replacements.push([/<path/g,`<path fill=\"${props.customColor}\"`]);}if(svgContent.includes('overflow=\"')){replacements.push([/overflow=\"[^\"]*\"/,`overflow=\"visible\"`]);}else{replacements.push([/<svg/,`<svg overflow=\"visible\"`]);}if(!hasLineJoin){replacements.push([/<path/g,`<path stroke-linejoin=\"${props.lineJoin}\"`]);}else{replacements.push([/stroke-linejoin=\"[^\"]*\"/,`stroke-linejoin=\"${props.lineJoin}\"`]);}replacements.forEach(([regex,replacement])=>{svgContent=svgContent.replace(regex,replacement);});setCustomSvgElement(svgContent);};const customContainerStyle={padding:`${props.customPadding}px`,display:\"flex\",flexDirection:\"column\",alignItems:\"center\",justifyContent:\"center\",overflow:\"visible\"};const accessibilityProps={role:\"img\",...props.title&&{\"aria-label\":props.title},...props.description&&{\"aria-description\":props.description}};return /*#__PURE__*/_jsx(\"div\",{dangerouslySetInnerHTML:{__html:customSvgElement},style:customContainerStyle,...accessibilityProps});}SVG.displayName=\"SVG\";SVG.defaultProps={customSvgCode:`<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <g clip-path=\"url(#clip0_967_124)\"> <path d=\"M18 6.09674C18 6.0348 18.0246 5.97539 18.0684 5.93159L23.6013 0.398708C23.7484 0.251575 24 0.35578 24 0.563858V11.9033C24 11.9652 23.9754 12.0246 23.9316 12.0684L18 18V6.09674Z\" fill=\"white\"/> <path d=\"M6 18V6.56386C6 6.35578 5.74843 6.25158 5.60129 6.39871L0.0684074 11.9316C0.0246069 11.9754 0 12.0348 0 12.0967V23.7664C0 23.8954 0.104567 24 0.233557 24H11.9033C11.9652 24 12.0246 23.9754 12.0684 23.9316L18 18H6Z\" fill=\"white\"/> </g> <defs> <clipPath id=\"clip0_967_124\"> <rect width=\"24\" height=\"24\" fill=\"white\"/> </clipPath> </defs> </svg>`,customColor:\"#ffffff\",customPadding:0,customStrokeWidth:2,lineCap:\"butt\",lineJoin:\"miter\",title:\"\",description:\"\"};addPropertyControls(SVG,{customSvgCode:{type:ControlType.String,title:\"SVG Code\",displayTextArea:false},customColor:{type:ControlType.Color,title:\"Color\",defaultValue:\"#ffffff\"},customPadding:{type:ControlType.Number,title:\"Padding\",defaultValue:0,min:0,step:1,displayStepper:true},customStrokeWidth:{type:ControlType.Number,title:\"Stroke\",defaultValue:2,min:0,step:.1,displayStepper:true,hidden:props=>!props.customSvgCode.includes('stroke=\"')},lineCap:{type:ControlType.Enum,title:\"Line Cap\",options:[\"butt\",\"round\",\"square\"],optionTitles:[\"Butt\",\"Round\",\"Square\"],defaultValue:\"butt\",hidden:props=>!props.customSvgCode.includes('stroke=\"')},lineJoin:{type:ControlType.Enum,title:\"Line Join\",options:[\"round\",\"miter\",\"bevel\"],optionTitles:[\"Round\",\"Miter\",\"Bevel\"],defaultValue:\"miter\",hidden:props=>!props.customSvgCode.includes('stroke=\"')},title:{type:ControlType.String,title:\"Title\",defaultValue:\"\",placeholder:\"Icon name...\"},description:{type:ControlType.String,title:\"Description\",defaultValue:\"\",placeholder:\"Icon purpose...\",description:\"More components at [Framer University](https://frameruni.link/cc).\"}});export default SVG;\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"SVG\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"fixed\",\"framerContractVersion\":\"1\",\"framerIntrinsicHeight\":\"24\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerDisableUnlink\":\"*\",\"framerIntrinsicWidth\":\"24\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./SVG_Prod.map","// Mask image animation on scroll with configurable direction, duration and easing\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useRef,useState,startTransition}from\"react\";import{motion,useInView,useAnimation}from\"framer-motion\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";/**\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function MaskImageScroll(props){const{image={src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Gradient 1 - Blue\"},direction=\"right\",duration=1,easing=\"easeOut\",customEasing=\"0.25, 0.1, 0.25, 1\",animationType=\"scroll\"}=props;const containerRef=useRef(null);const isStatic=useIsStaticRenderer();const controls=useAnimation();const isInView=useInView(containerRef,{amount:.3});const[hasAnimated,setHasAnimated]=useState(false);// Create easing functions\nconst easingMap={linear:[0,0,1,1],easeIn:[.4,0,1,1],easeOut:[0,0,.2,1],easeInOut:[.4,0,.2,1],circIn:[.6,.04,.98,.335],circOut:[.075,.82,.165,1],circInOut:[.785,.135,.15,.86],backIn:[.6,-.28,.735,.045],backOut:[.175,.885,.32,1.275],backInOut:[.68,-.55,.265,1.55],custom:(()=>{try{const values=customEasing.split(\",\").map(v=>parseFloat(v.trim()));if(values.length===4&&values.every(v=>!isNaN(v))){return values;}return[.25,.1,.25,1]// fallback\n;}catch{return[.25,.1,.25,1]// fallback\n;}})()};// Get initial and final mask paths based on direction\nconst getMaskPaths=()=>{switch(direction){case\"left\":return{initial:\"inset(0 100% 0 0)\",animate:\"inset(0 0% 0 0)\"};case\"right\":return{initial:\"inset(0 0 0 100%)\",animate:\"inset(0 0 0 0%)\"};case\"top\":return{initial:\"inset(0 0 100% 0)\",animate:\"inset(0 0 0% 0)\"};case\"bottom\":return{initial:\"inset(100% 0 0 0)\",animate:\"inset(0% 0 0 0)\"};default:return{initial:\"inset(0 0 0 100%)\",animate:\"inset(0 0 0 0%)\"};}};const maskPaths=getMaskPaths();// Handle loading animation (triggers immediately on mount)\nuseEffect(()=>{if(animationType===\"loading\"&&!isStatic&&!hasAnimated){controls.start(\"animate\");startTransition(()=>setHasAnimated(true));}},[animationType,controls,isStatic,hasAnimated]);// Handle scroll animation (triggers when in view)\nuseEffect(()=>{if(animationType===\"scroll\"&&isInView&&!isStatic&&!hasAnimated){controls.start(\"animate\");startTransition(()=>setHasAnimated(true));}},[animationType,isInView,controls,isStatic,hasAnimated]);// Static preview for non-interactive environments\nif(isStatic){return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{width:\"100%\",height:\"100%\",position:\"relative\",overflow:\"hidden\"},children:/*#__PURE__*/_jsx(\"img\",{src:image.src,alt:image.alt,style:{width:\"100%\",height:\"100%\",objectFit:\"cover\",clipPath:maskPaths.animate}})});}return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{width:\"100%\",height:\"100%\",position:\"relative\",overflow:\"hidden\"},children:/*#__PURE__*/_jsx(motion.img,{src:image.src,alt:image.alt,style:{width:\"100%\",height:\"100%\",objectFit:\"cover\"},initial:{clipPath:maskPaths.initial},animate:controls,variants:{animate:{clipPath:maskPaths.animate,transition:{duration:duration,ease:easingMap[easing]}}}})});}addPropertyControls(MaskImageScroll,{image:{type:ControlType.ResponsiveImage,title:\"Image\"},animationType:{type:ControlType.Enum,title:\"Animation Type\",options:[\"scroll\",\"loading\"],optionTitles:[\"On Scroll\",\"On Loading\"],defaultValue:\"scroll\",displaySegmentedControl:true},direction:{type:ControlType.Enum,title:\"Direction\",options:[\"left\",\"right\",\"top\",\"bottom\"],optionTitles:[\"Left\",\"Right\",\"Top\",\"Bottom\"],defaultValue:\"right\",displaySegmentedControl:true},duration:{type:ControlType.Number,title:\"Duration\",defaultValue:1,min:.1,max:5,step:.1,unit:\"s\"},easing:{type:ControlType.Enum,title:\"Easing\",options:[\"linear\",\"easeIn\",\"easeOut\",\"easeInOut\",\"circIn\",\"circOut\",\"circInOut\",\"backIn\",\"backOut\",\"backInOut\",\"custom\"],optionTitles:[\"Linear\",\"Ease In\",\"Ease Out\",\"Ease In Out\",\"Circ In\",\"Circ Out\",\"Circ In Out\",\"Back In\",\"Back Out\",\"Back In Out\",\"Custom\"],defaultValue:\"easeOut\"},customEasing:{type:ControlType.String,title:\"Custom Easing\",defaultValue:\"0.25, 0.1, 0.25, 1\",placeholder:\"x1, y1, x2, y2\",hidden:({easing})=>easing!==\"custom\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"MaskImageScroll\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"fixed\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./MaskImageScroll.map"],"mappings":"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"}