Image Stack Intro Animation

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

From our sponsor: Elevate all your marketing with Mailchimp Smarts.

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!

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.