JavaScript Library To Create Transform Animations Between Icons – Iconate

Category: Animation , Javascript | May 13, 2015
Author: bitshadow
Views Total: 941 views
Official Page: Go to website
Last Update: May 13, 2015
License: MIT

Preview:

JavaScript Library To Create Transform Animations Between Icons – Iconate

Description:

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)

You Might Be Interested In:


Leave a Reply