Elastic Expanding Gallery
Five panels side by side, and the one you click springs open.
The Elastic Expanding Gallery lines up five upright panels like spines on a shelf. Click one and it springs open with a soft elastic bounce to reveal the series title, category and a call to action, while the other panels compress and desaturate beside it.
How it works
Each panel holds a narrow resting width until it is hovered or tapped, then stretches open while its neighbours give up room to make space. The elastic feel comes from the easing curve, which overshoots slightly before settling rather than moving at a constant speed.
When to use it
Use it to present a small set of distinct bodies of work: five photo series, five service lines, five destinations. It rewards curation, so pick the five strongest stories rather than trying to squeeze in ten.
Why it works
The spring easing is the difference between an interface and an experience. Visitors click every panel just to feel the motion again, which means they see all five stories instead of only the first. Dimming the closed panels keeps full attention on the open one.
Recommended for
- Photography and film studios
- Agencies with focused service lines
- Travel and destinations
- Project showcases
Common questions
What is an expanding image gallery?
A row of narrow panels where the one you point at opens wide and the others compress. It lets a page offer many images in the space of one, because only the image being considered takes up real estate.
How does it work on a phone where there is no hover?
Hover becomes tap. The panel a visitor touches expands and the rest close, which is the same interaction with a different trigger. Nothing depends on a mouse being present.
Why use this instead of a normal grid?
A grid shows everything at one size and lets the eye skim past all of it. This pattern forces a choice, and the act of opening a panel is a small commitment that makes the visitor look properly at what they opened.