{"version":3,"file":"ParallaxImageFrame.W8saFfEx.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/9Hl5CCrrxFwCQ4CxQq8s/15FMFGHpJTmf2NCundWd/ParallaxImageFrame.js"],"sourcesContent":["// Parallax Image Frame with 90% scroll speed effect\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{useRef,useEffect,useState,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer,RenderTarget}from\"framer\";import{motion}from\"framer-motion\";/**\n * ParallaxImageFrame\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */function ParallaxImageFrame(props){const{image={src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Gradient 1 - Blue\"},borderRadius,shadow,style}=props;const containerRef=useRef(null);const[offset,setOffset]=useState(0);const isStatic=useIsStaticRenderer();const[inView,setInView]=useState(false);useEffect(()=>{if(isStatic||RenderTarget.current()===RenderTarget.thumbnail)return;function checkInView(){if(!containerRef.current)return;const rect=containerRef.current.getBoundingClientRect();const windowHeight=window.innerHeight||document.documentElement.clientHeight;const isInView=rect.bottom>0&&rect.top<windowHeight;startTransition(()=>setInView(isInView));}window.addEventListener(\"scroll\",checkInView,{passive:true});window.addEventListener(\"resize\",checkInView);checkInView();return()=>{window.removeEventListener(\"scroll\",checkInView);window.removeEventListener(\"resize\",checkInView);};},[isStatic]);useEffect(()=>{if(isStatic||RenderTarget.current()===RenderTarget.thumbnail)return;if(!inView)return;function handleScroll(){if(!containerRef.current)return;const rect=containerRef.current.getBoundingClientRect();const windowHeight=window.innerHeight||document.documentElement.clientHeight;if(rect.bottom<0||rect.top>windowHeight)return;const scrollY=window.scrollY||window.pageYOffset;const frameTop=rect.top+scrollY;const frameHeight=rect.height;// Calculate the focal point in the frame (center of frame for now)\n// Instead, use the focal point from the image if available\nlet focalY=.5;if(image.focalPoint&&typeof image.focalPoint.y===\"number\"){focalY=image.focalPoint.y;}// The Y position in the viewport where the focal point is\nconst focalPointInFrame=rect.top+focalY*frameHeight;// The offset is how far the focal point is from the center of the viewport\nconst viewportCenter=windowHeight/2;const delta=focalPointInFrame-viewportCenter;// Allow negative or >1 parallaxSpeed for reverse/fast effect\nconst parallax=-delta*(1-props.parallaxSpeed);setOffset(parallax);}window.addEventListener(\"scroll\",handleScroll,{passive:true});handleScroll();return()=>window.removeEventListener(\"scroll\",handleScroll);},[isStatic,inView]);return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{...style,width:\"100%\",height:\"100%\",overflow:\"hidden\",borderRadius,boxShadow:props.boxShadow,position:\"relative\",background:\"#eee\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\"},children:/*#__PURE__*/_jsx(motion.img,{src:image.src,alt:image.alt,style:{width:`${props.zoom*100}%`,height:`${props.zoom*100}%`,objectFit:\"cover\",objectPosition:image.focalPoint&&typeof image.focalPoint.x===\"number\"&&typeof image.focalPoint.y===\"number\"?`${image.focalPoint.x*100}% ${image.focalPoint.y*100}%`:`50% 50%`,display:\"block\"},animate:{y:isStatic?0:offset,scale:props.zoom!==1?props.zoom:1},transition:{type:\"spring\",stiffness:props.motionStiffness,damping:props.motionDamping,ease:props.motionEase},draggable:false})});}addPropertyControls(ParallaxImageFrame,{image:{type:ControlType.ResponsiveImage,title:\"Image\"},borderRadius:{type:ControlType.Number,title:\"Radius\",defaultValue:16,min:0,max:64},shadow:{type:ControlType.Boolean,title:\"Shadow\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\",hidden:()=>true},boxShadow:{type:ControlType.BoxShadow,title:\"Shadow\",defaultValue:\"0 4px 24px rgba(0,0,0,0.10)\"},zoom:{type:ControlType.Number,title:\"Zoom\",defaultValue:1,min:1,max:2,step:.01,displayStepper:false},parallaxSpeed:{type:ControlType.Number,title:\"Parallax Speed\",defaultValue:.9,min:-2,max:2,step:.01,displayStepper:false,description:\"Negative reverses direction, >1 increases speed.\"},motionStiffness:{type:ControlType.Number,title:\"Motion Stiffness\",defaultValue:120,min:10,max:500,step:1,displayStepper:true,description:\"Spring stiffness for parallax motion.\"},motionDamping:{type:ControlType.Number,title:\"Motion Damping\",defaultValue:20,min:1,max:100,step:1,displayStepper:true,description:\"Spring damping for parallax motion.\"},motionEase:{type:ControlType.Enum,title:\"Animation Curve\",options:[\"linear\",\"easeIn\",\"easeOut\",\"easeInOut\",\"circIn\",\"circOut\",\"circInOut\",\"backIn\",\"backOut\",\"backInOut\"],optionTitles:[\"Linear\",\"Ease In\",\"Ease Out\",\"Ease In Out\",\"Circ In\",\"Circ Out\",\"Circ In Out\",\"Back In\",\"Back Out\",\"Back In Out\"],defaultValue:\"easeOut\",description:\"Animation curve for parallax motion.\"}});export default ParallaxImageFrame;\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ParallaxImageFrame\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ParallaxImageFrame.map"],"mappings":"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"}