Inspiration for Grid Loading Animations

A set of grid loading animations for your inspiration. The idea is to show grid items with an interesting effect once they are loaded.

GridLoadingAnimations_800x600

View demo Download source

Today we’d like to share a set of simple, inspirational loading animations for grid items with you. The idea is to show some image grid items with a (subtle) animation after loading has finished. For the demo we have three slightly different grid layouts with different gutters and column numbers.

We use Dave DeSandro’s Masonry for the grid layout and Julian Garnier’s anime.js for the animations.

The images used in the demo are from Unsplash.com and Pexels.com. The beautiful images in the third grid are by photographer Valeria Boltneva.

This demo is kindly sponsored by FullStory. If you would like to become a demo sponsor, you can find out more here.

Attention: Please note that we are using some modern web techniques that are not supported in older browsers.

GridLoadingAnimations_01

We hope you enjoy the effects and find them inspirational!

References and Credits

View demo Download source

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

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.