3D Grid Gallery

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.

Key features

• 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

Best for

• 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

Where to use

• Portfolio image sections

• Case study galleries

• Brand storytelling pages

• Marketing and launch websites

• Inspiration boards and mood galleries