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.


This content originally appeared on Codrops and was authored by Mary Lou

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.


This content originally appeared on Codrops and was authored by Mary Lou


Print Share Comment Cite Upload Translate Updates
APA

Mary Lou | Sciencx (2021-09-22T13:06:18+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 ,<https://www.scien.cx/2021/09/22/menu-and-thumbnail-stack-animation/>
VANCOUVER
Mary Lou | Sciencx - » Menu and Thumbnail Stack Animation. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/09/22/menu-and-thumbnail-stack-animation/
CHICAGO
" » Menu and Thumbnail Stack Animation." Mary Lou | Sciencx - Accessed . 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: ]
rf:citation
» Menu and Thumbnail Stack Animation | Mary Lou | Sciencx | https://www.scien.cx/2021/09/22/menu-and-thumbnail-stack-animation/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.