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:

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.

View all contributions by

Website: http://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 116

Comments are closed.
    • 2

      Thanks Sara, yes we are using some of those… like I mention right in the beginning ;)

  1. 6

    @MaryLou I posted the comment after viewing the demo and before reading through the article :P

  2. 7

    Nice way to implement this effect, i bet someone will use this in a news feed.

  3. 8

    Hi !

    I try to use that in a div “overflow-y: auto”, i have hide the scroll in the body.

    In AnimOnScroll.js, i have change :
    var docElem = window.document.documentElement;
    by
    var docElem = document.getElementById( ‘work_content’ ); // work_content its my div with the “overflow-y:auto” propertie.

    But no result, any one can help ??

    Any way thank for this super job !

    Thank !

  4. 9

    Fantastic job. I am always inspired by your contributions. My only criticism might be the inclusion of the Detroit Tigers grid item.

  5. 10

    (Y) awesome ,, thank for sharing this Mary,, and thank you for Hakim too :)

  6. 12

    Mary Lou, many thanks for the tutorial! Awesome, this is what I was looking for my new website!

  7. 14

    Super boulot Mary,

    I am always inspired by your contributions, thank you for this great job..

    Le bonjour de Paris

  8. 15

    hi!! nice effects!! question. because i try to implement this with a block of divs with content, not images
    ej:

    bla bla bla bla
    bla bla bla bla
    bla bla bla bla
    bla bla bla bla
    bla bla bla bla
    bla bla bla bla
    bla bla bla bla

    all blocks has width:100%

    i change all the mentions on the code.. but it’s not working..
    any ideas?

  9. 21

    So, the AnimOnScroll script is required for this effect? It cannot be done with pure CSS?

Comments are closed.