{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/1rxCxx7cutAHd9OQaQmb/iywrAbLEEtzYLKs5JVhp/Nav_abr.js"],
  "sourcesContent": ["import{jsx as _jsx}from\"react/jsx-runtime\";import{useState,useEffect}from\"react\";import{useScroll,useVelocity,useTransform,useMotionValue,animate}from\"framer-motion\";// --------------------------------------------------------------------\n// The following overrides are for creating scroll effects on web pages\nexport function withParallax(Component){const speed=1;return props=>{const{scrollY}=useScroll();const x=useTransform(scrollY,value=>-value*speed)// scrolling down translates left\n;return /*#__PURE__*/_jsx(Component,{...props,style:{...props.style,x:x}});};}// Scrub through a video or drive a Lottie animation by scrolling\nexport function withScrolledProgress(Component){const startY=0// scroll position when animation starts\n;const distance=1e3// scroll distance after which animation ends\n;const endY=startY+distance;return props=>{const{scrollY}=useScroll();const progress=useTransform(scrollY,[startY,endY],[0,1]);return /*#__PURE__*/_jsx(Component,{...props,progress:progress});};}// AKA withDynamicNavBar\nexport function withScrollLinkedValue(Component){// Value being driven by scrolling (e.g. height)\nconst initialValue=200;const finalValue=100;const speed=1;const scrollDistance=(initialValue-finalValue)/speed;const startY=0// scroll position when transition starts\n;const endY=startY+scrollDistance;return props=>{const{scrollY}=useScroll();const scrollOutput=useTransform(scrollY,[startY,endY,endY],[initialValue,finalValue,finalValue],{clamp:false});return /*#__PURE__*/_jsx(Component,{...props,style:{...props.style,height:scrollOutput}});};}export function withScrollToggledVariant(Component){const thresholdY=500// set the scroll position where you want the component to switch\n;return props=>{const{scrollY}=useScroll();const[isPastThreshold,setIsPastThreshold]=useState(false);useEffect(()=>scrollY.onChange(latest=>setIsPastThreshold(latest>thresholdY)),[]);return /*#__PURE__*/_jsx(Component,{...props,variant:isPastThreshold?\"Second\":\"First\"});};}export function withSlideOutOnScrollUp(Component){const slideDistance=200// if we are sliding out a nav bar at the top of the screen, this will be it's height\n;const threshold=500// only slide it back when scrolling back at velocity above this positive (or zero) value\n;return props=>{const{scrollY}=useScroll();const scrollVelocity=useVelocity(scrollY);const[isScrollingBack,setIsScrollingBack]=useState(false);const[isAtTop,setIsAtTop]=useState(true)// true if the page is not scrolled or fully scrolled back\n;const[isInView,setIsInView]=useState(true);useEffect(()=>scrollVelocity.onChange(latest=>{if(latest>0){setIsScrollingBack(false);return;}if(latest<-threshold){setIsScrollingBack(true);return;}}),[]);useEffect(()=>scrollY.onChange(latest=>setIsAtTop(latest<=0)),[]);useEffect(()=>setIsInView(isScrollingBack||isAtTop),[isScrollingBack,isAtTop]);return /*#__PURE__*/_jsx(Component,{...props,animate:{y:isInView?0:-slideDistance},transition:{duration:.2,delay:.25,ease:\"easeInOut\"}});};}export function withScrollTriggeredStates(Component){const scrollYRange=[0,800,1600]// scroll positions that trigger the animation\n;const outputRange=[\"First\",\"Second\",\"Third\"]// list of variants to animate between\n;return props=>{const state=useScrollTriggeredState(scrollYRange,outputRange);return /*#__PURE__*/_jsx(Component,{...props,variant:state});};}// Trigger a state change when each layer with a <section> tag reaches the top of the page\n// You can apply a <section> tag to a layer through the 'Accessibility' property controls\nexport function withSectionTriggeredStates(Component){const outputRange=[\"First\",\"Second\",\"Third\"]// list of variants to animate between\n;return props=>{const{scrollY}=useScroll();const[state,setState]=useState(outputRange[0]);useEffect(()=>{const scrollYRange=getSectionPositions();scrollY.onChange(latest=>{const output=getCorrespondingItem(latest,scrollYRange,outputRange);setState(output);});},[]);return /*#__PURE__*/_jsx(Component,{...props,variant:state});};}export function withScrollTriggeredAnimation(Component){const scrollYRange=[0,800,1600]// scroll positions that trigger the animation\n;const outputRange=[\"#8E47BA\",\"#000AFF\",\"#FF0000\"]// list of values to animate to\n;// customise the transition\nconst transition={type:\"tween\",duration:1,ease:\"easeInOut\"};return props=>{const animatedValue=useMotionValue(outputRange[0]);const{scrollY}=useScroll();const scrollOutput=useSteppedTransform(scrollY,scrollYRange,outputRange);useEffect(()=>scrollOutput.onChange(latest=>animate(animatedValue,latest,transition)// remove transition to use default\n    ),[]);return /*#__PURE__*/_jsx(Component,{...props,style:{...props.style,backgroundColor:animatedValue}})// override value you want to animate\n;};}// Trigger an animation when each layer with a <section> tag reaches the top of the page\n// You can apply a <section> tag to a layer through the 'Accessibility' property controls\nexport function withSectionTriggeredAnimation(Component){const outputRange=[\"#FFEE66\",\"#000AFF\",\"#FF0000\"]// list of values to animate to\n;// customise the transition\nconst transition={type:\"tween\",duration:1,ease:\"easeInOut\"};return props=>{const animatedValue=useMotionValue(outputRange[0]);const handleSectionChange=latest=>animate(animatedValue,outputRange[latest],transition)// remove transition to use default\n;useSectionTrigger(handleSectionChange);return /*#__PURE__*/_jsx(Component,{...props,style:{...props.style,backgroundColor:animatedValue}})// override value you want to animate\n;};}// Apply the current scroll target to the URL displayed in the web browser\n// You can apply a scroll target to a layer through the 'Scroll Target' property controls\nexport function withScrollTargetHistory(Component){return props=>{const{scrollY}=useScroll();const scrollOutput=useMotionValue(\"#\");const handleTargetChange=latest=>history.replaceState(null,\"\",latest);useEffect(()=>{const{scrollYRange,outputRange}=getScrollTargets();scrollY.onChange(latest=>{const index=getMatchingIndex(latest,scrollYRange);if(scrollOutput.get()!==outputRange[index]){scrollOutput.set(outputRange[index]);}});},[]);useEffect(()=>scrollOutput.onChange(handleTargetChange),[]);return /*#__PURE__*/_jsx(Component,{...props});};}// --------------------------------------------------------------------\n// The following overrides are for creating scroll effects on elements\nimport{createRef}from\"react\";// create a ref so we can attach it to the scroll container\nconst ref=/*#__PURE__*/createRef();// apply this to the element being scrolled\nexport function withScrollRef(Component){return props=>{return /*#__PURE__*/_jsx(Component,{...props,ref:ref});};}// apply this to the element with the scroll effect\nexport function withElementParallax(Component){const speed=1/2;return props=>{const{scrollY}=useScroll({container:ref});const x=useTransform(scrollY,value=>-value*speed)// scrolling down translates left\n;return /*#__PURE__*/_jsx(Component,{...props,style:{...props.style,x:x}});};}// --------------------------------------------------------------------\n// Custom hooks\nfunction useSteppedTransform(value,inputRange,outputRange){return useTransform(value,value=>getCorrespondingItem(value,inputRange,outputRange));}function useScrollTriggeredState(inputRange,outputRange){const{scrollY}=useScroll();const[state,setState]=useState(outputRange[0]);useEffect(()=>scrollY.onChange(latest=>setState(getCorrespondingItem(latest,inputRange,outputRange))),[]);return state;}function useSectionTrigger(handleSectionChange){const scrollOutput=useMotionValue(0);const{scrollY}=useScroll();useEffect(()=>{const scrollYRange=getSectionPositions();scrollY.onChange(latest=>{const index=getMatchingIndex(latest,scrollYRange);if(scrollOutput.get()!==index){scrollOutput.set(index);}});},[]);useEffect(()=>scrollOutput.onChange(handleSectionChange),[]);}// --------------------------------------------------------------------\n// Functions\nfunction getMatchingIndex(value,array){let found=array.findIndex(el=>el>value);switch(found){case 0:return 0;break;case-1:return array.length-1;break;default:return found-1;}}function getCorrespondingItem(value,inputRange,outputRange){const inputIndex=getMatchingIndex(value,inputRange);const outputIndex=inputIndex>outputRange.length-1?outputRange.length-1:inputIndex;return outputRange[outputIndex];}function getSectionPositions(){const elements=Array.from(document.querySelectorAll(\"section\"));const positions=elements.map(element=>{return element.getBoundingClientRect().top+window.scrollY;}).sort((a,b)=>a-b);if(positions[0]===0){return positions;}else{return[0,...positions];}}function getScrollTargets(){const elements=Array.from(document.querySelectorAll('[id]:not([id=\"\"])'));const targets=elements.map(element=>{return{y:element.getBoundingClientRect().top+window.scrollY,target:`#${element.id}`};}).sort((a,b)=>a.y-b.y);const inputs=targets.map(target=>target.y);const outputs=targets.map(target=>target.target);if(inputs[0]===0){outputs[0]=\"#\";return{scrollYRange:inputs,outputRange:outputs};}else{return{scrollYRange:[0,...inputs],outputRange:[\"#\",...outputs]};}}\nexport const __FramerMetadata__ = {\"exports\":{\"withScrollTriggeredStates\":{\"type\":\"reactHoc\",\"name\":\"withScrollTriggeredStates\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withScrollTriggeredAnimation\":{\"type\":\"reactHoc\",\"name\":\"withScrollTriggeredAnimation\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withSectionTriggeredStates\":{\"type\":\"reactHoc\",\"name\":\"withSectionTriggeredStates\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withScrollLinkedValue\":{\"type\":\"reactHoc\",\"name\":\"withScrollLinkedValue\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withParallax\":{\"type\":\"reactHoc\",\"name\":\"withParallax\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withScrollToggledVariant\":{\"type\":\"reactHoc\",\"name\":\"withScrollToggledVariant\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withScrollRef\":{\"type\":\"reactHoc\",\"name\":\"withScrollRef\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withSlideOutOnScrollUp\":{\"type\":\"reactHoc\",\"name\":\"withSlideOutOnScrollUp\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withScrolledProgress\":{\"type\":\"reactHoc\",\"name\":\"withScrolledProgress\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withScrollTargetHistory\":{\"type\":\"reactHoc\",\"name\":\"withScrollTargetHistory\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withElementParallax\":{\"type\":\"reactHoc\",\"name\":\"withElementParallax\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withSectionTriggeredAnimation\":{\"type\":\"reactHoc\",\"name\":\"withSectionTriggeredAnimation\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Nav_abr.map"],
  "mappings": "qEAUyR,SAASA,EAAuBC,EAAU,CAElU,OAAOC,GAAO,CAAC,GAAK,CAAC,QAAAC,CAAO,EAAEC,EAAU,EAAQC,EAAeC,EAAYH,CAAO,EAAO,CAACI,EAAgBC,CAAkB,EAAEC,EAAS,EAAK,EAAO,CAACC,EAAQC,CAAU,EAAEF,EAAS,EAAI,EAChL,CAACG,EAASC,CAAW,EAAEJ,EAAS,EAAI,EAAE,OAAAK,EAAU,IAAIT,EAAe,SAASU,GAAQ,CAAC,GAAGA,EAAO,EAAE,CAACP,EAAmB,EAAK,EAAE,MAAO,CAAC,GAAGO,EAAO,KAAW,CAACP,EAAmB,EAAI,EAAE,MAAO,CAAC,CAAC,EAAE,CAAC,CAAC,EAAEM,EAAU,IAAIX,EAAQ,SAASY,GAAQJ,EAAWI,GAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,EAAED,EAAU,IAAID,EAAYN,GAAiBG,CAAO,EAAE,CAACH,EAAgBG,CAAO,CAAC,EAAsBM,EAAKf,EAAU,CAAC,GAAGC,EAAM,QAAQ,CAAC,EAAEU,EAAS,EAAE,IAAc,EAAE,WAAW,CAAC,SAAS,GAAG,MAAM,IAAI,KAAK,WAAW,CAAC,CAAC,CAAE,CAAE",
  "names": ["withSlideOutOnScrollUp", "Component", "props", "scrollY", "useScroll", "scrollVelocity", "useVelocity", "isScrollingBack", "setIsScrollingBack", "ye", "isAtTop", "setIsAtTop", "isInView", "setIsInView", "ue", "latest", "p"]
}