Scroll Sync Gallery

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

Scroll Sync Gallery is a vertical media grid where each column moves at its own speed as the page scrolls, creating a smooth cascading parallax. Mix images and videos in the same layout and let the columns glide past each other for an editorial, gallery-wall feel.

Built for Creative Control

Every column is configured on its own: set how many items it holds, reorder them, and swap an image for a video anywhere. Tune the aspect ratio, gap, and corner radius to fit your design, and pick a different column count and media set per breakpoint for full responsive control.

Pairs perfectly with Framer's Smooth Scroll (or Lenis) for extra-fluid motion.

Key Features

Media

• Mix images and video files in any column

• Poster image, autoplay, loop, muted, and controls options per video

• Alt text field on every item for accessibility and SEO

Layout

• 2 to 6 columns, configurable per device

• Any CSS aspect ratio (1, 2/3, 3/4, 4/3, 9/16, and more)

• Adjustable gap and border radius

• Overflow toggle: clean crop or visible column movement

Motion

• Each column scrolls at its own pace for a natural cascade

• The first column stays put as a steady reference

• Works with or without Smooth Scroll

Performance

• Videos load only their metadata upfront, not the full file

• Motion is disabled on the canvas and in exports for a clean static preview

How to Set Up

1. Drag Scroll Sync Gallery onto your canvas

2. Choose the number of columns

3. Add images and videos, giving each column more items than the one before it

4. Adjust ratio, gap, radius, and overflow to taste

5. Publish, everything syncs automatically

Refund Policy

All sales of digital products are final and non-refundable. Questions? Contact [email protected] before purchasing. Enjoy!