Skip to content

component

Active_Image_Gallery

By RAMDIN SINGH

Details

Summary

Description: This React component creates a modern, responsive image gallery with a large hero image and a row or column of interactive thumbnails.

Description

Description: This React component creates a modern, responsive image gallery with a large hero image and a row or column of interactive thumbnails . Built for Framer , it allows users to seamlessly browse images with smooth transitions , hover effects , and keyboard navigation . The hero image updates dynamically when a thumbnail is clicked or selected, and the layout automatically adapts to the selected thumbnail position — either below or to the right of the main image. Key features include: 🔄 Dynamic hero image transitions with adjustable animation duration. 🎞️ Thumbnail navigation supporting hover previews and click-to-view interaction. ⌨️ Keyboard navigation using arrow keys for quick browsing. 🧭 Configurable layout — place thumbnails on the bottom or right side. ⚙️ Customizable settings for spacing, aspect ratios, opacities, and more through Framer’s property controls. Perfect for portfolios, product showcases, or creative galleries , this component combines ease of customization with smooth UX animations — all inside Framer’s visual design environment.

Rank history

Daily rank per list, from the first snapshot — lower is better.

125015001750188838/148/228/309/79/15
  • All · #8883