Menu and Thumbnail Stack Animation

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

Today I’d like to share a little menu animation with you. It’s just a simple proof-of-concept to explore how to animate a vertical image stack into a horizontal one. This is incorporated in a menu that also expands its items letter by letter to add some interesting motion.

The initial view is the menu and when we hover an item, the vertical stack appears in the back of the menu with a glitch animation. It changes depending on the current item hovered:

When we click on an item, the letters and the decorative circle expand while the thumbnails of the stack rearrange from a column into a row of images:

The whole motion in action:

I hope you like this demo and find it inspirational!

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 in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!