Create Material Design Hierarchical Loading Animations Using JavaScript and CSS3

Category: Animation , Javascript | December 5, 2014
Author: arjancodes
Views Total: 2,772
Official Page: Go to website
Last Update: December 5, 2014
License: MIT

Preview:

Create Material Design Hierarchical Loading Animations Using JavaScript and CSS3

Description:

Makes use of JavaScript and CSS3 transitions/transforms to create hierarchical loading effects on a set of grids. Inspired by Google Material Design Hierarchical Timing.

How to use it:

Create a list of items that will animate in one by one.

<ul>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
</ul>

The required CSS/CSS3 for the  Hierarchical Timing transition animations.

* { box-sizing: border-box; }

ul { list-style-type: none; }

li {
  float: left;
  width: 10%;
  height: 50vh;
  background: lightskyblue;
  -moz-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
  opacity: 0;
  border-bottom: 2px solid #b8e2fc;
  -moz-transition: all .3s ease-out;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

li:nth-child(odd) { background: #56baf8; }

li.show {
  opacity: 1;
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
}

The Javascript.

var item = document.querySelectorAll('.demo');

(function animate(counter) {
  
  setTimeout(function() {

    item[counter].classList.add('show');

    counter++;

    if(counter < item.length) animate(counter);

  }, 60);
  
})(0);

You Might Be Interested In:


Leave a Reply