{"version":3,"file":"MaskImageScroll.CyKSW1ip.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/fWVq4UgAWK9BqyFMzsvl/TrmTGcVK1EJoeJyDCQHb/MaskImageScroll.js"],"sourcesContent":["// 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\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerSupportedLayoutWidth\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./MaskImageScroll.map"],"mappings":"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"}