Menu and Thumbnail Stack Animation

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.

Image Stack Intro Animation

Today I want to share a simple intro animation with you. The concept is to first show an image stack and then animate each image to its position in the grid (or any other layout).

For the first demo, I actually used a simple serial layout and added some smooth scrolling with Locomotive Scroll. The animations are powered by GSAP.

The inspiration for this animation came from this beautiful intro animation Dribbble shot by Gil.

In the first demo the stack images move to a simple consecutive layout:

In the second demo, the images move to their respective position in the grid:

I really hope you have fun with this and thanks for checking it out!

The post Image Stack Intro Animation appeared first on Codrops.