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.

The post Menu and Thumbnail Stack Animation appeared first on Codrops.

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!

The post Menu and Thumbnail Stack Animation appeared first on Codrops.


Print Share Comment Cite Upload Translate
APA
Mary Lou | Sciencx (2024-03-28T09:32:28+00:00) » Menu and Thumbnail Stack Animation. Retrieved from https://www.scien.cx/2021/09/22/menu-and-thumbnail-stack-animation/.
MLA
" » Menu and Thumbnail Stack Animation." Mary Lou | Sciencx - Wednesday September 22, 2021, https://www.scien.cx/2021/09/22/menu-and-thumbnail-stack-animation/
HARVARD
Mary Lou | Sciencx Wednesday September 22, 2021 » Menu and Thumbnail Stack Animation., viewed 2024-03-28T09:32:28+00:00,<https://www.scien.cx/2021/09/22/menu-and-thumbnail-stack-animation/>
VANCOUVER
Mary Lou | Sciencx - » Menu and Thumbnail Stack Animation. [Internet]. [Accessed 2024-03-28T09:32:28+00:00]. Available from: https://www.scien.cx/2021/09/22/menu-and-thumbnail-stack-animation/
CHICAGO
" » Menu and Thumbnail Stack Animation." Mary Lou | Sciencx - Accessed 2024-03-28T09:32:28+00:00. https://www.scien.cx/2021/09/22/menu-and-thumbnail-stack-animation/
IEEE
" » Menu and Thumbnail Stack Animation." Mary Lou | Sciencx [Online]. Available: https://www.scien.cx/2021/09/22/menu-and-thumbnail-stack-animation/. [Accessed: 2024-03-28T09:32:28+00:00]
rf:citation
» Menu and Thumbnail Stack Animation | Mary Lou | Sciencx | https://www.scien.cx/2021/09/22/menu-and-thumbnail-stack-animation/ | 2024-03-28T09:32:28+00:00
https://github.com/addpipe/simple-recorderjs-demo