About Elastic Grid Scroll

A smooth elastic column-scroll gallery with spring-based lag for Framer.

A responsive image grid where each column catches up to your scroll position with smooth and elastic motion.

Elastic Grid Scroll turns a standard image grid into a dynamic scrolling gallery. As visitors scroll, each column moves with its own spring-based lag, creating a subtle parallax and elastic catch-up effect.

No code required. Everything is controlled directly through Framer's property panel.

Features

Elastic column-based scroll effect
Smooth spring-driven lag
Adjustable scroll intensity
Custom elasticity and smoothness
Optional reversed scroll direction
Responsive image grid
Custom image aspect ratio
Hover image zoom
Cover or contain image fit
Optional grayscale images
Captions below or overlaid on images
Custom caption typography
Optional image links
Reduced-motion support
Static renderer support

Customize

Images
Captions
Alt text
Image links
Number of columns
Image aspect ratio
Column and row gaps
Container padding
Lag intensity
Elasticity
Scroll smoothness
Scroll direction
Reduced-motion behavior
Image fit
Border radius
Grayscale
Hover zoom
Caption position
Caption typography
Caption color
Background color

How It Works

Add your images, captions, and optional links through the Framer property panel. The grid automatically distributes the items across columns.

Adjust the lag, elasticity, and smoothness to control how quickly each column catches up. You can also add hover zoom, captions, grayscale treatment, and custom image fitting to match your design.