Repeating Image Transition
Clicking a thumbnail sends a trail of copies flying into the full view.
The Repeating Image Transition turns a click into a piece of choreography. Pick a listing and the photograph appears to tear across the screen in a trail of copies, arriving as a full detail view with the text sliding up beside it. It takes about a second, and it is the second most memorable thing on the page after the work itself.
How it works
When a visitor picks an item, the page measures where the thumbnail sits and where the large image will land, then interpolates a chain of rectangles between the two along a gentle arc. A copy of the image is dropped at every step, and each copy wipes into view and out again on a short stagger, so the eye reads a single picture travelling across the screen rather than eight separate clones. The detail panel wipes in behind the trail and lands on the opposite side of the screen from wherever the thumbnail was.
When to use it
Built here for a property developer, it fits any catalogue where each item deserves a proper page of its own: homes, venues, case studies, artists, menu collections. It wants six to twelve items and one strong photograph each, since the transition puts that photograph under a spotlight.
Why it works
Most galleries make the visitor lose their place when a modal appears from nowhere. Here the movement explains itself, because the visitor watches their chosen image travel from the grid into the detail view, so they always understand where they are and how to get back. It is the rare flourish that makes a page easier to use rather than harder.
Recommended for
- Property and real estate
- Venues and spaces
- Case study libraries
- Editorial catalogues
Common questions
What is a repeating image transition?
It is a page transition where copies of the same image appear in sequence along the path between where it started and where it is going. The staggered wipe makes the picture look like it is streaking across the screen, which is far more expressive than a simple fade.
Does the panel always open on the same side?
No. The page checks which half of the screen the thumbnail was in and opens the detail on the opposite side, so the image never has to jump across the visitor's own cursor.
Where does the effect come from?
It follows the MIT licensed Codrops demo Repeating Image Transition, rebuilt here as a full property website with its own layout and content.