How To Use

NPM

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

$ npm install --save kute.js

Require and CommonJS

var KUTE = require("kute.js");

// start tweening
var myTween = KUTE.to(translateX:150).start();

ES6/ES7

import KUTE from 'kute.js'

let myTween = KUTE.to(translateX:150).start();

Working Locally

Download latest master from github, copy files from dist folder to your app/assets/js/ folder, then add the following code, the best would be to put it at the end of your body tag:

<script src=".app/assets/js/kute.min.js"></script> <!-- KUTE.js -->
<script>
  // Your awesome animation coding here.
</script>

CDN

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

<script src="https://cdn.jsdelivr.net/npm/kute.js@2.0.0/kute.min.js"></script> <!-- KUTE.js -->
<script>
  // Your awesome animation coding here.
</script>

An alternate CDN link here:

<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/2.0.0/kute.min.js"></script> <!-- KUTE.js -->
<script>
  // Your awesome animation coding here.
</script>

Legacy Browsers

While KUTE.js v2.x doesn't actively support proprietary legacy browsers CSS properties, there are some workarounds you can play with: create a custom build to handle the properties you want to support on legacy browsers, set ways to detect the browsers and give them spacial tween objects.

Some browsers don't actually support many properties, for instance 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, one of the things you can actually do is to use the Microsoft's syntax for it's own legacy browsers, and here is the full reference on that. For legacy browsers in general there is are tons of options for targeting them: there you go.

Some internal scripting require polyfill for a select set of legacy browsers, and KUTE.js comes with a solution based on minifill.

<script src="https://cdn.jsdelivr.net/npm/kute.js@3.0.0/polyfill.min.js"></script> <!-- polyfill -->
<script src="https://cdn.jsdelivr.net/npm/kute.js@3.0.0/kute.min.js"></script> <!-- KUTE.js -->
<script>
  // Your awesome animation coding here.
</script>

An alternate CDN link here:

<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/3.0.0/polyfill.min.js"></script> <!-- polyfill -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/3.0.0/kute.min.js"></script> <!-- KUTE.js -->
<script>
  // Your awesome animation coding here.
</script>