An interactive web gallery featuring an isometric grid layout with smooth scrolling animations and a modern lightbox viewer.
- Isometric Grid Layout: Visually appealing tilted grid design
- Scroll-Based Animations: Dynamic contrast, brightness, and translation effects
- Modern Lightbox Gallery: Full-screen image viewer with smooth transitions
- Keyboard Navigation: Arrow keys for navigation, Escape to close
- Touch-Friendly: Responsive design works on mobile devices
- Accessibility Features: ARIA attributes and keyboard navigation support
- Smooth Scrolling: Powered by Lenis for fluid page scrolling
- HTML5
- CSS3 (with modern animations and transitions)
- JavaScript (ES6+)
- GSAP (GreenSock Animation Platform)
- ScrollTrigger
- Draggable
- Flip
- InertiaPlugin
- Lenis (for smooth scrolling)
The gallery presents an isometric grid of images that respond to scrolling with dynamic visual effects. As users scroll, the grid rows animate with varying levels of contrast, brightness, and horizontal movement.
The "Explore" button opens a full-screen lightbox gallery where users can navigate through all images with intuitive controls:
- Arrow buttons for next/previous image
- Keyboard arrow keys for navigation
- Dot indicators showing current position
- Smooth slide transitions between images
- Clone this repository
- Open
index.htmlin your browser - Scroll to see the grid animation effects
- Click "Explore" to open the lightbox gallery
This project uses modern CSS and JavaScript features and is compatible with:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
You can customize the gallery by:
- Replacing image URLs in the HTML
- Adjusting animation parameters in the JavaScript
- Modifying CSS variables for colors and styling
This project is available for personal and commercial use.
- GSAP by GreenSock
- Lenis by Studio Freight
- Font: Poppins and Anton from Google Fonts
- Demo images from various artists on ArtStation