About Hero Gallery
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/
————
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
