{"version":3,"file":"Horizontal_scroller.BJUQeAiC.mjs","names":["React.useRef","React.useState","React.useMemo"],"sources":["https:/framerusercontent.com/modules/3CB6hW44Xo8mYPRcESNq/KV9nRtdOTTJD9kEm7Bx8/Horizontal_scroller.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";export default function HorizontalZoomImage(props){const{image,minScale=2,maxScale=1,height=\"100vh\",smoothness=.12,curveStrength=2}=props;const rootRef=React.useRef(null);const imgRef=React.useRef(null);const rafRef=React.useRef(null);const scaleRef=React.useRef(minScale);const[,setTick]=React.useState(0);// Robust image source extractor — try several common Framer shapes\nconst imageSrc=React.useMemo(()=>{if(!image)return\"\";if(typeof image===\"string\")return image;// Common fields I've seen: src, url, imageUrl, fileUrl, data, file?.url, thumbnail, asset?.url\nreturn image.src||image.url||image.imageUrl||image.fileUrl||image.file&&(image.file.url||image.file.fileUrl)||image.data||image.asset?.url||image.thumbnail?.url||\"\";},[image]);// Debug logging to help diagnose preview issues\nReact.useEffect(()=>{console.debug(\"HorizontalZoomImage DEBUG: image prop:\",image);console.debug(\"HorizontalZoomImage DEBUG: resolved imageSrc:\",imageSrc);},[image,imageSrc]);// helper: find horizontal scroll parent or window\nconst getScrollParentX=node=>{let parent=node&&node.parentElement;while(parent){try{const style=getComputedStyle(parent);if(/(auto|scroll)/.test(style.overflowX))return parent;}catch(e){// ignore problematic nodes\n}parent=parent.parentElement;}return window;};// initial compute to avoid jitter; also safe-guards and logs\nReact.useLayoutEffect(()=>{const el=rootRef.current;if(!el){console.warn(\"HorizontalZoomImage DEBUG: root ref missing\");return;}const scrollRoot=getScrollParentX(el);const doInitial=()=>{if(!rootRef.current)return;const rect=rootRef.current.getBoundingClientRect();if(!rect)return;const vpWidth=scrollRoot instanceof Window?window.innerWidth:scrollRoot.clientWidth;const rootLeft=scrollRoot instanceof Window?0:scrollRoot.getBoundingClientRect().left;const elCenter=rect.left+rect.width/2;const viewportCenter=rootLeft+vpWidth/2;const distance=Math.abs(elCenter-viewportCenter);const maxDistance=vpWidth/2+rect.width/2;let t=Math.min(1,Math.max(0,distance/maxDistance));t=Math.pow(t,curveStrength);const target=maxScale+(minScale-maxScale)*t;scaleRef.current=target;setTick(n=>(n+1)%1e6);};const imgEl=imgRef.current;if(imgEl){if(imgEl.complete&&imgEl.naturalWidth!==0){// already loaded and valid\ndoInitial();}else{const onLoad=()=>{console.debug(\"HorizontalZoomImage DEBUG: img loaded, naturalWidth:\",imgRef.current?.naturalWidth);doInitial();};const onError=ev=>{console.error(\"HorizontalZoomImage ERROR: image failed to load\",ev);// still run initial compute so placeholder appears\ndoInitial();};imgEl.addEventListener(\"load\",onLoad,{once:true});imgEl.addEventListener(\"error\",onError,{once:true});// cleanup is handled by return\n}}else{doInitial();}return()=>{const imgEl2=imgRef.current;if(imgEl2){imgEl2.removeEventListener(\"load\",()=>{});imgEl2.removeEventListener(\"error\",()=>{});}};},[imageSrc,minScale,maxScale,curveStrength]);// main effect: compute scale on horizontal scroll (keeps original pattern)\nReact.useEffect(()=>{const el=rootRef.current;if(!el){console.warn(\"HorizontalZoomImage DEBUG: root ref not found in effect\");return;}const scrollRoot=getScrollParentX(el);const compute=()=>{if(!rootRef.current)return;const rect=rootRef.current.getBoundingClientRect();const vpWidth=scrollRoot instanceof Window?window.innerWidth:scrollRoot.clientWidth;const rootLeft=scrollRoot instanceof Window?0:scrollRoot.getBoundingClientRect().left;const elCenter=rect.left+rect.width/2;const viewportCenter=rootLeft+vpWidth/2;const distance=Math.abs(elCenter-viewportCenter);const maxDistance=vpWidth/2+rect.width/2;let t=Math.min(1,Math.max(0,distance/maxDistance));t=Math.pow(t,curveStrength);const target=maxScale+(minScale-maxScale)*t;const prev=scaleRef.current;const smoothed=prev+(target-prev)*Math.min(1,smoothness*60);scaleRef.current=smoothed;setTick(n=>(n+1)%1e6);};const onScroll=()=>{if(rafRef.current)cancelAnimationFrame(rafRef.current);rafRef.current=requestAnimationFrame(compute);};// initial compute\ncompute();const root=scrollRoot===window?window:scrollRoot;root.addEventListener(\"scroll\",onScroll,{passive:true});window.addEventListener(\"resize\",onScroll,{passive:true});return()=>{if(rafRef.current)cancelAnimationFrame(rafRef.current);root.removeEventListener(\"scroll\",onScroll);window.removeEventListener(\"resize\",onScroll);};},[minScale,maxScale,smoothness,curveStrength,imageSrc]);const currentScale=scaleRef.current;// helper: render clear placeholder so you always see something in preview\nconst Placeholder=()=>/*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100%\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",color:\"#666\",fontSize:14,background:\"#f3f3f3\"},children:imageSrc?\"Loading image...\":\"Drop an image\"});return /*#__PURE__*/_jsxs(\"div\",{ref:rootRef,style:{width:\"100%\",height:height||\"100vh\",overflow:\"hidden\",position:\"relative\",background:imageSrc?undefined:\"#eee\",minHeight:100},children:[imageSrc?/*#__PURE__*/_jsx(\"img\",{ref:imgRef,src:imageSrc,alt:\"\",onError:e=>console.error(\"HorizontalZoomImage ERROR: img onError\",e),style:{position:\"absolute\",inset:0,width:\"100%\",height:\"100%\",objectFit:\"cover\",transform:`scale(${currentScale})`,transformOrigin:\"center\",willChange:\"transform\",transition:\"transform 0.06s linear\",zIndex:1,opacity:1,backgroundColor:\"transparent\"}}):/*#__PURE__*/_jsx(Placeholder,{}),/*#__PURE__*/_jsx(\"div\",{\"aria-hidden\":true,style:{position:\"absolute\",inset:0,zIndex:0,pointerEvents:\"none\"},children:!imageSrc&&/*#__PURE__*/_jsx(Placeholder,{})})]});}addPropertyControls(HorizontalZoomImage,{image:{type:ControlType.Image,title:\"Image\"},minScale:{type:ControlType.Number,title:\"Out Scale\",defaultValue:2,min:.5,max:5,step:.1},maxScale:{type:ControlType.Number,title:\"Center Scale\",defaultValue:1,min:.1,max:3,step:.05},height:{type:ControlType.String,title:\"Height\",defaultValue:\"100vh\"},smoothness:{type:ControlType.Number,title:\"Smoothness\",defaultValue:.12,min:.01,max:1,step:.01},curveStrength:{type:ControlType.Number,title:\"Curve\",defaultValue:2,min:1,max:5,step:.1}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"HorizontalZoomImage\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Horizontal_scroller.map"],"mappings":"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"}