Create Material Design Hierarchical Timing Transitions with jQuery and CSS3

Hierarchical Timing is a meaningful transition introduced in Google Material Design that focuses your users' attention in an app or how an app element got from point A to point B. In this post we're going to use jQuery to create the subtle hierarchical timing transition effect by adding specific delays for CSS3 transitions & transforms to a list of elements.

How to use it:

1. Create a list of elements on your web page.

<ul class="hierarchical-timing">
  <li></li>
  <li></li>
  <li></li>
  ...
</ul>

2. The core CSS/CSS3 styles.

.hierarchical-timing > * {
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}
.hierarchical-timing > .animated {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  -o-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}

3. Load the latest version of jQuery library at the end of the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

4. The Javascript to enable the hierarchical timing transition on page loaded.

(function($) {
  var speed = 900;
  var container =  $('.hierarchical-timing');  
  container.each(function() {   
    var elements = $(this).children();
    elements.each(function() {      
      var elementOffset = $(this).offset(); 
      var offset = elementOffset.left*0.8 + elementOffset.top;
      var delay = parseFloat(offset/speed).toFixed(2);
      $(this)
        .css("-webkit-transition-delay", delay+'s')
        .css("-o-transition-delay", delay+'s')
        .css("transition-delay", delay+'s')
        .addClass('animated');
    });
  });
})(jQuery);

---

This awesome jQuery plugin is developed by Kupletsky Sergey. For more Advanced Usages, please check the demo page or visit the official website.