0

iconate

Transform your icons with trendy animations.

Official Site
Github repo
Main metrics

Github stars Tracking Chart

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.

Overview

Name With OwnerAlexanderPoellmann/PaymentFont
Primary LanguageCSS
Program languageJavaScript (Language Count: 1)
Platform
License:MIT License
Release Count10
Last Release Name1.2.5 (Posted on )
First Release Namev1.0.0 (Posted on )
Created At2014-09-21 22:41:24
Pushed At2017-12-21 11:26:03
Last Commit At2017-12-21 12:26:02
Stargazers Count1.6k
Watchers Count36
Fork Count134
Commits Count79
Has Issues Enabled
Issues Count167
Issue Open Count100
Pull Requests Count4
Pull Requests Open Count0
Pull Requests Close Count4
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private
To the top