---
title: "Animated Gallery — Free Framer component · Best of Framer"
description: "Free Framer component · by Deep Javiya · Galleries. Gallery that comes alive on scroll"
canonical: "https://framer.elliotli.dev/component/animated-gallery"
---

[Home](/)/[Components](/components)/[Galleries](/components/category/galleries)/Animated Gallery

# Animated Gallery

Gallery that comes alive on scroll

[View on Framer](https://framer.com/marketplace/components/animated-gallery/?via=elliot-li)

![Animated Gallery preview image 1](https://framer.elliotli.dev/og/component/animated-gallery/2f4ab9bacee545b2/1600x1200.jpg)

## Summary

Gallery that comes alive on scroll

## Description

## Scroll Gallery

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.

## Made for visual storytelling

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.

## What you can customize

-   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.

## How to use

1.  Add Scroll Gallery to your page.
    
2.  Set the component width to **Fill**.
    
3.  Add your gallery images.
    
4.  Add a video and poster image if needed.
    
5.  Adjust the animation and layout settings.
    
6.  Preview your experience before publishing.
    

## Video and scroll controls

**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.

## Recommended settings

-   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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #2498

## Details

- **Author**: Deep Javiya
- **Published**: 2026-08-04
- **Updated**: 2026-08-04
- **Added**: 2026-08-04
- **Categories**: Galleries

## More like this

-   [Infinite Pan Canvas](/component/infinite-pan-canvas) — Aisol Studio · $15 — Endless image wall you can drag
-   [CMS Photo Pile](/component/cms-photo-pile) — Marso Angelov · $10 — Draggable Photo Gallery
-   [CMS Infinity Grid](/component/cms-infinity-grid) — 55N · Free — Boundless exploration.
-   [Endless CMS Reel](/component/endless-cms-reel) — Marso Angelov · $10 — Horizontal Momentum Gallery