---
title: "Scroll 3D Grid — Framer component · Best of Framer"
description: "$19.00 · Framer component · by FramerHub.io  · Interactive. 3D grid component with scroll-triggered"
canonical: "https://framer.elliotli.dev/component/scroll3dgrid"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Scroll 3D Grid

# Scroll 3D Grid

3D grid component with scroll-triggered

[View on Framer](https://framer.com/marketplace/components/scroll3dgrid/?via=elliot-li)

![Scroll 3D Grid preview image 1](https://framer.elliotli.dev/og/component/scroll3dgrid/4e8070cfaa6abcbb/1600x1200.jpg)

## Summary

3D grid component with scroll-triggered

## Description

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-xywsday5-KHjKhxKhqQPicXQty2QJcjijYouk0q)](https://framerhub.io/components?utm_source=framer_marketplace&utm_medium=framer_marketplace_components&utm_content=Scroll3DGrid)

Demo: [LIVE DEMO](https://wonderful-portion-923691.framer.app/)

## Scroll3DGrid

A stunning 3D grid component with scroll-triggered animations. Features multiple animation styles with perspective transforms, creating immersive visual experiences as users scroll through your content.

## Overview

The Scroll3DGrid component creates eye-catching 3D perspective effects on image grids that animate based on scroll position. It includes 6 different animation types, each with unique 3D transformations and transitions.Features

\- 🎬 **6 Animation Types** - Multiple pre-configured 3D animation styles

\- 🎨 **Fully Customizable** - Control perspective, columns, gap, and more

\- 📱 **Responsive** - Adapts to different screen sizes

\- ⚡ **Performance Optimized** - Uses GSAP Scroll Trigger for smooth animations

\- 🖼️ **Image Support** - Easy image array configuration

\- 🎯 **Scroll-Triggered** - Animations activate as you scroll

## Animation Types

### Type 1: Perspective Slide

\- Horizontal parallax movement with depth

\- Items slide from left to right at different speeds

\- 3D rotation on Y-axis with varying Z-depth

### Type 2: Rotation Fade

\- Vertical movement with rotation

\- Brightness transitions from 200% to 0%

\- Complex 3D rotation on multiple axes

### Type 3: Zoom In

\- Items start far away and zoom in

\- Rotates from angled to flat

\- Scattered positioning effect

### Type 4: Pop Out

\- Items pop forward then settle back

\- Flipping rotation effect

\- Brightness fade from light to dark

### Type 5: Row Slide

\- Alternating row animations

\- Even rows slide left, odd rows slide right

\- Final scatter effect

### Type 6: Spin Up

\- Items spin 360° while rising

\- Rotation on Y-axis

\- Opacity and scale transitions

### 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!

## Rank history [How rankings work →](/terms#rankings)

-   All · #10300

## Details

- **Author**: FramerHub.io
- **Price**: $19.00
- **Published**: 2025-12-19
- **Updated**: 2026-05-18
- **Added**: 2025-11-11
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step