bitshadow / iconate Goto Github PK

View Code? Open in Web Editor NEW

2.0K 67.0 215.0 521 KB

Transform your icons with trendy animations.

Home Page: https://bitshadow.github.io/iconate

JavaScript 54.78% CSS 45.22%

iconate's Introduction

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

| | | | | --- | --- | --- | --- | --- | 4+ ✔ | 16+ ✔ | 10+ ✔ | 15+ ✔ | 6+ ✔ |

License

iconate's People

Contributors

Stargazers

Watchers

Forkers

tvvocold nrhirani janusnic kingsofleone amaltiwari madole exexzian txd159 bpbhat77 nfons anandmahalakshmi colaborati alihalabyah thasophearak trfiladelfo biracunha hugoaverty pixelsonoro dslusser bhavesh1130 carabina lyrl djiesamsoe solankikrunal prosenjit-manna anoldasgupta artyom4d tuxmus midoooo umarmughal krittikorn glivera neojams kimpetersend1 2braincells2go lowcivicman99 ashgadala kakenyon32 mvaso85 harleybergo mrmax182 jakeho muthamizhan josemalcher elcorders nunodotferreira sunduslive alexgilev kdooley89 jourderui yubrajpokharel nbouherrou iwonasado optimix-designer franklinrony elanovita suzieee huyunzhen mubassirhayat uditmo2006 jbaginski chirox vlkz bradparks pixeleate jseiden chermanarun drooids bradvin savantos ofelix03 alexlaforge minidora iamcodingwait andriaripratama zaer ron-yu yashilanka mshaaban0 zenseo gartempe artesanus alimalibaev zhangjialiang jeffreywei cinolin zhanghongyan vj-chandera davelf greatrepos dhiralpandya jnahian onasusweb puhrome mathilderossi fengyiyi koffus e-studio2015 julianosousa kilobitman

iconate's Issues

rotateClockwise (rotateAntiClockwise) not working

Hi @bitshadow and thank you for your great job!

I saw that in order to get my icons to rotate I had to start the rotation from 0% and not only on 100%. In your demo I see it working without this but as you can see it doesn't on my JSFiddle example

My project consists of:
jQuery v2.1.3
Materialize v0.97 (http://materializecss.com)
Iconate v0.2.4

My fix:

@keyframes rotateClockwise {
    0% {
        opacity: 1;
        transform: rotateZ(0deg);
        transform-origin: center;
    }
    50% {
        opacity: 0;
        transform: rotateZ(180deg);
        transform-origin: center;
    }
    100% {
        transform: rotateZ(360deg);
        transform-origin: center;
        opacity: 1;
    }
}

@keyframes rotateAntiClockwise {
    0% {
        opacity: 1;
        transform: rotateZ(0deg);
        transform-origin: center;
    }
    50% {
        opacity: 0;
        transform: rotateZ(-180deg);
        transform-origin: center;
    }
    100% {
        transform: rotateZ(-360deg);
        transform-origin: center;
        opacity: 1;
    }
}

No jquery selectors compatibility

When instead of using 'document.getElementById('test')', you want to use jquery selector. It does not work and throw the following order :
a.addEventListener is not a function.

Should not be open to this kind of use ?

bower file

please add in the bower file to main "dist/iconate.min.css"
many thanks very cool lib

license header added twice

looks like your license is getting included twice in iconate/dist/iconate.min.js

Switch between "from" and "to" value

Hey, i would like to know, how to simply switch between from and to value like in your demo.
Thank you !

Inconsistent dropdown selection renders

When i select map marker and i select dropdown and select fade left i can see asterix fading left.
The concept of map marker is gone.

How to reproduce:

Select MapMarker
Select Asterix
Select FadeLeft

Animate CSS as dependency

Love this peace of code! But I was wondering why you're not simply use animate css as a dependency.

Not working - ionicons

first of all this is great plugin as far as i guess.Why i use guess you know it's not working for me.I have used ionicons for my project.After calling iconate css and js minified version.I have add

    var iconElement = document.getElementById('change');
var options = {
    from: 'ion-arrow-left-c',
    to: 'ion-arrow-move',
    animation: 'rubberBand'
};

iconate(iconElement, options);

Until not working.Any idea.
Thanks brother.

Use HTTPS for analytics script [site]

For certain browser setups, viewing the site in HTTPS means requests to non-HTTPS content will be blocked.