Flip Horizontal Gallery
A sideways rail where the image you click grows into its own story.
The Flip Horizontal Gallery lays the whole offering along one sideways rail. Scroll through it, click the one you want, and that photograph glides and grows into a full detail view while everything else drops away. Click back and it returns to exactly where it was standing.
How it works
The page scrolls sideways instead of down, with smooth easing on the wheel and on touch. When a visitor clicks an image, the page records exactly where it is, moves that same element into the detail layout, then animates the difference between the two positions, so the photograph is never duplicated or cross faded, it simply travels and grows. The rest of the rail wipes downward out of view at the same time, and the description slides up in lines beside it. Closing runs the whole thing in reverse and the image returns to its own place in the rail.
When to use it
Dressed here as a wood fire restaurant, it suits menus, product lines, artist rosters and project lists, anything that is a set of equals rather than a ranked feed. Six to ten items with one good photograph and a short piece of writing each is all it needs.
Why it works
Because the image keeps its identity through the transition, the visitor never loses track of what they clicked, which is the flaw in almost every lightbox on the web. The sideways motion also slows people down. They browse at the pace of a shelf rather than a feed, and that pace is exactly what considered products need.
Recommended for
- Restaurants and menus
- Product lines
- Artist and talent rosters
- Project showcases
Common questions
Why scroll sideways?
A horizontal rail reads like a menu or a shelf rather than a feed, which suits a set of equals such as dishes, products or projects. It also makes the page feel unlike the rest of the web, which is the point on a site meant to be remembered.
Is the image reloaded when it opens?
No. The same element moves into the detail layout and animates from its old position to its new one, so there is no flicker and no second download, and the transition stays smooth even on a phone.
Where does the effect come from?
It follows a public CodePen by Moussa Mamadou combining horizontal smooth scrolling with a position flip animation, shared under CodePen's MIT licence for public pens and rebuilt here as a restaurant site.