Image Tiles Menu Animation

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

From our sponsor:

Get personalized content recommendations to make your emails more engaging. Sign up for Mailchimp today.

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.

Case Study: Studiogusto

Source

×

Hi There!

× How can I help you?