Loading Effects for Grid Items with CSS Animations

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

Grid Loading Effects

View demo Download source

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

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!

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) 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://tympanus.net/

Related Articles

Feedback 97

  1. 1

    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.

    • 2

      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.

  2. 3

    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

  3. 5

    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

    • 6

      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!

  4. 9

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

    ....

  5. 10

    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 ?

  6. 11

    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!

  7. 12

    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?

  8. 15

    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?

  9. 17

    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!

  10. 18

    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 !

  11. 19

    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

  12. 20

    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?

Follow this discussion

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>