---
title: "Scroll 3D Grid"
canonical_url: "https://framerhub.io/components/scroll-3d-grid"
last_updated: "2026-06-15T14:46:31.307Z"
---

## Scroll 3D Grid

Create stunning 3D grid animations that respond to scroll. Choose from 6 unique animation styles, each creating a different dramatic 3D effect as users scroll through your gallery.

## Features

**6 Animation Styles**
Choose from Perspective Slide, Rotation Fade, Zoom In, Pop Out, Row Slide, and Spin Up effects.

**GSAP Scroll Integration**
Smooth, performant animations powered by GSAP and ScrollTrigger.

**Flexible Grid Layout**
Customize columns, spacing, and image aspect ratios to fit your design.

**3D Perspective Control**
Adjust the 3D depth intensity for subtle or dramatic visual effects.

## Use Cases

**Portfolio Galleries** — Showcase creative work with eye-catching scroll animations.

**Product Showcases** — Display product images with engaging 3D transitions.

**Hero Sections** — Create immersive landing page experiences.

**Image Collections** — Transform standard galleries into interactive experiences.

![Scroll 3D Grid Preview](/framerhub/img/components/control/scroll-3d-grid.jpg)

## How to Use

### Installation

**VIDEO PLACEHOLDER: Installation Tutorial**

1. Log in to your account at framerhub.io
2. Navigate to framerhub.io/dashboard
3. Find Scroll 3D Grid in your Recent Purchases
4. Click the "Copy" button
5. Open your Framer project
6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)

### Customization

**Effect Style**
Choose from 6 unique animation types. Each creates a different 3D transformation as users scroll.

**Grid Layout**

- Columns: Set the number of grid columns (1-12)
- Spacing: Adjust gap between images
- Image Ratio: Control height/width ratio (1 = square, 1.5 = portrait)

**Appearance**

- 3D Depth: Control perspective intensity (lower = more dramatic)
- Corner Radius: Round image corners
- Background: Set the color behind the grid

**Scroll Behavior**

- Scroll Smoothness: Lower = snappy, Higher = smoother lag effect

### Quick Tips

**For Best Performance** — Use 12-24 images for optimal visual impact without performance issues.

**Effect Selection** — Type 1 (Perspective Slide) works great for portfolios. Type 5 (Row Slide) is perfect for horizontal emphasis.

**3D Intensity** — Lower perspective values (500-1000) create more dramatic depth. Higher values (2000+) are more subtle.

**Grid Sizing** — The component requires sufficient height to trigger scroll animations. Ensure it's placed in a scrollable container.

## License

**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.

## Refund Policy

Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!

## Why Designers Love This

Transform ordinary image galleries into immersive 3D experiences. Based on the acclaimed Codrops implementation, this component brings high-end web animation to Framer with zero coding required.

---