{"version":3,"file":"Fading_Image_Loop.DSgpIwSw.mjs","names":["useState"],"sources":["https:/framerusercontent.com/modules/tCxhrkC6JtuhLCbaqplh/UGuGJzqtXANE3qHFx4xI/Fading_Image_Loop.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,useEffect}from\"react\";import{motion}from\"framer-motion\";import{addPropertyControls,ControlType}from\"framer\";export function ImageReveal({images,revealTime,revealDuration}){const[currentImageIndex,setCurrentImageIndex]=useState(0);const[transitionKey,setTransitionKey]=useState(0)// Key to reset animation\n;useEffect(()=>{if(!images||images.length===0){console.error(\"No images provided to ImageReveal\");return;}const interval=setInterval(()=>{// Increment image index and reset the animation key\nsetCurrentImageIndex(prev=>(prev+1)%images.length);setTransitionKey(prev=>prev+1);},revealTime);return()=>clearInterval(interval);},[images,revealTime]);const nextImageIndex=(currentImageIndex+1)%images.length;return /*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",width:\"100%\",height:\"100%\",overflow:\"hidden\"},children:[/*#__PURE__*/_jsx(\"img\",{src:images[nextImageIndex],alt:\"Next image\",style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",objectFit:\"contain\",zIndex:0}}),/*#__PURE__*/_jsx(motion.div,{style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",backgroundImage:`url(${images[currentImageIndex]})`,backgroundSize:\"contain\",backgroundRepeat:\"no-repeat\",backgroundPosition:\"center\",zIndex:1},initial:{opacity:1},animate:{opacity:0},transition:{duration:revealDuration/1e3,ease:\"easeIn\"}},transitionKey)]});}// Add property controls\naddPropertyControls(ImageReveal,{images:{type:ControlType.Array,propertyControl:{type:ControlType.Image},title:\"Images\"},revealTime:{type:ControlType.Number,title:\"Reveal Time (ms)\",defaultValue:6500,min:1e3,max:1e4,step:100},revealDuration:{type:ControlType.Number,title:\"Mask Duration (ms)\",defaultValue:1500,min:100,max:5e3,step:100}});\nexport const __FramerMetadata__ = {\"exports\":{\"ImageReveal\":{\"type\":\"reactComponent\",\"name\":\"ImageReveal\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Fading_Image_Loop.map"],"mappings":"iWAAqL,SAAgB,EAAY,CAAC,SAAO,aAAW,kBAAgB,CAAC,GAAK,CAAC,EAAkB,GAAsBA,EAAS,EAAE,CAAM,CAAC,EAAc,GAAkBA,EAAS,EAAE,CAC/V,MAAc,CAAC,GAAG,CAAC,GAAQ,EAAO,SAAS,EAAE,CAAC,QAAQ,MAAM,oCAAoC,CAAC,OAAQ,IAAM,EAAS,gBAAgB,CACzI,EAAqB,IAAO,EAAK,GAAG,EAAO,OAAO,CAAC,EAAiB,GAAM,EAAK,EAAE,EAAG,EAAW,CAAC,UAAU,cAAc,EAAS,EAAG,CAAC,EAAO,EAAW,CAAC,CAAC,IAAM,GAAgB,EAAkB,GAAG,EAAO,OAAO,OAAoB,EAAM,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,MAAM,OAAO,OAAO,OAAO,SAAS,SAAS,CAAC,SAAS,CAAc,EAAK,MAAM,CAAC,IAAI,EAAO,GAAgB,IAAI,aAAa,MAAM,CAAC,SAAS,WAAW,IAAI,EAAE,KAAK,EAAE,MAAM,OAAO,OAAO,OAAO,UAAU,UAAU,OAAO,EAAE,CAAC,CAAC,CAAc,EAAK,EAAO,IAAI,CAAC,MAAM,CAAC,SAAS,WAAW,IAAI,EAAE,KAAK,EAAE,MAAM,OAAO,OAAO,OAAO,gBAAgB,OAAO,EAAO,GAAmB,GAAG,eAAe,UAAU,iBAAiB,YAAY,mBAAmB,SAAS,OAAO,EAAE,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,WAAW,CAAC,SAAS,EAAe,IAAI,KAAK,SAAS,CAAC,CAAC,EAAc,CAAC,CAAC,CAAC,kBAFvxB,IAAsC,IAAkC,IAAoD,CAGrL,EAAoB,EAAY,CAAC,OAAO,CAAC,KAAK,EAAY,MAAM,gBAAgB,CAAC,KAAK,EAAY,MAAM,CAAC,MAAM,SAAS,CAAC,WAAW,CAAC,KAAK,EAAY,OAAO,MAAM,mBAAmB,aAAa,KAAK,IAAI,IAAI,IAAI,IAAI,KAAK,IAAI,CAAC,eAAe,CAAC,KAAK,EAAY,OAAO,MAAM,qBAAqB,aAAa,KAAK,IAAI,IAAI,IAAI,IAAI,KAAK,IAAI,CAAC,CAAC"}