Inspiration for Grid Loading Animations


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 and 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.


We hope you enjoy the effects and find them inspirational!

References and Credits

View demo Download source

Inspiration for Grid Loading Animations was written by Mary Lou and published on Codrops.

Leave a Reply


"Kyle has helped our company’s image a lot by redesigning our logo, creating our new website and putting together some great, eye-catching ads. He’s very easy to work with and we were able to hit all of our deadlines."
Elliot Feder - Director of Business Development, SpringBoard Data Management
"Kyle has a natural talent for taking any idea I have and turning it into a visual work of art. He is a genius with layouts and overall concepts, the first person I call when I know a project needs to be done right."
Cheryl Bell, Executive Business Manager, Global Automotive Consultants