Scroll 3D Grid

Cinematic 3D Scroll Effects for Framer

Turn any image grid into an immersive scroll experience. Six animation presets that transform static galleries into dynamic visual stories.

Perfect for portfolios, case studies, and product showcases that demand attention.

Features

Six Animation Styles Choose from Perspective Slide, Rotation Fade, Zoom In, Pop Out, Row Slide, or Spin Up—each creates a unique scroll-triggered 3D effect.

Flexible Grid System Adjust columns (1-12), spacing, and image aspect ratios to match your design. Every layout adapts beautifully.

Smooth Scroll Control Toggle smooth scrubbing for buttery motion, or disable for instant responsiveness. Fine-tune the feel.

Any Image, Any Size Add up to 100 images directly from Framer's image picker. Works with photos, mockups, or product shots.

Performance Optimized Smooth animations that work across devices. Desktop and mobile ready.

Use Cases

Portfolio Galleries — Showcase design work with depth and motion that stops the scroll

Product Showcases — Display multiple product angles in a memorable, interactive way

Case Study Images — Present project visuals with cinematic transitions between screens

Agency Websites — Stand out with sophisticated scroll effects that demonstrate design quality

Photography Sites — Turn image collections into immersive visual experiences

How to Use

Installation

After purchasing from FramerHub:

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

Everything you need is in Framer's properties panel:

Animation Style

• Select from 6 presets: Perspective Slide, Rotation Fade, Zoom In, Pop Out, Row Slide, Spin Up
• Each preset creates a unique 3D motion effect

Grid Layout

• Set column count (1-12 columns)
• Adjust gap spacing between images
• Change image aspect ratio to fit your content

Images

• Add up to 100 images using Framer's image picker
• Drag and drop to reorder
• Mix photos, mockups, and graphics

Controls

• Toggle smooth scrub for fluid motion
• Adjust 3D perspective depth
• Set background color

Quick Tips

Best Results — Use 12-30 images for most animations. More images create longer scroll sections

Layout Balance — 3-4 columns work well for most screens. Fewer columns for mobile layouts

Image Quality — Use high-resolution images (1200px+ width) for sharp visuals at any scale

Aspect Ratios — Match your image aspect ratios, or let the component crop them uniformly

License

Single Use License — Use in unlimited client projects with full commercial rights. No redistribution.

Why Designers Love This

Six ready-to-use animations mean you skip the setup and start with scroll effects that clients notice. No code, no complexity—just choose your style, add images, and customize through Framer's properties panel.

Perfect for agencies building memorable portfolios and designers who want scroll interactions that elevate their work.