KUTE.js

Getting Started

Welcome to KUTE.js API documentation, here we're going to talk about how to download, install, use, control and set up cross browser animations, in great detail. KUTE.js can be found on CDN and also npm and Bower repositories with all it's features and tools.

Bower and NPM

You can install KUTE.js package by using either Bower or NPM.

$ npm install --save kute.js
# Or
$ bower install --save kute.js

Require and CommonJS

// CommonJS style
var kute = require("kute.js"); //grab the core
require("kute.js/kute-svg"); // Add SVG Plugin
require("kute.js/kute-css"); // Add CSS Plugin
require("kute.js/kute-attr"); // Add Attributes Plugin
require("kute.js/kute-text"); // Add Text Plugin

// AMD style
define([
    "kute.js",
    "kute.js/kute-jquery.js", // optional for jQuery apps
    "kute.js/kute-svg.js", // optional for SVG morph, draw and other SVG related CSS
    "kute.js/kute-css.js", // optional for additional CSS properties
    "kute.js/kute-attr.js", // optional for animating presentation attributes
    "kute.js/kute-text.js" // optional for string write and number incrementing animations
], function(KUTE){
    // ...
});

Websites

In your website add the following code, the best would be to put it at the end of your body tag:

<script src="https://cdn.jsdelivr.net/kute.js/1.6.5/kute.min.js"></script> <!-- core KUTE.js -->

An alternate CDN link here:

<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.5/kute.min.js"></script> <!-- core KUTE.js -->

The CDN repositories receive latest updates here and right here. You might also want to include the tools that you need for your project:

<script src="https://cdn.jsdelivr.net/kute.js/1.6.5/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
<script src="https://cdn.jsdelivr.net/kute.js/1.6.5/kute-css.min.js"></script> <!-- CSS Plugin -->
<script src="https://cdn.jsdelivr.net/kute.js/1.6.5/kute-svg.min.js"></script> <!-- SVG Plugin -->
<script src="https://cdn.jsdelivr.net/kute.js/1.6.5/kute-text.min.js"></script> <!-- Text Plugin -->
<script src="https://cdn.jsdelivr.net/kute.js/1.6.5/kute-attr.min.js"></script> <!-- Attributes Plugin -->

Alternate CDN links:

<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.5/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.5/kute-css.min.js"></script> <!-- CSS Plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.5/kute-svg.min.js"></script> <!-- SVG Plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.5/kute-text.min.js"></script> <!-- Text Plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.5/kute-attr.min.js"></script> <!-- Attributes Plugin -->

Your awesome animation coding would follow after these script links.

Targeting Legacy Browsers

You need to know when users' browser is a legacy one in order to use KUTE.js only for what browsers actually support. A quick note here: IE8 doesn't support any transform property or RGBA colors while IE9 can only do 2D transformations. Check the 2D transforms and the 3D transforms browser support list for more information.

Don't use Modernizr, the best thing you can actually do is to use the Microsoft's synthax for it's own legacy browsers, and here is the full refference on that. For other legacy browsers there is a ton of ways to target them, quite efficiently I would say: there you go.

• Share