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.
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.
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
Drag Scroll Sync Gallery onto your canvas
Choose the number of columns
Upload your images and videos (make sure each column contains more media items than the previous one)
Adjust ratio, gap, border radius, and overflow behavior
Install Framer’s official Smooth Scroll component for maximum fluidity
Publish — everything syncs automatically
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
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!