Awesome

iconate.js

A call to transform your existing icons in a cool trendy way

iconate.js is a tiny performant library for cross-browser icon transformation animations in your projects.

Demo

Installation

NPM: npm install iconate
Bower: bower install iconate
Download zip.

Note: iconate.js also supports AMD and commonJS module pattern.

Basic Usage

Include the Stylesheet and Javascript files in your html.

<link rel="stylesheet" href="iconate.min.css">
<script type="text/javascript" src="iconate.min.js">

Create icon element.

<i id="icon" class="fa fa-bars fa-lg"></i>

Animate icon from fa-bar to fa-arrow-right with rubberBand animation.

var iconElement = document.getElementById('icon');
var options = {
    from: 'fa-bars',
    to: 'fa-arrow-right',
    animation: 'rubberBand'
};

iconate(iconElement, options);

Following AnimationTypes can be used in iconate call.
- rollOutRight
- rollOutLeft
- rubberBand
- zoomOut
- zoomIn
- fadeOut
- fadeOutRight
- fadeOutLeft
- fadeOutTop
- fadeOutBottom
- horizontalFlip
- verticalFlip
- bounceOutBottom
- bounceOutTop
- bounceOutLeft
- bounceOutRight
- rotateClockwise
- rotateAntiClockwise
- tada

Public API

iconate(element, [, options] [, callback] )

Animate an icon element.

element - Icon Element to perform operations on.
options - Object containing options to control the animation.
- from - Current icon class name (ex. 'fa-bars' in case of font-awesome)
- to - Final icon class name (ex. 'fa-arrow-right')
- animation - You can choose any animation from above listed animation types. (ex. 'fadeOutRight')(default: 'zoomOut')
callback - Optional callback to execute after animation completes.

Browser Support

Chrome | Firefox | | Opera | Safari | --- | --- | --- | --- | --- | 4+ ✔ | 16+ ✔ | 10+ ✔ | 15+ ✔ | 6+ ✔ |