{"version":3,"file":"StaggerRevealGrid.BxX-RZb_.mjs","names":["useRef"],"sources":["https:/framerusercontent.com/modules/m28Xb5QcbZOHzPe3CdEe/Yq9MFWHworYXkD3cfEvU/StaggerRevealGrid.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useRef}from\"react\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";/**\n * StaggerRevealGrid\n * An invisible trigger placed as a child inside a grid of images/logos.\n * When the grid scrolls into view, each sibling image fades in and rises\n * up (opacity 0->1, translateY up), one after another in a stagger —\n * since CSS grid lays children out row by row, staggering by DOM order\n * naturally goes left-to-right, top-to-bottom (i.e. top-left first,\n * bottom-right last), matching the grid's actual visual order.\n *\n * Place ONE instance of this as a child inside the grid (anywhere in the\n * child list). Framer typically wraps every layer in its own positioning\n * div, so this doesn't assume its immediate DOM parent is the actual CSS\n * grid — it walks up through ancestors looking for the nearest one whose\n * computed display is \"grid\" (or a couple of levels up as a fallback),\n * then animates that container's children.\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function StaggerRevealGrid(props){const{riseDistance,fadeDuration,staggerStep,triggerThreshold,hideOnCanvas}=props;const selfRef=useRef(null);const hasFiredRef=useRef(false);const isCanvas=RenderTarget.current()===RenderTarget.canvas;useEffect(()=>{if(isCanvas)return;if(!selfRef.current)return;if(typeof IntersectionObserver===\"undefined\")return;if(typeof window===\"undefined\")return;// Find the wrapper element that is actually a direct child of the\n// real CSS grid — i.e. walk up until the PARENT of our current\n// node has display:grid, since Framer nests each layer inside its\n// own positioning wrapper div(s).\nconst findGridContainer=()=>{let node=selfRef.current;let selfWrapper=selfRef.current;for(let i=0;i<8&&node;i++){const parent=node.parentElement;if(!parent)return null;const display=window.getComputedStyle(parent).display;if(display===\"grid\"||display===\"flex\"){return parent;}selfWrapper=node;node=parent;}// Fallback: just use the immediate parent if no grid/flex\n// ancestor was found within the search depth.\nreturn selfWrapper?selfWrapper.parentElement:null;};const gridContainer=findGridContainer();if(!gridContainer)return;// Identify which ancestor of ours is the direct child of the grid\n// container, so we exclude that one (our own wrapper chain) from\n// the animation targets, not just selfRef.current itself.\nlet ownTopWrapper=selfRef.current;while(ownTopWrapper&&ownTopWrapper.parentElement!==gridContainer){ownTopWrapper=ownTopWrapper.parentElement;}const siblings=Array.from(gridContainer.children).filter(el=>el!==ownTopWrapper);if(siblings.length===0)return;// Set initial hidden/offset state before anything is visible.\nsiblings.forEach(el=>{el.style.opacity=\"0\";el.style.transform=`translateY(${riseDistance}px)`;el.style.transition=\"none\";});const observer=new IntersectionObserver(entries=>{for(const entry of entries){if(entry.isIntersecting&&!hasFiredRef.current){hasFiredRef.current=true;siblings.forEach((el,i)=>{el.style.transition=`opacity ${fadeDuration}ms ease, transform ${fadeDuration}ms ease`;el.style.transitionDelay=`${i*staggerStep}ms`;void el.offsetHeight;el.style.opacity=\"1\";el.style.transform=\"translateY(0px)\";});observer.disconnect();}}},{threshold:triggerThreshold});observer.observe(gridContainer);return()=>observer.disconnect();// eslint-disable-next-line react-hooks/exhaustive-deps\n},[isCanvas,riseDistance,fadeDuration,staggerStep,triggerThreshold]);if(isCanvas&&hideOnCanvas){return /*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100%\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",color:\"rgba(0,0,0,0.4)\",fontSize:10,fontFamily:\"sans-serif\",textAlign:\"center\"},children:\"Stagger trigger\"});}return /*#__PURE__*/_jsx(\"div\",{ref:selfRef,style:{width:0,height:0,overflow:\"hidden\"}});}addPropertyControls(StaggerRevealGrid,{riseDistance:{type:ControlType.Number,title:\"Rise Distance (px)\",defaultValue:24,min:4,max:100},fadeDuration:{type:ControlType.Number,title:\"Fade/Rise Duration (ms)\",defaultValue:600,min:100,max:2e3,step:50},staggerStep:{type:ControlType.Number,title:\"Stagger Step (ms)\",defaultValue:40,min:0,max:300,step:5,description:\"Delay added between each successive image, in DOM/grid order (top-left to bottom-right).\"},triggerThreshold:{type:ControlType.Number,title:\"Trigger Threshold\",defaultValue:.2,min:0,max:1,step:.05,description:\"How much of the grid must be visible before the reveal starts.\"},hideOnCanvas:{type:ControlType.Boolean,title:\"Placeholder on Canvas\",defaultValue:true}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"StaggerRevealGrid\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any\",\"framerSupportedLayoutHeight\":\"any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./StaggerRevealGrid.map"],"mappings":"sMAkBG,SAAwB,EAAkB,EAAM,CAAC,GAAK,CAAC,eAAa,eAAa,cAAY,mBAAiB,gBAAc,EAAY,EAAQA,EAAO,IAAI,EAAQ,EAAYA,EAAO,EAAK,EAAQ,EAAS,EAAa,QAAQ,IAAI,EAAa,OAWsF,OAX/E,MAAc,CAAmG,GAA/F,GAAmB,CAAC,EAAQ,SAAkB,OAAO,qBAAuB,KAA6B,IAAS,OAAY,OAMxV,IAAM,OAF9B,CAAC,IAAI,EAAK,EAAQ,QAAY,EAAY,EAAQ,QAAQ,IAAI,IAAI,EAAE,EAAE,EAAE,GAAG,EAAK,IAAI,CAAC,IAAM,EAAO,EAAK,cAAc,GAAG,CAAC,EAAO,OAAO,KAAK,IAAM,EAAQ,EAAO,iBAAiB,CAAM,CAAC,CAAC,QAAQ,GAAG,IAAU,QAAQ,IAAU,OAAQ,OAAO,EAAQ,EAAY,EAAK,EAAK,CAAO,CAEjT,OAAO,EAAY,EAAY,cAAc,IAAK,EAAsB,CAAkB,EAAE,GAAG,CAAC,EAAc,OAG9G,IAAI,EAAc,EAAQ,QAAQ,KAAM,GAAe,EAAc,gBAAgB,GAAe,EAAc,EAAc,cAAe,IAAM,EAAS,MAAM,KAAK,EAAc,QAAQ,CAAC,CAAC,OAAO,GAAI,IAAK,CAAa,EAAE,GAAG,EAAS,SAAS,EAAE,OACvP,EAAS,QAAQ,GAAI,CAAC,EAAG,MAAM,QAAQ,IAAI,EAAG,MAAM,UAAU,cAAc,EAAa,KAAK,EAAG,MAAM,WAAW,MAAO,CAAC,EAAE,IAAM,EAAS,IAAI,qBAAqB,GAAS,CAAC,IAAI,IAAM,KAAS,EAAY,EAAM,gBAAgB,CAAC,EAAY,UAAS,EAAY,QAAQ,GAAK,EAAS,SAAS,EAAG,IAAI,CAAC,EAAG,MAAM,WAAW,WAAW,EAAa,qBAAqB,EAAa,SAAS,EAAG,MAAM,gBAAgB,GAAG,EAAE,EAAY,IAAI,EAAQ,aAAa,EAAG,MAAM,QAAQ,IAAI,EAAG,MAAM,UAAU,iBAAkB,CAAC,EAAE,EAAS,WAAW,EAAI,EAAE,CAAC,UAAU,CAAgB,CAAC,EAAkC,OAAhC,EAAS,QAAQ,CAAa,MAAY,EAAS,WAAW,CACznB,EAAE,CAAC,EAAS,EAAa,EAAa,EAAY,CAAgB,CAAC,EAAK,GAAU,EAAkC,EAAK,MAAM,CAAC,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,QAAQ,OAAO,WAAW,SAAS,eAAe,SAAS,MAAM,kBAAkB,SAAS,GAAG,WAAW,aAAa,UAAU,QAAQ,EAAE,SAAS,iBAAiB,CAAC,EAAuB,EAAK,MAAM,CAAC,IAAI,EAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,SAAS,QAAQ,CAAC,CAAC,CAAE,qBA7B1X,IAAoC,IAAiE,EA6BsR,EAAoB,EAAkB,CAAC,aAAa,CAAC,KAAK,EAAY,OAAO,MAAM,qBAAqB,aAAa,GAAG,IAAI,EAAE,IAAI,GAAG,EAAE,aAAa,CAAC,KAAK,EAAY,OAAO,MAAM,0BAA0B,aAAa,IAAI,IAAI,IAAI,IAAI,IAAI,KAAK,EAAE,EAAE,YAAY,CAAC,KAAK,EAAY,OAAO,MAAM,oBAAoB,aAAa,GAAG,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,YAAY,0FAA0F,EAAE,iBAAiB,CAAC,KAAK,EAAY,OAAO,MAAM,oBAAoB,aAAa,GAAG,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,YAAY,gEAAgE,EAAE,aAAa,CAAC,KAAK,EAAY,QAAQ,MAAM,wBAAwB,aAAa,EAAI,CAAC,CAAC"}