Image Reveal Accordion is an interactive category list where hovering over a row smoothly expands it and reveals a collection of images. The titles and thumbnails animate upward from an overflow-hidden mask for a clean, editorial feel. On mobile, rows switch to a tap-to-expand layout with wrapping image grids.
Hover-to-expand rows on desktop
Tap-to-expand interaction on mobile
Smooth spring-based row transitions
Staggered image reveal animation
Images positioned left or right
Responsive image wrapping on mobile
Optional default active row
Static-render optimized for Framer
Built with Framer property controls, so you can adjust the layout, images, colors, typography, borders, transitions, and reveal animation directly from the right panel.
Categories and image collections
Row padding and open/closed heights
Image size, spacing, radius, and position
Colors and borders
Typography
Spring speed, stiffness, damping, and mass
Reveal duration, stagger, delay, distance, and easing
Hover over a category to expand the row and reveal its images. Moving away collapses it back into a compact row. On screens below 450px, the interaction changes to tap/click and the images wrap into a responsive grid