{"version":3,"file":"ImageAppearScroll.BgsRcyVC.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/WpvmDz7w5r6lVYS9tDEt/URdbjTgHT5ExxxUSa0Qt/ImageAppearScroll.js"],"sourcesContent":["/**\n * @framerDisableUnlink\n */import{jsx as _jsx}from\"react/jsx-runtime\";import{motion,useScroll,useMotionValueEvent,useMotionValue}from\"framer-motion\";import{addPropertyControls,ControlType}from\"framer\";import{useRef,useEffect,useState}from\"react\";export default function ScrollDirectionClipPath({image,radius,duration,easing,delay,isVisible}){const{scrollY}=useScroll();const lastScrollY=useRef(0);const animationDirection=useMotionValue(\"down\");const realTimeDirection=useRef(\"down\");const[,forceUpdate]=useState([]);useMotionValueEvent(scrollY,\"change\",latest=>{const diff=latest-lastScrollY.current;if(Math.abs(diff)<2)return;realTimeDirection.current=diff>0?\"down\":\"up\";lastScrollY.current=latest;});useEffect(()=>{animationDirection.set(realTimeDirection.current);forceUpdate([]);},[isVisible]);const getAnimation=()=>{const currentDir=animationDirection.get();if(isVisible){return currentDir===\"down\"?{clipPath:[\"polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)\",\"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)\"]}:{clipPath:[\"polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)\",\"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)\"]};}else{return currentDir===\"down\"?{clipPath:[\"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)\",\"polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)\"]}:{clipPath:[\"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)\",\"polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)\"]};}};return /*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100%\",overflow:\"hidden\",borderRadius:radius,backgroundColor:\"transparent\"},children:/*#__PURE__*/_jsx(motion.div,{initial:false,animate:getAnimation(),transition:{duration:duration,ease:easing,delay:delay*.1},style:{width:\"100%\",height:\"100%\",backgroundImage:image?`url(${image})`:\"none\",backgroundSize:\"cover\",backgroundPosition:\"center\",willChange:\"clip-path\",transform:\"translateZ(0)\",WebkitTransform:\"translateZ(0)\"}})});}addPropertyControls(ScrollDirectionClipPath,{image:{type:ControlType.Image,title:\"Image\"},isVisible:{type:ControlType.Boolean,title:\"Visible\",defaultValue:true},radius:{type:ControlType.Number,title:\"Radius\",defaultValue:0},duration:{type:ControlType.Number,title:\"Duration\",defaultValue:.8},delay:{type:ControlType.Number,title:\"Delay * 0.1\",defaultValue:0},easing:{type:ControlType.Enum,title:\"Easing\",options:[\"easeOut\",\"easeIn\",\"easeInOut\",\"circOut\",\"linear\"],defaultValue:\"easeInOut\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ScrollDirectionClipPath\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ImageAppearScroll.map"],"mappings":"gQAE8N,SAAwB,EAAwB,CAAC,QAAM,SAAO,WAAS,SAAO,QAAM,aAAW,CAAC,GAAK,CAAC,WAAS,EAAU,EAAQ,EAAYA,EAAO,CAAC,EAAQ,EAAmB,EAAe,MAAM,EAAQ,EAAkBA,EAAO,MAAM,EAAO,EAAE,GAAaC,EAAS,CAAC,CAAC,EAA+0B,OAA70B,EAAoB,EAAQ,SAAS,GAAQ,CAAC,IAAM,EAAK,EAAO,EAAY,QAAW,KAAK,IAAI,CAAI,EAAE,IAAS,EAAkB,QAAQ,EAAK,EAAE,OAAO,KAAK,EAAY,QAAQ,EAAO,CAAC,EAAE,MAAc,CAAC,EAAmB,IAAI,EAAkB,OAAO,EAAE,EAAY,CAAC,CAAC,CAAE,EAAE,CAAC,CAAS,CAAC,EAAykB,EAAK,MAAM,CAAC,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,SAAS,SAAS,aAAa,EAAO,gBAAgB,aAAa,EAAE,SAAsB,EAAK,EAAO,IAAI,CAAC,QAAQ,GAAM,aAAxtB,CAAC,IAAM,EAAW,EAAmB,IAAI,EAAmQ,OAA9P,EAAkB,IAAa,OAAO,CAAC,SAAS,CAAC,0CAA0C,6CAA6C,CAAC,EAAE,CAAC,SAAS,CAAC,kDAAkD,6CAA6C,CAAC,EAAe,IAAa,OAAO,CAAC,SAAS,CAAC,8CAA8C,iDAAiD,CAAC,EAAE,CAAC,SAAS,CAAC,8CAA8C,yCAAyC,CAAC,CAAG,EAAsM,CAAa,EAAE,WAAW,CAAU,WAAS,KAAK,EAAO,MAAM,EAAM,EAAE,EAAE,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,gBAAgB,EAAM,OAAO,EAAM,GAAG,OAAO,eAAe,QAAQ,mBAAmB,SAAS,WAAW,YAAY,UAAU,gBAAgB,gBAAgB,eAAe,CAAC,CAAC,CAAC,CAAC,CAAE,iBAAlvD,IAA+E,IAAoD,IAA6C,EAAmkD,EAAoB,EAAwB,CAAC,MAAM,CAAC,KAAK,EAAY,MAAM,MAAM,OAAO,EAAE,UAAU,CAAC,KAAK,EAAY,QAAQ,MAAM,UAAU,aAAa,EAAI,EAAE,OAAO,CAAC,KAAK,EAAY,OAAO,MAAM,SAAS,aAAa,CAAC,EAAE,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,WAAW,aAAa,EAAE,EAAE,MAAM,CAAC,KAAK,EAAY,OAAO,MAAM,cAAc,aAAa,CAAC,EAAE,OAAO,CAAC,KAAK,EAAY,KAAK,MAAM,SAAS,QAAQ,CAAC,UAAU,SAAS,YAAY,UAAU,QAAQ,EAAE,aAAa,WAAW,CAAC,CAAC"}