Image Tiles Menu Animation

An animation featuring image tiles that transform into a full image when a menu item is clicked.

Today I’d like to share a little menu effect with you. Basically it’s an animation with image tiles that transform into a full image when a menu item is clicked.

The demo starts with a menu that overlays an image split into four tiles that are scattered around the menu. On hover, the image pieces change, depending on the menu item. When a user clicks on a menu item, the respective image tiles animate to form a full image and some more content is shown while the menu disappears.

Our initial view is the following:

When we choose a menu item and click on it, the image pieces animate to one whole image and the respective content appears:

Here we then have a slideshow mockup as an idea what we could show in this content screen.

This is how it looks in action:

Hope you enjoy this little animation and find it inspiring!

The images for this demo were generated with Midjourney.

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.