Home

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

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

Basic Usage

  1. Include the Stylesheet and Javascript files in your html.

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

    <i id="icon" class="fa fa-bars fa-lg"></i>
    
  3. 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);
    
  4. 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.

Browser Support

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

License

Copyright (c) 2015 Jignesh Kakadiya, http://bitshadow.github.io Licensed under the MIT license.