Stagger Grid Reveal
Grid entrance animations with directional stagger and scroll-triggered reveals. 8+ directions, 7 animation styles, hover tilt, and wave patterns.
About This Effect
A grid entrance animation system with directional stagger patterns and scroll-triggered reveals. Items enter from eight different directions with seven distinct animation styles, creating visually striking page load and scroll reveal sequences. Includes 3D perspective transforms, hover tilt interactions, and wave-based stagger patterns for organic-feeling grid animations.
What's Included
- Eight stagger directions including diagonal and center-outward
- Seven animation styles: fade, scale, flip, slide, blur, rotate, and bounce
- Wave and spiral stagger patterns for organic motion
- ScrollTrigger integration with batch processing for performance
- Interactive hover tilt with 3D perspective (desktop pointer devices)
- Configurable grid columns, gap, and item dimensions
- Responsive breakpoint handling with automatic recalculation
- Lenis smooth scroll compatibility
Perfect For
- Portfolio project grids and case study layouts
- E-commerce product listing pages
- Team member and contributor photo grids
- Image gallery and media showcase layouts
- Feature card grids on landing pages
How It Works
Grid items are indexed by their row and column position. The stagger direction determines the order in which items animate — for example, "top-left" starts from the upper-left corner and progresses diagonally. ScrollTrigger batch mode groups items entering the viewport and triggers their animations with calculated stagger delays. Each animation style defines a from-state that GSAP tweens to the final visible state.