https://github.com/bitshadow/iconate
Transform your icons with trendy animations.
https://github.com/bitshadow/iconate
Last synced: 7 months ago
JSON representation
Transform your icons with trendy animations.
- Host: GitHub
- URL: https://github.com/bitshadow/iconate
- Owner: bitshadow
- Created: 2015-05-06T07:02:56.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2019-06-05T17:04:19.000Z (over 6 years ago)
- Last Synced: 2025-05-14T07:11:49.530Z (7 months ago)
- Language: JavaScript
- Homepage: https://bitshadow.github.io/iconate
- Size: 509 KB
- Stars: 1,977
- Watchers: 66
- Forks: 214
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-frontend - iconate - Transform your icons with trendy animations. (JavaScript Libs / Animation)
- awesome-frontend - iconate.js：将 icons 增加动画效果的 JS 库
- awesome-frontend - iconate.js：将 icons 增加动画效果的 JS 库
- awesome-front-end - iconate.js：将 icons 增加动画效果的 JS 库
README
# 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](http://bitshadow.github.io/iconate)
Installation
------------
- NPM: `npm install iconate`
- Bower: `bower install iconate`
- [Download zip](https://github.com/bitshadow/iconate/archive/master.zip).
**Note**: **iconate.js** also supports AMD and commonJS module pattern.
## Basic Usage
1. Include the Stylesheet and Javascript files in your html.
```html
```
2. Create icon element.
```html
<i id="icon" class="fa fa-bars fa-lg"></i>
```
3. Animate icon from `fa-bar` to `fa-arrow-right` with `rubberBand` animation.
```js
var iconElement = document.getElementById('icon');
var options = {
from: 'fa-bars',
to: 'fa-arrow-right',
animation: 'rubberBand'
};
iconate(iconElement, options);
```
3. 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
-------
Copyright (c) 2015 Jignesh Kakadiya, http://bitshadow.github.io
Licensed under the [MIT license](http://opensource.org/licenses/MIT).