Menu and Thumbnail Stack Animation
source link: https://tympanus.net/codrops/2021/09/22/menu-and-thumb-stack-animation/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Menu and Thumbnail Stack Animation
By Mary Lou in Playground on
September 22, 2021
From our sponsor: Front-end developers, save time and convert designs into clean React, Vue and HTML code using Anima
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!
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK