Loading Effects for Grid Items with CSS Animations

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

By in Playground on
Grid Loading Effects
Demo Code

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>
	<!-- ... -->
</ul>

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; }
}

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

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!

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.

Drawing 2D Metaballs with WebGL2

Push Animation on Grid Items

Image Tiles Menu Animation

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 116

Comments are closed.

  1. Thanks for a great tutorial… I want to do a same thing for my webpage but here u are inserting only images in grid but i require my div to be loaded inside grid.. how can i do?? can anyone help me.. pls pls pls

  2. Don’t know but I only can see 2 columns layout (as if the third column was hidden). Is anyone know why?

    Btw, nice work Mary Lou, the transitions are beautiful.

  4. I tried using the transitions. They work perfect when fullscreen. It do not work on responsive. I need to make the page responsive, so that these transitions work in phone tooo. Please Please let me know, if any solution.

  5. Hi guys I am trying to integrate this plugin with “thumbnai grid with expan preview” from here but those two seman like not going along for some reason, could someone help me with this , please ?

  7. One of my most favourite posts on this site. just stunning work!
    I’m using technique, inspired by Demo 6, and it all works well, but I don’t like how it looks on touch-enabled devices.

    The problem is that scroll event isn’t fired continuously, but only at the end of the user’s action (I’m sure you’re well aware of it).
    Did you managed to make it more natural on the mobile? (Meaning, that images are loaded continuously as user’s scrolling)

    P.S.
    If you like, I could show you my work when I’m finished.

  9. Thx for this mary Lou,

    as I have 3 grids in 3 tabs, how can I init the 3 id’s ? #grid, #grid2, #grid3 .Please?

    Great work anyway.

  10. Im trying to use this effect with 3 images across. I have set my container to width:1028px, with the first two containers at 348px, and the last at 332px,

    Like this:

    ___________________________container width:1028px_____________________________
    _____div1 width 348px_____ _____div2 width 348px_____ ___div3 width 332px___

    and it always bumps down div3 to the next line.

    Any help?

  11. Great effect-4, but it is problem. On page with images we are have some hidden content wich could be showed. it that case animation works not correctly. It “think” that pictures are on old coordinates. but it’s already has been moved under showed content.

    sorry if my english is not so good.

    • I was wrong. No problem with hidden content. Ploblem has with “Grid” which has big offsetTop (for example 3000px or more). “perspective-origin-y” calculate wrong for this grid.

  12. Is it possible to have the same effect when we scroll back up the page? can we unload the iamges out of view off the top of the page and when we scroll back up it also runs the load animation on the items coming back into view? A bit of code help would be awesome!!!

    thanks

  13. Hi, loving this script and would love to use, however I do not want to use Masonry. I am having trouble removing the Masonry initialisation. My javaScript is not great.

    I thought I can simply remove this from AnimOnScroll.js…

    new Masonry( self.el, {
    itemSelector: ‘div’,
    transitionDuration : 0
    } );

    .but it does not work.

    Would love to know what else I have to do? Thanks

    • I also want to remove the masonry part, and I did just like you but it is not working. For me it seems that the ‘shown’ class is not getting applied to the items, I’m not sure why. Any please let me know if you got this to work, or if anyone got this to work without masonry.

      Thanks!

  16. I have a requireJS and backbone setup. I was able to use the masonry AMD with my setup. I am trying to figure out how to use this plugin. I am loading each as a dependency in my view. But, getting many errors.

    define([ 'jquery', 'underscore', 'backbone', 'handlebars', '../models/BookModel', '../collections/BookCollection', 'text!tpl/books.html', 'modernizr', 'msnry', 'imagesLoaded', 'classie', 'animOnScroll' ], function($, _, Backbone, Handlebars, BookModel, BookColl, bookHB, Modernizr, Msnry, Images, Classie, AnimOnScroll){ .... new AnimOnScroll( document.getElementById( 'grid' ), { minDuration : 0.4, maxDuration : 0.7, viewportFactor : 0.2 } ); ....

  17. How to do it with ajax ? I mean loading 10images on page load and then when user scroll it fetches images via ajax ? can you give some example ?

  18. This is a great effect! I’m doing my best to manually customize a Photoshelter site and I’ve managed to get the masonry portion of this working. For some reason, though, it adds the class of shown to every li upon load. I haven’t been able to figure this out and just wanted to see if anyone could point me in the right direction here. Thanks!

  19. Is there any way to make the images already visible in the window/on load, to have the effect when they appear, instead of just appearing without the animation?

  20. Is it possible to make it 4-cloumns and 5-columns wide the grid?

    Thank You for those great effects!

  22. When used with jquery, there seems to be a conflict with the AnimOnScroll.js file with returning offsetTop. It works fine on chrome and safari, but on Firefox the “top: value is never returned on load unless the browser is resized.

    So what we have in firefox via firebug is:

    element.style {
    left: 0;
    position: absolute;
    }

    The target element is .grid li

    Anyone running into this?

  24. Hey, i got a problem with effect-6 (i don’t really think that the problem occurs because of the effect). When i scroll down the Images won’t appear. I copied the source code into mine, so it doesn’t seem that it wouldn’t work.
    But when i scroll down the animation doesn’t appear. All the images which aren’t in the viewport since the beginning are invisible but i can see my cursor changing when i hover over the positions where they would appear.

    hope someone can help me with that.

    Anyway nice tutorial!

  25. Hi, I’ve got an issue.

    I’ve got a 3 columns design with 100% height and width with scroll on each columns to show content. My design is responsive and at 1024px, it does collapse to have a classical look with one column set at 100%with and auto height.

    So I’m trying to make this thing works and it actually does in the one column layout but not 3 columns. I know where the issue comes from, it’s the 100% height but I’m a bit stuck on how to fix it.

    So is there a way to fix my issue ?

    Thanks for the help and for this awesome tuto btw !

  26. Hello,

    Nice tuto but I wonder how i could make this thing work when I’m scrolling in a specific div and not through the entire body. I set a 100% height div and the effect is not working : It doesn’t add the “animate” class to unshown element. I know that it’s because I’m scrolling the div and not the body but I don’t know how to fix it.

    If somebody could give me a clue, it would be nice !

    Thanks

  27. great tutorial! can you please help me how can i use this with php code? i want to rather load all the images through php code?

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

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

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

  36. 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?

  37. 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 🙂

    Thanks!

  39. 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!

  40. 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!

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

    Regards,
    Amit

  42. simple fix for li: “height:auto” solves many problems(without it “li” were overlaying):
    inkon.seinart.ru