Material Design Hierarchical Timing Animations Using jQuery and CSS3

A jQuery/CSS3 solution to create Material Design Hierarchical Timing animations that allow you to animate in/out a group of items with meaningful transitions using CSS3 transforms and transitions.

See also:

• Create Material Design Hierarchical Timing Transitions with jQuery and CSS3

How to use it:

1. Create a list of items.

<ul class="animation-demo">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    ...
</ul>

2. The core CSS/CSS3 for the Hierarchical Timing transitions

.animation-demo > * {
  -moz-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -webkit-transform: scale(0, 0);
  transform: scale(0, 0);
  -moz-transition: -moz-transform 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  -o-transition: -o-transform 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  transition: transform 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}

.animation-demo.animating-in > * {
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
}
.animation-demo.animating-out > * {
  -moz-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -webkit-transform: scale(0, 0);
  transform: scale(0, 0);
}

3. Load the required jQuery Javascript library on the web page.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

4. The Javascript to apply the Hierarchical Timing transitions on the list of items on page load.

(function(){ 
  var speed = 900,
  containers = document.querySelectorAll(".animation-demo");
  for(var c = 0; c < containers.length; c++){
    var container = containers[c],
        children = container.children;
    
    if(!container.classList.contains("delay-set")){
      container.classList.add("delay-set");
      
      for(var i = 0; i < children.length; i++){
        var child = children[i],
            childOffset = child.getBoundingClientRect(),
            offset = childOffset.left*0.8 + childOffset.top,
            delay = parseFloat(offset/speed).toFixed(2);
        
        child.style.webkitTransitionDelay = delay + "s";
        child.style.transitionDelay = delay + "s";
      }
    }
    container.classList.add("animating-in");
 }
})();

---

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