Scroll Gallery turns a simple collection of images into an immersive scroll experience. As visitors move down the page, the gallery stays pinned while the selected image or video smoothly expands into a large featured view.
It works well for real estate websites, architecture portfolios, photography, product showcases, case studies, travel stories, and projects where visuals deserve more attention than a standard gallery.
Add multiple gallery images
Add a featured video
Use a custom poster image
Control video play timing
Choose animation easing
Adjust stagger timing
Turn video sound on or off
Restart the video on replay
Customize gap and padding
Change corner radius
Adjust pin distance
Change the background color
Everything is controlled from the Framer properties panel, so you can update the media, animation, spacing, playback behaviour, and appearance without editing the code.
Add Scroll Gallery to your page.
Set the component width to Fill.
Add your gallery images.
Add a video and poster image if needed.
Adjust the animation and layout settings.
Preview your experience before publishing.
Play Threshold controls when the video starts during the scroll animation. A lower value starts it earlier, while a higher value starts it closer to the expanded view.
Pin Distance controls how long the gallery remains pinned. A smaller value creates a shorter, faster transition, while a larger value creates a slower, more cinematic experience.
Play Threshold: 0.75
Easing: Linear
Stagger: 0
Video Sound: Off
Restart Replay: Off
Gap: 30px
Padding: 30px
Radius: 16px
Pin Distance: 300vh
Background: #0A0A0A
These settings provide a clean and balanced starting point. You can customize the complete gallery directly from Framer without touching the code.
Scroll Gallery turns a simple collection of images into an immersive scroll experience. As visitors move down the page, the gallery stays pinned while the selected image or video smoothly expands into a large featured view.
It works well for real estate websites, architecture portfolios, photography, product showcases, case studies, travel stories, and projects where visuals deserve more attention than a standard gallery.
Add multiple gallery images
Add a featured video
Use a custom poster image
Control video play timing
Choose animation easing
Adjust stagger timing
Turn video sound on or off
Restart the video on replay
Customize gap and padding
Change corner radius
Adjust pin distance
Change the background color
Everything is controlled from the Framer properties panel, so you can update the media, animation, spacing, playback behaviour, and appearance without editing the code.
Add Scroll Gallery to your page.
Set the component width to Fill.
Add your gallery images.
Add a video and poster image if needed.
Adjust the animation and layout settings.
Preview your experience before publishing.
Play Threshold controls when the video starts during the scroll animation. A lower value starts it earlier, while a higher value starts it closer to the expanded view.
Pin Distance controls how long the gallery remains pinned. A smaller value creates a shorter, faster transition, while a larger value creates a slower, more cinematic experience.
Play Threshold: 0.75
Easing: Linear
Stagger: 0
Video Sound: Off
Restart Replay: Off
Gap: 30px
Padding: 30px
Radius: 16px
Pin Distance: 300vh
Background: #0A0A0A
These settings provide a clean and balanced starting point. You can customize the complete gallery directly from Framer without touching the code.
