Experimental 3D Room Exhibition Layout


View demo Download source

Today we’d like to share an experimental 3D layout with you. The idea is to show some information about a gallery’s exhibition in an interesting way. Each artist has a “room” in the gallery which shows the schedule for the exhibition. When clicking on one of the navigation buttons, we move away from the current room and proceed to the next (or previous) one with an animation.

For this experiment we are using the animation library anime.js by Julian Garnier and imagesLoaded by David DeSandro.

Attention: Highly experimental! Please view with a modern browser that supports CSS 3D Transforms and CSS Flexbox.

Here are some screenshots of the different views of the layout.

The initial view is the first room of the gallery:

When navigating, we move to the next/previous room:

When clicking on the menu icon in the top right corner, we rotate the whole room and get a view from the top. An overlay is shows that contains a menu:

The info button triggers a special “Inception” effect :) The images start floating away from the wall as if gravity is defied:

We hope you enjoy this little experiment and find it inspiring!

References and Credits

View demo Download source

Experimental 3D Room Exhibition Layout was written by Mary Lou and published on Codrops.

Leave a Reply


"Kyle has helped our company’s image a lot by redesigning our logo, creating our new website and putting together some great, eye-catching ads. He’s very easy to work with and we were able to hit all of our deadlines."
Elliot Feder - Director of Business Development, SpringBoard Data Management
"Kyle has a natural talent for taking any idea I have and turning it into a visual work of art. He is a genius with layouts and overall concepts, the first person I call when I know a project needs to be done right."
Cheryl Bell, Executive Business Manager, Global Automotive Consultants