{"version":3,"file":"Parallax_Image.DiDdDmO2.mjs","names":["useRef"],"sources":["https:/framerusercontent.com/modules/7OxqcJ1eJQaYfWtjne57/RjkwA0qEb78P6N9Xl8SE/Parallax_Image.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useRef,useEffect}from\"react\";import{motion,useTransform,useScroll,useMotionValue}from\"framer-motion\";/**\n * ImageParallax Component\n *\n * A Framer component that creates parallax effects for images.\n * Features:\n * - Vertical parallax effect based on scroll position\n * - Optional horizontal parallax effect based on viewport position\n * - Configurable parallax amounts and smoothing\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n * @framerDisableUnlink\n *\n */export default function ImageParallax(props){const{verticalParallaxAmount,horizontalParallaxAmount,horizontalParallaxEnabled,image,transitionDuration,smoothingEnabled,style}=props;// Reference to the container element for position calculations\nconst containerRef=useRef(null);// Motion value for horizontal movement - more efficient than useState\nconst xMotionValue=useMotionValue(0);// Track vertical scroll progress using Framer Motion's useScroll\n// offset: [\"start end\", \"end start\"] means the effect runs from when the element's\n// top edge enters the bottom of the viewport until its bottom edge leaves the top\nconst{scrollYProgress}=useScroll({target:containerRef,offset:[\"start end\",\"end start\"]});// Transform scroll progress (0-1) to y-position movement\nconst y=useTransform(scrollYProgress,[0,1],[0,verticalParallaxAmount]);// Effect to track horizontal position in viewport\nuseEffect(()=>{// Skip setup if horizontal parallax is disabled\nif(!horizontalParallaxEnabled)return;// Observer reference for cleanup\nlet observer=null;// Animation frame reference for cleanup\nlet animationFrame=null;// Function to calculate and update horizontal parallax position\nconst updateHorizontalParallax=()=>{if(!containerRef.current)return;const rect=containerRef.current.getBoundingClientRect();const viewportWidth=window.innerWidth;// Calculate horizontal progress (0-1) based on the element's position\n// 0 = element is entering from the right edge of viewport\n// 1 = element has completely exited the left edge of viewport\nconst horizontalProgress=1-(rect.left+rect.width)/(viewportWidth+rect.width);// Calculate the new horizontal position based on progress and parallax amount\nconst newX=horizontalProgress*horizontalParallaxAmount;// Update the motion value (more performant than setState)\nxMotionValue.set(newX);};// Animation loop function for smooth updates\nconst animate=()=>{updateHorizontalParallax();animationFrame=requestAnimationFrame(animate);};// Use Intersection Observer for efficiency - only animate when visible\nobserver=new IntersectionObserver(entries=>{const isVisible=entries[0].isIntersecting;if(isVisible){// Start animation loop when element becomes visible\nif(!animationFrame){animationFrame=requestAnimationFrame(animate);}}else{// Stop animation loop when element is not visible\nif(animationFrame){cancelAnimationFrame(animationFrame);animationFrame=null;}}},{threshold:.01,rootMargin:\"20% 0px\"}// Start when 1% is visible, with some margin\n);// Start observing the container element\nif(containerRef.current){observer.observe(containerRef.current);}// Cleanup function to prevent memory leaks\nreturn()=>{if(animationFrame){cancelAnimationFrame(animationFrame);}if(observer){observer.disconnect();}};},[horizontalParallaxEnabled,horizontalParallaxAmount,xMotionValue]);return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{...style,position:\"relative\",overflow:\"hidden\",width:\"100%\",height:\"100%\"},children:/*#__PURE__*/_jsx(motion.div,{style:{position:\"absolute\",// Extend beyond boundaries to allow room for parallax movement\ntop:verticalParallaxAmount<0?0:-Math.abs(verticalParallaxAmount),left:horizontalParallaxAmount<0?0:-Math.abs(horizontalParallaxAmount),right:horizontalParallaxAmount>0?0:-Math.abs(horizontalParallaxAmount),bottom:verticalParallaxAmount>0?0:-Math.abs(verticalParallaxAmount),// Apply transformations for parallax effect\ny:y,x:xMotionValue,backgroundImage:image?`url(${image})`:undefined,backgroundSize:\"cover\",backgroundPosition:\"center\",// Optimize rendering performance\nwillChange:\"transform\",// Prevent text selection and mouse interactions with the parallax layer\nuserSelect:\"none\",pointerEvents:\"none\",// Apply smoothing if enabled\ntransition:smoothingEnabled?`transform ${transitionDuration}s ease-out`:\"none\"}})});}// Default props with descriptive values\nImageParallax.defaultProps={verticalParallaxAmount:264,horizontalParallaxAmount:200,horizontalParallaxEnabled:false,transitionDuration:.1,smoothingEnabled:true};// Property controls with descriptive tooltips and appropriate ranges\naddPropertyControls(ImageParallax,{image:{type:ControlType.Image,title:\"Image\",description:\"Background image for parallax effect\"},// Vertical parallax controls\nverticalParallaxAmount:{type:ControlType.Number,title:\"Vertical Parallax\",defaultValue:264,step:10,displayStepper:true,description:\"Amount of vertical movement in pixels. Positive values move down, negative values move up.\"},// Horizontal parallax controls\nhorizontalParallaxEnabled:{type:ControlType.Boolean,title:\"Enable Horizontal\",defaultValue:false,description:\"Enable horizontal parallax effect as element moves across the viewport\"},horizontalParallaxAmount:{type:ControlType.Number,title:\"Horizontal Parallax\",defaultValue:200,step:10,displayStepper:true,description:\"Amount of horizontal movement in pixels. Positive values create a lag effect, negative values create a lead effect.\",hidden:props=>!props.horizontalParallaxEnabled},// Smoothing controls\nsmoothingEnabled:{type:ControlType.Boolean,title:\"Enable Smoothing\",defaultValue:true,description:\"Apply transition for smoother movement (recommended for scrolling)\"},transitionDuration:{type:ControlType.Number,title:\"Smoothing Duration\",defaultValue:.1,min:0,max:1,step:.01,displayStepper:true,description:\"Duration of the smoothing transition in seconds (lower values = more responsive)\",hidden:props=>!props.smoothingEnabled}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ImageParallax\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any\",\"framerSupportedLayoutWidth\":\"any\",\"framerDisableUnlink\":\"*\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Parallax_Image.map"],"mappings":"qQAaG,SAAwB,EAAc,EAAM,CAAC,GAAK,CAAC,yBAAuB,2BAAyB,4BAA0B,QAAM,qBAAmB,mBAAiB,SAAO,EAC3K,EAAaA,EAAO,KAAK,CACzB,EAAa,EAAe,EAAE,CAG/B,CAAC,mBAAiB,EAAU,CAAC,OAAO,EAAa,OAAO,CAAC,YAAY,YAAY,CAAC,CAAC,CAClF,EAAE,EAAa,EAAgB,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,EAAuB,CAAC,CAiByG,OAhB/K,MAAc,CACd,GAAG,CAAC,EAA0B,OAC9B,IAAI,EAAS,KACT,EAAe,KACb,MAA6B,CAAC,GAAG,CAAC,EAAa,QAAQ,OAAO,IAAM,EAAK,EAAa,QAAQ,uBAAuB,CAAO,EAAc,EAAO,WAIjJ,GADmB,GAAG,EAAK,KAAK,EAAK,QAAQ,EAAc,EAAK,QACxC,EAC9B,EAAa,IAAI,EAAK,EAChB,MAAY,CAAC,GAA0B,CAAC,EAAe,sBAAsB,EAAQ,EAM3F,MALA,GAAS,IAAI,qBAAqB,GAAS,CAAiB,EAAQ,GAAG,eACnD,IAAe,sBAAsB,EAAQ,CACT,KAArC,qBAAqB,EAAe,CAAgB,OAAS,CAAC,UAAU,IAAI,WAAW,UAAU,CACnH,CACE,EAAa,SAAS,EAAS,QAAQ,EAAa,QAAQ,KACrD,CAAI,GAAgB,qBAAqB,EAAe,CAAK,GAAU,EAAS,YAAY,GAAM,CAAC,EAA0B,EAAyB,EAAa,CAAC,CAAqB,EAAK,MAAM,CAAC,IAAI,EAAa,MAAM,CAAC,GAAG,EAAM,SAAS,WAAW,SAAS,SAAS,MAAM,OAAO,OAAO,OAAO,CAAC,SAAsB,EAAK,EAAO,IAAI,CAAC,MAAM,CAAC,SAAS,WACzW,IAAI,EAAuB,EAAE,EAAE,CAAC,KAAK,IAAI,EAAuB,CAAC,KAAK,EAAyB,EAAE,EAAE,CAAC,KAAK,IAAI,EAAyB,CAAC,MAAM,EAAyB,EAAE,EAAE,CAAC,KAAK,IAAI,EAAyB,CAAC,OAAO,EAAuB,EAAE,EAAE,CAAC,KAAK,IAAI,EAAuB,CAC/Q,EAAE,EAAE,EAAa,gBAAgB,EAAM,OAAO,EAAM,GAAG,IAAA,GAAU,eAAe,QAAQ,mBAAmB,SAC7G,WAAW,YACX,WAAW,OAAO,cAAc,OAChC,WAAW,EAAiB,aAAa,EAAmB,YAAY,OAAO,CAAC,CAAC,CAAC,CAAC,sBAzCxC,IAAoD,IAAoC,IAAwE,CA0C3M,EAAc,aAAa,CAAC,uBAAuB,IAAI,yBAAyB,IAAI,0BAA0B,GAAM,mBAAmB,GAAG,iBAAiB,GAAK,CAChK,EAAoB,EAAc,CAAC,MAAM,CAAC,KAAK,EAAY,MAAM,MAAM,QAAQ,YAAY,uCAAuC,CAClI,uBAAuB,CAAC,KAAK,EAAY,OAAO,MAAM,oBAAoB,aAAa,IAAI,KAAK,GAAG,eAAe,GAAK,YAAY,6FAA6F,CAChO,0BAA0B,CAAC,KAAK,EAAY,QAAQ,MAAM,oBAAoB,aAAa,GAAM,YAAY,yEAAyE,CAAC,yBAAyB,CAAC,KAAK,EAAY,OAAO,MAAM,sBAAsB,aAAa,IAAI,KAAK,GAAG,eAAe,GAAK,YAAY,sHAAsH,OAAO,GAAO,CAAC,EAAM,0BAA0B,CACne,iBAAiB,CAAC,KAAK,EAAY,QAAQ,MAAM,mBAAmB,aAAa,GAAK,YAAY,qEAAqE,CAAC,mBAAmB,CAAC,KAAK,EAAY,OAAO,MAAM,qBAAqB,aAAa,GAAG,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,eAAe,GAAK,YAAY,mFAAmF,OAAO,GAAO,CAAC,EAAM,iBAAiB,CAAC,CAAC"}