{"version":3,"file":"ImageScroll.ChXh3wHB.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/AlGMSdh546QHMJSzAoPj/JFUF5n7JAYeNuSwfisTA/ImageScroll.js"],"sourcesContent":["// Image component that animates from top to bottom using GSAP\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useRef,useState}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{useInView}from\"framer-motion\";/**\n * @framerDisableUnlink\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function ImageScroll(props){const{image={src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Gradient 1 - Blue\"},duration,delay,easing,autoPlay,trigger,loop,yoyo,scale=1.1}=props;const imageRef=useRef(null);const containerRef=useRef(null);const isStatic=useIsStaticRenderer();const isInView=useInView(containerRef,{once:true});const isInViewOnScreen=useInView(containerRef,{once:false,amount:.3});const[hasTriggered,setHasTriggered]=useState(false);const[hasAnimated,setHasAnimated]=useState(false);useEffect(()=>{if(isStatic||!imageRef.current||hasAnimated)return;const element=imageRef.current;// Set initial state (starts from top)\nelement.style.clipPath=\"inset(0 0 100% 0)\";element.style.transform=`scale(${scale})`;element.style.transition=\"none\";// Determine if animation should trigger\nlet shouldTrigger=false;if(trigger===\"onAppear\"&&autoPlay){shouldTrigger=true;}else if(trigger===\"onScroll\"&&isInView&&!hasTriggered){shouldTrigger=true;setHasTriggered(true);}else if(trigger===\"onScreen\"&&isInViewOnScreen&&!hasAnimated){shouldTrigger=true;}if(!shouldTrigger)return;// Start animation after delay\nconst timeoutId=setTimeout(()=>{element.style.transition=`clip-path ${duration}s ${getEasingFunction(easing)}, transform ${duration}s ${getEasingFunction(easing)}`;element.style.clipPath=\"inset(0% 0 0 0)\";element.style.transform=\"scale(1.0)\";// Mark as animated once the animation completes\nconst handleTransitionEnd=()=>{setHasAnimated(true);element.removeEventListener(\"transitionend\",handleTransitionEnd);};element.addEventListener(\"transitionend\",handleTransitionEnd);if(loop){const handleTransitionEnd=()=>{if(yoyo){// Reverse animation\nsetTimeout(()=>{element.style.clipPath=\"inset(0 0 100% 0)\";element.style.transform=`scale(${scale})`;},100);}else{// Reset and repeat\nelement.style.transition=\"none\";element.style.clipPath=\"inset(0 0 100% 0)\";element.style.transform=`scale(${scale})`;setTimeout(()=>{element.style.transition=`clip-path ${duration}s ${getEasingFunction(easing)}, transform ${duration}s ${getEasingFunction(easing)}`;element.style.clipPath=\"inset(0% 0 0 0)\";element.style.transform=\"scale(1.0)\";},100);}};element.addEventListener(\"transitionend\",handleTransitionEnd);return()=>element.removeEventListener(\"transitionend\",handleTransitionEnd);}},delay*1e3);return()=>{clearTimeout(timeoutId);};},[duration,delay,easing,autoPlay,trigger,isInView,isInViewOnScreen,hasTriggered,hasAnimated,isStatic,loop,yoyo,scale]);const getEasingFunction=easing=>{switch(easing){case\"power2.out\":return\"cubic-bezier(0.25, 0.46, 0.45, 0.94)\";case\"power2.in\":return\"cubic-bezier(0.55, 0.06, 0.68, 0.19)\";case\"power2.inOut\":return\"cubic-bezier(0.65, 0.05, 0.36, 1)\";case\"bounce.out\":return\"cubic-bezier(0.68, -0.55, 0.265, 1.55)\";case\"elastic.out\":return\"cubic-bezier(0.68, -0.55, 0.265, 1.55)\";case\"back.out\":return\"cubic-bezier(0.175, 0.885, 0.32, 1.275)\";default:return\"cubic-bezier(0.25, 0.46, 0.45, 0.94)\";}};const playAnimation=()=>{if(isStatic||!imageRef.current||hasAnimated)return;const element=imageRef.current;element.style.transition=\"none\";element.style.clipPath=\"inset(0 0 100% 0)\";element.style.transform=`scale(${scale})`;setTimeout(()=>{element.style.transition=`clip-path ${duration}s ${getEasingFunction(easing)}, transform ${duration}s ${getEasingFunction(easing)}`;element.style.clipPath=\"inset(0% 0 0 0)\";element.style.transform=\"scale(1.0)\";const handleTransitionEnd=()=>{setHasAnimated(true);element.removeEventListener(\"transitionend\",handleTransitionEnd);};element.addEventListener(\"transitionend\",handleTransitionEnd);},delay*1e3+50);};if(isStatic){return /*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100%\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",backgroundColor:\"#f5f5f5\"},children:/*#__PURE__*/_jsx(\"img\",{src:image.src,alt:image.alt,style:{width:\"100%\",height:\"100%\",objectFit:\"cover\"}})});}return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{width:\"100%\",height:\"100%\",overflow:\"hidden\",position:\"relative\"},children:[/*#__PURE__*/_jsx(\"img\",{ref:imageRef,src:image.src,alt:image.alt,style:{width:\"100%\",height:\"100%\",objectFit:\"cover\",transform:`scale(${scale})`}}),trigger===\"manual\"&&/*#__PURE__*/_jsx(\"button\",{onClick:playAnimation,style:{position:\"absolute\",bottom:\"16px\",right:\"16px\",padding:\"8px 16px\",backgroundColor:\"rgba(0, 0, 0, 0.7)\",color:\"white\",border:\"none\",borderRadius:\"4px\",cursor:\"pointer\",fontSize:\"14px\"},children:\"Play Animation\"})]});}addPropertyControls(ImageScroll,{image:{type:ControlType.ResponsiveImage,title:\"Image\"},trigger:{type:ControlType.Enum,title:\"Trigger\",options:[\"onAppear\",\"onScroll\",\"onScreen\",\"manual\"],optionTitles:[\"On Appear\",\"On Scroll\",\"On Screen\",\"Manual\"],defaultValue:\"onAppear\"},autoPlay:{type:ControlType.Boolean,title:\"Auto Play\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\",hidden:({trigger})=>trigger!==\"onAppear\"},duration:{type:ControlType.Number,title:\"Duration\",defaultValue:1,min:.1,max:5,step:.1,unit:\"s\"},delay:{type:ControlType.Number,title:\"Delay\",defaultValue:0,min:0,max:3,step:.1,unit:\"s\"},easing:{type:ControlType.Enum,title:\"Easing\",options:[\"power2.out\",\"power2.in\",\"power2.inOut\",\"bounce.out\",\"elastic.out\",\"back.out\"],optionTitles:[\"Ease Out\",\"Ease In\",\"Ease In Out\",\"Bounce\",\"Elastic\",\"Back\"],defaultValue:\"power2.out\"},loop:{type:ControlType.Boolean,title:\"Loop\",defaultValue:false,enabledTitle:\"On\",disabledTitle:\"Off\"},yoyo:{type:ControlType.Boolean,title:\"Yoyo\",defaultValue:false,enabledTitle:\"On\",disabledTitle:\"Off\",hidden:({loop})=>!loop},scale:{type:ControlType.Number,title:\"Scale\",defaultValue:1.1,min:1,max:2,step:.1}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ImageScroll\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any\",\"framerDisableUnlink\":\"*\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ImageScroll.map"],"mappings":"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"}