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.

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

Tagged with:

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.

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