From our partner: The AI visual builder for Next.js & Tailwind:
"It's like Framer and v0 had a baby"
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.
