#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
- NPM:
npm install iconate
- Bower:
bower install iconate
- Download zip.
Note: iconate.js also supports AMD and commonJS module pattern.
-
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
tofa-arrow-right
withrubberBand
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
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.
4+ ✔ | 16+ ✔ | 10+ ✔ | 15+ ✔ | 6+ ✔ |
Copyright (c) 2015 Jignesh Kakadiya, http://bitshadow.github.io Licensed under the MIT license.