Menu and Thumbnail Stack Animation

An animation on an image stack for a menu where the images are rearranged from a column to a row.

From our sponsor: Front-end developers, save time and convert designs to pure React, Vue and HTML code using Anima

Today I would like to share a small menu animation with you. It’s just a simple proof-of-concept to investigate how to animate a vertical image stack in a horizontal. This is incorporated into a menu that also expands its entries literally by letter to add some interesting movements.

The initial display is the menu, and when we hold the cursor over an item, the vertical stack appears on the back of the menu with an error animation. It changes depending on the current floating element:

When we click on an item, the letters and the decorative circle expand, while the stack thumbnails are rearranged from a column to a series of images:

The whole movement in action:

I hope you like this demo and find it inspiring!

Video optimization for the Internet simplified with ImageKit

William

Leave a Reply

Your email address will not be published.