Image Stack Intro Animation

Two simple intro animations where an image stack moves to become a grid.

By in Playground on
Demo Code

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!

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.

SVG Overlay and Infinite Menu Background Animation

Dynamic CSS Masks with Custom Properties and GSAP

Circular SVG Text Animation

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!