JavaScript Library To Create Transform Animations Between Icons – Iconate

Category: Animation , Javascript | May 13, 2015
Views Total:981 views
Official Page:Go to website
Last Update:May 13, 2015


JavaScript Library To Create Transform Animations Between Icons – Iconate


Iconate is a lightweight JavaScript library helps you create CSS3 powered transformation animations between icons. Currently supports 19 animation types, you can add your own animation in the iconate.css.

How to use it:

Include the iconate.min.css in the head section of the document. The CSS file includes 19 predefined fancy animations created by CSS3 transforms:

  • rollOutRight
  • rollOutLeft
  • rubberBand
  • zoomOut
  • zoomIn
  • fadeOut
  • fadeOutRight
  • fadeOutLeft
  • fadeOutTop
  • fadeOutBottom
  • horizontalFlip
  • verticalFlip
  • bounceOutBottom
  • bounceOutTop
  • bounceOutLeft
  • bounceOutRight
  • rotateClockwise
  • rotateAntiClockwise
  • tada

Include the iconate.js JavaScript library in your document.

<script src="dist/iconate.js"></script>

The JavaScript to create a basic transform animation between icons.

var iconElement = document.getElementById('icon'); // selector
    var options = {
        // Current icon class name
        from: 'fa-bars',
        // Final icon class name
        to: 'fa-arrow-right',
        // animation type
        animation: 'zoomOut'
    iconate(iconElement, options);

Full API.

// ELEMENT: Icon Element to perform operations on.
// CALLBACK: Optional callback to execute after animation completes.

You Might Be Interested In:

Leave a Reply