3D Scroll Grid is a powerful Framer image gallery component that brings depth, motion, and interaction to your layouts. Each image animates independently as it enters the viewport, using smooth scroll-based 3D transforms powered by Framer Motion.
You can switch between multiple animation styles like perspective slides, rotations, zooms, and spin effects using a built-in sticky control bar—or lock in a single style for a clean, focused experience. The grid is fully responsive, supports custom aspect ratios, and exposes detailed controls for spacing, depth, shadows, and styling.
Designed for performance and visual impact, this component is ideal when you want more than a static grid and need motion that feels intentional, modern, and immersive.
Multiple scroll-based 3D animation styles
Perspective Slide
Rotation Fade
Zoom In
Pop Out
Row Slide
Spin Up
Independent animation per grid item on scroll
Responsive grid (mobile, tablet, desktop)
Adjustable columns, gaps, and perspective depth
Custom aspect ratios for images
Optional sticky animation switcher (button bar)
Fully customizable button bar styling
Supports uploaded images and external URLs
GPU-friendly transforms for smooth performance
Designer and developer portfolios
Photography and art showcases
Landing pages and hero sections
Agency and studio websites
Editorial layouts and visual storytelling
Product or feature galleries
Portfolio image sections
Case study galleries
Brand storytelling pages
Marketing and launch websites
Inspiration boards and mood galleries
Frame Craft
