Scroll Sync Gallery — Grid Scroll with Pictures & Videos

About this Component

Scroll Sync Gallery is a production-ready Framer component for building vertically scroll-synced media grids with both images and videos.

Each column scrolls independently to create a dynamic cascading effect. The component is fully responsive, allowing you to configure columns, media content, and layout differently on desktop, tablet, and mobile.

It works perfectly with Framer Smooth Scroll for an ultra-fluid visual experience.

Demo preview

What It Does

Scroll Sync Gallery animates columns at different speeds as the user scrolls, creating a refined parallax-style layout.

You can use it to:

• Showcase images and videos in the same grid

• Build immersive hero sections

• Create dynamic portfolios

• Design editorial-style layouts

• Enhance smooth scrolling experiences

For the best effect, make sure each column has more media items than the one before it.

Key Features

Media Support

• Upload images and video files

• Poster support for videos

• Autoplay, loop, muted, and controls options

Custom Ratio (3/4 Default)

• Default ratio is 3/4

• Accepts any CSS aspect-ratio value (1, 2/3, 4/3, 9/16, etc.)

• Ensures consistent, perfectly cropped media

Independent Scroll Columns

• Each column moves individually

• Natural cascading scroll effect

Responsive Configuration

• Adjust column count per device

• Reorder or change media per breakpoint

• Fully adaptable layouts

Spacing & Styling Controls

• Adjustable gap between items

• Custom border radius

• Overflow Grid toggle (show or hide column overflow)

Smooth Scroll Compatible

• Works perfectly with Framer Smooth Scroll

• Designed for fluid motion experiences

How to Set Up

1. Drag Scroll Sync Gallery onto your canvas

2. Choose the number of columns

3. Upload your images and videos (make sure each column contains more media items than the previous one)

4. Adjust ratio, gap, border radius, and overflow behavior

5. Install Framer’s official Smooth Scroll component for maximum fluidity

6. Publish — everything syncs automatically

Design Notes

• For the best visual result, ensure each column contains more media items than the previous one

• Videos remain visible even when autoplay is disabled

• Default aspect ratio is 3/4 but fully customizable

• Overflow can be toggled depending on whether you want a clean crop or visible scroll movement

• Fully responsive and independently configurable per device

Refund Policy

All sales of digital products are final and non-refundable.

If you have any questions about the product, please contact me at pierrevion90@gmail.com before completing your purchase. I’m happy to help.

Enjoy!