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.

By Manoela Ilic in Playground on October 31, 2018

Demo Code

From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!

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:

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.