Author: | bitshadow |
---|---|
Views Total: | 973 views |
Official Page: | Go to website |
Last Update: | May 13, 2015 |
License: | MIT |
Preview:

Description:
Iconate is a lightweight JavaScript library helps you create CSS3 powered transformation animations between icons. Currently supports 19 animation types, you can add your own animation in the iconate.css.
How to use it:
Include the iconate.min.css
in the head section of the document. The CSS file includes 19 predefined fancy animations created by CSS3 transforms:
- rollOutRight
- rollOutLeft
- rubberBand
- zoomOut
- zoomIn
- fadeOut
- fadeOutRight
- fadeOutLeft
- fadeOutTop
- fadeOutBottom
- horizontalFlip
- verticalFlip
- bounceOutBottom
- bounceOutTop
- bounceOutLeft
- bounceOutRight
- rotateClockwise
- rotateAntiClockwise
- tada
Include the iconate.js
JavaScript library in your document.
<script src="dist/iconate.js"></script>
The JavaScript to create a basic transform animation between icons.
var iconElement = document.getElementById('icon'); // selector var options = { // Current icon class name from: 'fa-bars', // Final icon class name to: 'fa-arrow-right', // animation type animation: 'zoomOut' }; iconate(iconElement, options);
Full API.
// ELEMENT: Icon Element to perform operations on. // CALLBACK: Optional callback to execute after animation completes. iconate(ELEMENT, OPTIONS, CALLBACK)