Animated Grid Previews

A template where one can switch between little image previews that are scattered around the page. The images animate to a grid once an "explore" link is clicked.
Animated-Grids-Layout_Featured

Today we’d like to share another CSS grid-powered template with you. The idea is to show a navigation and some scattered images in the background that have a slight parallax effect. Once the “explore” link is clicked, the seemingly randomly placed items animate to their final position in a grid. Each grid has its own unique layout. Once the animation is done, the whole thing becomes scrollable and a content area shows beneath the grid.

The animations are powered by TweenMax.

Attention: Note that we use modern CSS properties like CSS Grid and CSS Custom Properties that are not supported in older browsers.

Initially, we show a navigation where the first item is selected. The preview of the image grid items is shown which are randomly scattered over the viewport:

Animated-Grids-Layout_01

When we click on another navigation item, we switch the grid preview by vertically animating the images and squishing them a bit. Depending on the position of the navigation item, we either move the images up or down.

AnimatedGridsLayout

Once we click on the “explore” link, the menu items disappear and all images start to animate to their position in a grid. The scale up and become brighter. The page is now scrollable and we can view the content beneath the grid.
Animated-Grids-Layout_02

Clicking on the top arrow will bring us back to the preview state with the navigation.

We hope you like this little effect and find it useful!

References and Credits

Previous:
Next:

Tagged with:

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.

View all contributions by

Website: http://www.codrops.com

Related Articles

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

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.