Loading Effects for Grid Items with CSS Animations

Some inspiration for loading effects of grid items using CSS animations.
Grid Loading Effects

From our sponsor: Try Mailchimp today.

Today we’d like to share some loading effects for grid items with you. The idea is to show items in a grid with an animation once they are in the viewport. The possibilities are infinite and we’d like to give you some inspiration. Some of the effects are from the awesome CSS3 scroll effects by Hakim El Hattab and the idea is inspired by the tile animation seen in the Google Plus app.

Since Masonry is a popular library for laying out grids, we thought it might be a good idea to use it in this demo. If you’d like to use something else or no library at all, you’ll have to remove the initialization from the script and adjust the selectors etc. That should be pretty straightforward.

Please note: this only works as intended in browsers that support the respective CSS properties. Modern browsers only!

The beautiful illustrations featured in the demos are by Erika Mackley. Visit her website Erika Noel Design or check out her shop. If you’d like your artwork to be featured in one of our demos just contact us.

So, we’ll use an unordered list for the grid and we’ll simply add the respective effect class:

<ul class="grid effect-4" id="grid">
	<li><a href="http://drbl.in/fWMM"><img src="images/1.jpg"></a></li>
	<li><a href="http://drbl.in/fWPV"><img src="images/2.jpg"></a></li>
	<li><a href="http://drbl.in/fWMT"><img src="images/3.jpg"></a></li>
	<li><a href="http://drbl.in/fQdt"><img src="images/4.png"></a></li>
	<!-- ... -->

The idea is to add a class to the items already shown in the viewport when we load the page. The items that will appear when we scroll them into the viewport will get a class called animate. In the CSS we define the animation that will happen for each effect and the individual styles that are needed:

/* Effect 4: fall perspective */
.grid.effect-4 {
	perspective: 1300px;

.grid.effect-4 li {
	transform-style: preserve-3d;

.grid.effect-4 li.animate {
	transform: translateZ(400px) translateY(300px) rotateX(-90deg);
	animation: fallPerspective .8s ease-in-out forwards;

@keyframes fallPerspective {
	100% { transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }

There are a couple of things that we can set. For adding some randomness, you can define a minimum and a maximum duration of the animation. Items that are appearing in the viewport will have an animation duration between those values. The viewportFactor defines how much of the appearing item has to be visible in order to trigger the animation. For example, if we’d use a value of 0, this would mean that it would add the animation class as soon as the item is in the viewport. If we were to use the value of 1, the animation would only be triggered when we see all of the item in the viewport (100% of it).

new AnimOnScroll( document.getElementById( 'grid' ), {
		minDuration : 0.4,
		maxDuration : 0.7,
		viewportFactor : 0.2
	} );

Note that we had to remove the transitions for Masonry so that there’s no conflict with the animations.

I hope you enjoyed this little experiment and find it inspiring!

Tagged with:

Mary Lou

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.


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

Feedback 116

Comments are closed.
    • +1 I cant find how to append, preprend, or reload items using masonry. Now way to call it.

  1. why your files alway break my other jquery scripts? what must i do to prevent this?

  2. may i ask ?… when i put that tutorial with angular.. why it cannot work well.. the masonry didnt loaded the images.. so it only divine one item in list order

  3. First, this is is a really cool tutorial like every other tutorial you guys make.
    I have a quick question.
    Is there a way to make the scroll trigger on a certain div instead of window?

  4. Can you please tell me how to access Masonry methods with the AnimOnScroll Masonry instance? I want to use reload or append methods.

    great work btw 🙂


  5. Hello! This is a great plugin that I would like to implement into my site, but I seem to be having an issue that others are experiencing. I’m trying to implement this without using masonry (removed init from script, what else?), but after loading everything, the images on my site will not load. Thanks for the help in advance!

  6. Hello! I would like to implement this into my site, but I am confused on how to do it without using masonry. I understand that you have stated to remove the init, but changing the “selectors, and etc” has got me confused. Any help would be appreciated thank you!

  7. Hi..

    How can add pagination or limit to this script, since I have over 500 images for a category and it takes really long to load, hence can I load images in set of 50. What changes I need to make. Please help.


  8. simple fix for li: “height:auto” solves many problems(without it “li” were overlaying):