{"version":3,"file":"ScrollImage.BOSS2LW5.mjs","names":["useRef","useState","_jsxs","startTransition"],"sources":["https:/framerusercontent.com/modules/gX3A2y5by7JMnBaYbjPS/XV7otl5A0kMX1nZqwWiO/ScrollImage.js"],"sourcesContent":["// Image component with URL link that transitions from max-width to full viewport on scroll\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useState,useRef,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{motion,useScroll,useTransform}from\"framer-motion\";/**\n * Scroll-triggered image component that transitions from initial size to full viewport\n *\n * @framerIntrinsicWidth 500\n * @framerIntrinsicHeight 750\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function ScrollImage(props){const{imageUrl=\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",videoUrl,initialWidth=500,initialHeight=750,triggerPosition=50,scrollDistance=500,borderRadius=0,imageAlt=\"Scroll Image\"}=props;const containerRef=useRef(null);const isStatic=useIsStaticRenderer();const[isLoaded,setIsLoaded]=useState(false);const[shouldLoad,setShouldLoad]=useState(false);// Track viewport scroll instead of container scroll to work with sticky positioning\nconst{scrollY}=useScroll();const[triggerPoint,setTriggerPoint]=useState(0);const[scrollStart,setScrollStart]=useState(0);// Lazy load observer\nuseEffect(()=>{if(isStatic||!containerRef.current){setShouldLoad(true);return;}const observer=new IntersectionObserver(entries=>{entries.forEach(entry=>{if(entry.isIntersecting){startTransition(()=>setShouldLoad(true));observer.disconnect();}});},{rootMargin:\"200px\"});observer.observe(containerRef.current);return()=>observer.disconnect();},[isStatic]);useEffect(()=>{if(isStatic||!containerRef.current)return;const updateTriggerPoint=()=>{if(!containerRef.current)return;const rect=containerRef.current.getBoundingClientRect();const elementTop=rect.top+window.scrollY;const viewportTrigger=window.innerHeight*(triggerPosition/100);const start=elementTop-viewportTrigger;startTransition(()=>{setScrollStart(start);setTriggerPoint(start+scrollDistance);});};updateTriggerPoint();window.addEventListener(\"resize\",updateTriggerPoint);return()=>window.removeEventListener(\"resize\",updateTriggerPoint);},[triggerPosition,scrollDistance,isStatic]);// Calculate scroll progress based on scroll distance\nconst scrollProgress=useTransform(scrollY,[scrollStart,triggerPoint],[0,1]);const width=useTransform(scrollProgress,[0,1],[initialWidth,typeof window!==\"undefined\"?window.innerWidth:1920]);const height=useTransform(scrollProgress,[0,1],[initialHeight,typeof window!==\"undefined\"?window.innerHeight:1080]);const radius=useTransform(scrollProgress,[0,1],[borderRadius,0]);const imageContent=/*#__PURE__*/_jsxs(motion.div,{ref:containerRef,style:{width:isStatic?`${initialWidth}px`:width,height:isStatic?`${initialHeight}px`:height,borderRadius:isStatic?borderRadius:radius,overflow:\"hidden\",position:\"relative\",margin:\"0 auto\",backgroundColor:\"transparent\",willChange:\"transform, width, height\",transform:\"translate3d(0, 0, 0)\",backfaceVisibility:\"hidden\"},children:[shouldLoad&&(videoUrl?/*#__PURE__*/_jsx(\"video\",{ref:el=>{// Covers media already loaded before hydration\nif(el&&el.readyState>=2)startTransition(()=>setIsLoaded(true));},src:videoUrl,playsInline:true,muted:true,loop:true,autoPlay:true,preload:\"metadata\",onLoadedData:()=>startTransition(()=>setIsLoaded(true)),style:{width:\"100%\",height:\"100%\",objectFit:\"cover\",display:\"block\",opacity:isLoaded?1:0,transition:\"opacity 0.3s ease-in-out\",willChange:\"opacity\",transform:\"translate3d(0, 0, 0)\"}}):/*#__PURE__*/_jsx(\"img\",{ref:el=>{// Covers images already loaded before hydration\nif(el&&el.complete&&el.naturalWidth>0)startTransition(()=>setIsLoaded(true));},src:imageUrl,alt:imageAlt,loading:\"lazy\",onLoad:()=>startTransition(()=>setIsLoaded(true)),style:{width:\"100%\",height:\"100%\",objectFit:\"cover\",display:\"block\",opacity:isLoaded?1:0,transition:\"opacity 0.3s ease-in-out\",willChange:\"opacity\",transform:\"translate3d(0, 0, 0)\"}})),!isLoaded&&/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:\"50%\",left:\"50%\",transform:\"translate(-50%, -50%)\",color:\"#999\",fontSize:\"14px\"},children:\"Loading...\"})]});return imageContent;}addPropertyControls(ScrollImage,{imageUrl:{type:ControlType.String,title:\"Image URL\",defaultValue:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",placeholder:\"https://example.com/image.jpg\"},videoUrl:{type:ControlType.String,title:\"Video URL\",defaultValue:\"\",placeholder:\"https://example.com/video.mp4\"},imageAlt:{type:ControlType.String,title:\"Alt Text\",defaultValue:\"Scroll Image\",placeholder:\"Describe the image for accessibility\"},initialWidth:{type:ControlType.Number,title:\"Initial Width\",defaultValue:500,min:100,max:2e3,step:10,unit:\"px\"},initialHeight:{type:ControlType.Number,title:\"Initial Height\",defaultValue:750,min:100,max:2e3,step:10,unit:\"px\"},triggerPosition:{type:ControlType.Number,title:\"Trigger Position\",defaultValue:50,min:0,max:100,step:5,unit:\"%\"},scrollDistance:{type:ControlType.Number,title:\"Scroll Distance\",defaultValue:500,min:100,max:2e3,step:50,unit:\"px\"},borderRadius:{type:ControlType.Number,title:\"Border Radius\",defaultValue:0,min:0,max:50,step:1,unit:\"px\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ScrollImage\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerIntrinsicWidth\":\"500\",\"framerIntrinsicHeight\":\"750\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ScrollImage.map"],"mappings":"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"}