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.

By in Playground on
Demo Code

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

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

We hope you enjoy the effects and find them inspirational!

References and Credits

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.

Mastering Theatre.js Animations: Learn to Create Dynamic Visuals

Tiny Grid Layout Animation

Thumbnail Hover Effect with SVG Filters

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 17

Comments are closed.

  1. Good loading effect @Mary_Lou, i think it’s better to add on scroll effect.

  2. Mary,

    Fantastic, as always. I would love to see a post about why you use anime.js as opposed to gsap. Thanks!

  3. I love these animations, but I would like to know how to use the animations and apply them to other images and implement it in other websites. How do I adress the animations on button presses or on page load. Just a bit more explenation would be nice 🙂

    • Works for me!!! I am happy. But, I have no clue how to make any one of them do the trick on page load. I am sure some sharp mind will figure it out and post the solution.

  6. I want to use “Shu” effect in my site on page load but I haven’t idea, How can I do? Give me solution please.

    • Hello if you want Shu effect on load go to main.js

      it should say function init() should be line 500
      just after body.classList.remove(‘loading’); line 523
      add this line
      loaders[currentGrid]._render(‘Shu’); line 524

  8. I find this inspiration very inspirational 🙂 like most of what Codrops proposes but…this time i fail to see the point… The effect is only active when clicking on a button, so that visitors will not get the animation when landing on the page, but only afterwards *and if* they choose to click (…and, so to speak, only “for the sake of it”) Or…am i missing something here ?? :/ o_O

    Anyway, big thanks for all the great things offered on codrops !!!

    • it should say function init() should be line 500
      just after body.classList.remove(‘loading’); line 523
      add this line
      loaders[currentGrid]._render(‘the effect’); line 524

  9. Thanks Mary for sharing this animation for grid items! This is beautiful! Is there any way to make the layout full-screen width? Maybe a 6-8 column layout?

  10. Excellent. I am interested in the effects without masonry, just my own divs…possible?

  11. Thanks luigi it works 🙂

    it should say function init() should be line 500
    just after body.classList.remove(‘loading’); line 523
    add this line
    loaders[currentGrid]._render(‘the effect’); line 524