{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/3ODHXMhAQ6mjdh5G0PK8/jakQ8uw8ReDVB0mRh38m/ImageFader.js"],
  "sourcesContent": ["import{jsx as _jsx}from\"react/jsx-runtime\";import{useState,useEffect}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";/**\n * Slideshow with scroll-based fade transitions, sticky effect, and background color\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function ImageFader(props){const{images,style,fadeDuration=.5,viewDuration=2500,backgroundColor=\"transparent\"}=props;const[scrollY,setScrollY]=useState(0);const isStatic=useIsStaticRenderer();useEffect(()=>{if(isStatic)return;if(typeof window!==\"undefined\"){const handleScroll=()=>{const scrollPosition=window.pageYOffset||document.documentElement.scrollTop;setScrollY(scrollPosition);};window.addEventListener(\"scroll\",handleScroll,{passive:true});handleScroll();return()=>window.removeEventListener(\"scroll\",handleScroll);}},[isStatic]);if(!images||images.length===0){return null;}const totalImages=images.length;const totalHeight=totalImages*viewDuration;// Calculate which image should be visible\nconst currentIndex=Math.min(Math.floor(scrollY/viewDuration),totalImages-1);// Calculate fade progress for the next image\nconst fadeStart=currentIndex*viewDuration;const fadeEnd=fadeStart+fadeDuration*1e3;const fadeProgress=scrollY>fadeStart&&scrollY<fadeEnd?(scrollY-fadeStart)/(fadeEnd-fadeStart):1;return /*#__PURE__*/_jsx(\"div\",{style:{...style,width:\"100%\",height:`${totalHeight}px`,background:backgroundColor,boxSizing:\"border-box\",position:\"relative\",overflow:\"visible\"},children:/*#__PURE__*/_jsx(\"div\",{style:{position:\"sticky\",top:32,width:\"100%\",height:\"calc(100vh - 64px)\",overflow:\"hidden\",padding:0},children:images.map((image,idx)=>{// Last image stays at opacity 1\nlet opacity=0;if(idx===currentIndex){if(idx===totalImages-1){opacity=1;}else if(scrollY<fadeEnd){opacity=1-fadeProgress;}}if(idx===currentIndex+1&&idx<totalImages){opacity=scrollY>=fadeStart?fadeProgress:0;}if(idx<currentIndex)opacity=0;if(idx>currentIndex+1)opacity=0;if(idx===totalImages-1&&scrollY>=(totalImages-1)*viewDuration){opacity=1;}return /*#__PURE__*/_jsx(\"img\",{src:image.src,alt:image.alt,style:{position:\"absolute\",width:\"100%\",height:\"100%\",objectFit:\"contain\",opacity,transition:`opacity ${fadeDuration}s ease-in-out`,pointerEvents:\"none\",left:0,top:0},draggable:false},idx);})})});}addPropertyControls(ImageFader,{backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"transparent\"},fadeDuration:{type:ControlType.Number,title:\"Fade Time\",defaultValue:.5,min:.1,max:3,step:.1,unit:\"s\"},viewDuration:{type:ControlType.Number,title:\"View Duration\",defaultValue:2500,min:500,max:5e3,step:100,unit:\"px\"},images:{type:ControlType.Array,title:\"Images\",control:{type:ControlType.ResponsiveImage},maxCount:10}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ImageFader\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ImageFader.map"],
  "mappings": "kHAKkB,SAARA,EAA4BC,EAAM,CAAC,GAAK,CAAC,OAAAC,EAAO,MAAAC,EAAM,aAAAC,EAAa,GAAG,aAAAC,EAAa,KAAK,gBAAAC,EAAgB,aAAa,EAAEL,EAAW,CAACM,EAAQC,CAAU,EAAEC,EAAS,CAAC,EAAQC,EAASC,EAAoB,EAA6V,GAA3VC,EAAU,IAAI,CAAC,GAAG,CAAAF,GAAmB,OAAOG,EAAS,IAAY,CAAC,IAAMC,EAAa,IAAI,CAAC,IAAMC,EAAeF,EAAO,aAAa,SAAS,gBAAgB,UAAUL,EAAWO,CAAc,CAAE,EAAE,OAAAF,EAAO,iBAAiB,SAASC,EAAa,CAAC,QAAQ,EAAI,CAAC,EAAEA,EAAa,EAAQ,IAAID,EAAO,oBAAoB,SAASC,CAAY,CAAE,CAAC,EAAE,CAACJ,CAAQ,CAAC,EAAK,CAACR,GAAQA,EAAO,SAAS,EAAG,OAAO,KAAM,IAAMc,EAAYd,EAAO,OAAae,EAAYD,EAAYX,EACjpBa,EAAa,KAAK,IAAI,KAAK,MAAMX,EAAQF,CAAY,EAAEW,EAAY,CAAC,EACpEG,EAAUD,EAAab,EAAmBe,EAAQD,EAAUf,EAAa,IAAUiB,EAAad,EAAQY,GAAWZ,EAAQa,GAASb,EAAQY,IAAYC,EAAQD,GAAW,EAAE,OAAoBG,EAAK,MAAM,CAAC,MAAM,CAAC,GAAGnB,EAAM,MAAM,OAAO,OAAO,GAAGc,CAAW,KAAK,WAAWX,EAAgB,UAAU,aAAa,SAAS,WAAW,SAAS,SAAS,EAAE,SAAsBgB,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,SAAS,IAAI,GAAG,MAAM,OAAO,OAAO,qBAAqB,SAAS,SAAS,QAAQ,CAAC,EAAE,SAASpB,EAAO,IAAI,CAACqB,EAAMC,IAAM,CAC7gB,IAAIC,EAAQ,EAAE,OAAGD,IAAMN,IAAiBM,IAAMR,EAAY,EAAGS,EAAQ,EAAWlB,EAAQa,IAASK,EAAQ,EAAEJ,IAAkBG,IAAMN,EAAa,GAAGM,EAAIR,IAAaS,EAAQlB,GAASY,EAAUE,EAAa,GAAMG,EAAIN,IAAaO,EAAQ,GAAKD,EAAIN,EAAa,IAAEO,EAAQ,GAAKD,IAAMR,EAAY,GAAGT,IAAUS,EAAY,GAAGX,IAAcoB,EAAQ,GAAuBH,EAAK,MAAM,CAAC,IAAIC,EAAM,IAAI,IAAIA,EAAM,IAAI,MAAM,CAAC,SAAS,WAAW,MAAM,OAAO,OAAO,OAAO,UAAU,UAAU,QAAAE,EAAQ,WAAW,WAAWrB,CAAY,gBAAgB,cAAc,OAAO,KAAK,EAAE,IAAI,CAAC,EAAE,UAAU,EAAK,EAAEoB,CAAG,CAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,CAACE,EAAoB1B,EAAW,CAAC,gBAAgB,CAAC,KAAK2B,EAAY,MAAM,MAAM,aAAa,aAAa,aAAa,EAAE,aAAa,CAAC,KAAKA,EAAY,OAAO,MAAM,YAAY,aAAa,GAAG,IAAI,GAAG,IAAI,EAAE,KAAK,GAAG,KAAK,GAAG,EAAE,aAAa,CAAC,KAAKA,EAAY,OAAO,MAAM,gBAAgB,aAAa,KAAK,IAAI,IAAI,IAAI,IAAI,KAAK,IAAI,KAAK,IAAI,EAAE,OAAO,CAAC,KAAKA,EAAY,MAAM,MAAM,SAAS,QAAQ,CAAC,KAAKA,EAAY,eAAe,EAAE,SAAS,EAAE,CAAC,CAAC",
  "names": ["ImageFader", "props", "images", "style", "fadeDuration", "viewDuration", "backgroundColor", "scrollY", "setScrollY", "ye", "isStatic", "useIsStaticRenderer", "ue", "window", "handleScroll", "scrollPosition", "totalImages", "totalHeight", "currentIndex", "fadeStart", "fadeEnd", "fadeProgress", "p", "image", "idx", "opacity", "addPropertyControls", "ControlType"]
}