---
title: "Hero Gallery — Framer component · Best of Framer"
description: "$15.00 · Framer component · by Francesco Caronte · Sections. About this component Hero Gallery is an interactive timeline-based component designed to create dynamic hero sections…"
canonical: "https://framer.elliotli.dev/component/hero-gallery"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Hero Gallery

# Hero Gallery

Interactive timeline Gallery for Framer

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

![Hero Gallery preview image 1](https://framer.elliotli.dev/og/component/hero-gallery/7752ae1cffd5ea9f/1600x1200.jpg)

## Summary

About this component Hero Gallery is an interactive timeline-based component designed to create dynamic hero sections and galleries in Framer.

## Description

## About this component

Hero Gallery is an interactive timeline-based component designed to create dynamic hero sections and galleries in Framer. A continuously scrolling timeline of thumbnails runs in an infinite loop, while each item seamlessly updates the background with its corresponding image or video.

Inspired by editorial timelines and cinematic galleries, Hero Gallery gives you full control over layout, animation, and interaction.

Like native Framer components, it’s fully responsive.

————

**Live Preview**: [https://herogallery.framer.website/](https://herogallery.framer.website/)

————

## Customizable Properties

### / Images

-   **Items** – Connect images or videos as timeline items
    
-   **Images Size** – Control thumbnail size
    
-   **Images Spacing** – Adjust spacing between timeline items
    
-   **Corner Radius** – Round thumbnail corners
    

### / Transition

-   **Transition Duration** – Control background image/video transition timing
    
-   **Overlay Opacity** – Adjust overlay strength above background media
    

### / Motion

-   **Auto Scroll Speed** – Set the speed of the infinite timeline loop
    

### / Timeline Layout

-   **Timeline Position** – Place the timeline at the top or bottom
    
-   **Timeline Padding** – Adjust spacing around the timeline
    

### / Timeline Appearance

-   **Timeline Image Opacity** – Control thumbnail opacity
    
-   **Timeline Image Saturation** – Adjust thumbnail saturation
    

### / Behavior

-   **Timeline Auto Hide** – Automatically hide the timeline when inactive
    
-   **Hide Delay** – Delay before the timeline disappears
    

## Use cases

Hero sections · Interactive galleries · Portfolio showcases · Editorial layouts · Visual storytelling · Experimental UI

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

-   All · #6001

## Details

- **Author**: Francesco Caronte
- **Price**: $15.00
- **Published**: 2026-02-09
- **Updated**: 2026-02-25
- **Added**: 2026-01-24
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes