{"version":3,"file":"MaskImageScroll.D-5foad7.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/onsXPRXwGvL3tqd4Q8Qn/rUa25P0qMZ5VtlXYJnBg/pjrPAFIHP.js","https:/framerusercontent.com/modules/UXu9KCneSZvjX3jRFKFU/4ckBszKQWpzQAvCYA9kf/MaskImageScroll.js"],"sourcesContent":["// Generated by Framer (3df86f7)\nimport{fontStore}from\"framer\";fontStore.loadFonts([\"GF;Space Mono-700\",\"GF;Space Mono-700italic\"]);export const fonts=[{explicitInter:true,fonts:[{cssFamilyName:\"Space Mono\",openType:true,source:\"google\",style:\"normal\",uiFamilyName:\"Space Mono\",url:\"https://fonts.gstatic.com/s/spacemono/v17/i7dMIFZifjKcF5UAWdDRaPpZYFeQHwyVd3U.woff2\",weight:\"700\"},{cssFamilyName:\"Space Mono\",openType:true,source:\"google\",style:\"italic\",uiFamilyName:\"Space Mono\",url:\"https://fonts.gstatic.com/s/spacemono/v17/i7dSIFZifjKcF5UAWdDRYERE_FeaHi6QZ3WfYg.woff2\",weight:\"700\"}]}];export const css=[\".framer-ntwMo .framer-styles-preset-1wo41cq:not(.rich-text-wrapper), .framer-ntwMo .framer-styles-preset-1wo41cq.rich-text-wrapper p { --framer-font-family: \\\"Space Mono\\\", monospace; --framer-font-family-italic: \\\"Space Mono\\\", monospace; --framer-font-open-type-features: 'blwf' on, 'cv09' on, 'cv03' on, 'cv04' on, 'cv11' on; --framer-font-size: 14px; --framer-font-style: normal; --framer-font-style-italic: italic; --framer-font-variation-axes: normal; --framer-font-weight: 700; --framer-font-weight-italic: 700; --framer-letter-spacing: -0.02em; --framer-line-height: 1.6em; --framer-paragraph-spacing: 20px; --framer-text-alignment: start; --framer-text-color: var(--token-d3a9ed63-614f-431b-89bf-ccdcf3841dc4, #000000); --framer-text-decoration: none; --framer-text-stroke-color: initial; --framer-text-stroke-width: initial; --framer-text-transform: uppercase; }\"];export const className=\"framer-ntwMo\";\nexport const __FramerMetadata__ = {\"exports\":{\"css\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"className\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"fonts\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}","// 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\",delay=0}=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],delay:delay}}}})});}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\"},delay:{type:ControlType.Number,title:\"Delay\",defaultValue:0,min:0,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\":{\"framerSupportedLayoutHeight\":\"fixed\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./MaskImageScroll.map"],"mappings":"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"}