Material Design Hierarchical Display 1.0.1

 

The jQuery plugin for Material Design hierarchical display animation effect

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.

Install

Download: 1.0.1 (ZIP)
Bower: bower install material-design-hierarchical-display
NPM: npm install material-design-hierarchical-display

Demo

Demo site.
All demo site files you can find here.

Usage

Add CSS and JS files to your page:

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="zmd.hierarchical-display.min.css">
<!-- You need to include jquery.zmd.hierarchical-display.js after jQuery. Requires jQuery 1.7+. -->
<script src="jquery.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="jquery.zmd.hierarchical-display.min.js"></script>

Add elements that you want to display

<!-- It is parent element -->
<div data-animation="hierarchical-display">
  <!-- All children (regardless of the tag name) in parent element would be animated, after plugin starts -->
  <div></div>
  <div></div>
  <div></div>
</div>

Via data attribute

Add data-animation="hierarchical-display" to parent element that contains children elements which you want to display - for display elements on page loads (on event document.ready).

Via JavaScript

Also you can activate plugin manually from JavaScript:

$('.zmd-hierarchical-display').hierarchicalDisplay();

Toggle animation

If you want to toggle your animation you should add data-toggle="hierarchical-display" and a data-target to the control element to automatically assign control of a hierarchical displaying element. The data-target attribute accepts a CSS selector to apply the display to.

<!-- It is parent element -->
<div id="parent" data-animation="hierarchical-display">
  <!-- All children (regardless of the tag name) in parent element would be animated, after plugin starts -->
</div>
<!-- This element will toggle animation -->
<a href="#" data-toggle="hierarchical-display" data-target="#parent">Toggle animation</a>

Documentation

Stylesheet

The MD Hierarchical Display plugin utilizes a few classes to handle the heavy lifting:

.zmd-hierarchical-display hides the content
.zmd-hierarchical-display.in shows the content
.zmd-hierarchical-displaying is added when the animation starts, and removed when it finishes

These classes can be found in component.less.

You don't need to add the class zmd-hierarchical-display to the displaying element - it will be added automaticly. If you'd like it to default close, add class zmd-hierarchical-display, for default open, add the additional class in.

Also it require CSS animation from animation.less. But you can easily change it to your favorite animation library - for example animate.css.
Demo with animate.css on CodePen

Options

All options of the plugin can be set via the corresponding data attributes, for example: data-speed for speed option or data-animation-in for animationIn option.

####action: string
Method that should be executed when you call the plugin.
default: show

####speed: number
Plugin speed. You can use decimal values, for example: 0.1.
default: 5

####animationIn: string
Animation CSS class that should be added to displaying element when element is showing.
default: zoomIn

####animationOut: string
Animation CSS class that should be added to displaying element when element is hiding.
default: zoomOut

####debug: boolean
Spams your console with information about the events.
default: false

Methods

####.hierarchicalDisplay(options):
Initializes the plugin with an optional options object and starts working.

$('.zmd-hierarchical-display').hierarchicalDisplay({
  speed: 10
})

####.hierarchicalDisplay('show'):
Shows a displaying element.

####.hierarchicalDisplay('hide'):
Hides a displaying element.

####.hierarchicalDisplay('toggle'):
Toggles a displaying element to shown or hidden.

Events

Material Design Hierarchical Display plugin exposes a few events for hooking into displaying functionality.

####show.zmd.hierarchicalDisplay:
This event fires immediately when the show instance method is called.

####shown.zmd.hierarchicalDisplay:
This event is fired when a displaying element has been made visible to the user (will wait for CSS animations to complete).

####hide.zmd.hierarchicalDisplay:
This event fires immediately when the hide instance method is called.

####hidden.zmd.hierarchicalDisplay:
This event is fired when a displaying element has been hidden from the user (will wait for CSS animations to complete).

$('#myDisplayingElement').on('shown.zmd.hierarchicalDisplay', function () {
  // do something…
})

Version number

The version of plugin can be accessed via the VERSION property of the plugin's constructor:

$.fn.hierarchicalDisplay.Constructor.VERSION // => "1.0.1"

Licence

The MIT License (MIT). Please see License File for more information.

Browser Support

• Chrome 4+
• Firefox 16+
• Opera 12.1+
• Safari 4+
• IE 10+
• Android Browser 4+
• Not supported in Opera Mini

Browser support specified in accordance to caniuse.com portal (you can check CSS3 2D Transforms and animation).

Changelog

v1.0.1:

• make some internal optimizations

Versioning

Material Design Hierarchical Display will be maintained under the Semantic Versioning guidelines as much as possible. Releases will be numbered with the following format:
<major>.<minor>.<patch>

Author

• Email: [email protected]
• Twitter: https://twitter.com/zavoloklom
• GitHub: https://github.com/zavoloklom
• CodePen: http://codepen.io/zavoloklom
• Dribble: https://dribbble.com/zavoloklom

Donate

• You can support me via PayPal, WebMoney or Gratipay