Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

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

  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.

  • 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 | IE | Opera | Safari | --- | --- | --- | --- | --- | 4+ | 16+ | 10+ | 15+ | 6+ |

License

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

About

Transform your icons with trendy animations.

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.