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.
iconate(ELEMENT, OPTIONS, CALLBACK)