Animated Grid Previews

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.

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:

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.

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.

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

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.