How To Use

NPM

You can install KUTE.js package via NPM.

$ npm install --save kute.js

Require and CommonJS

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

// start tweening
var myTween = KUTE.to('#target', {translateX:150}).start();

ES6/ES7

import KUTE from 'kute.js'

var myTween = KUTE.to('#target', {translateX:150}).start();

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/[email protected]/kute.min.js"></script>
<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>
<script>
  // Your awesome animation coding here.
</script>

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>
<script>
  // Your awesome animation coding here.
</script>

Custom Builds

I'm sure many of you would like to create custom builds and KUTE.js comes packed with rollup build scripts you can work with to deliver your ideas instantly. Create a new file kute.js/src/index-custom.js, paste the following code (this is from the index.js with added comments):

import {version as Version} from './../package.json'
import Util from './objects/Util.js'
import Components from './objects/Components.js'
import Objects from './objects/Objects.js'
import Process from './process/Process.js'
import Internals from './core/Internals.js'
import Render from './core/Render.js'
import Interpolate from './objects/Interpolate.js'
import CubicBezier from 'cubic-bezier-easing'
import Easing from './easing/easing-bezier.js' // and CubicBezier easing functions
import Selector from './util/selector.js'

// TweenConstructor
import Tween from './tween/tween.js'
import TweenCollection from './tween/tweenCollection.js' // comment out if you don't want to use the allTo() and allFromTo() methods

import to from './interface/to.js'
import fromTo from './interface/fromTo.js'
import allTo from './interface/allTo.js' // comment out if you don't need tweenCollection feature
import allFromTo from './interface/allFromTo.js' // comment out if you don't need tweenCollection feature

// import Animation from './animation/animationDevelopment.js' // use whatever Animation class you want
import Animation from './animation/animation.js'

// import components' objects
// add/remove/replace any component 
import essentialBoxModelOps from './components/boxModelEssential.js'
import colorsOps from './components/colorProperties.js'
import attrOps from './components/htmlAttributes.js'
import opacityOps from './components/opacityProperty.js'
import textWriteOps from './components/textWrite.js'
import transformOps from './components/transformFunctions.js'
import scrollOps from './components/scrollProperty.js'
import svgDrawOps from './components/svgDraw.js'
import svgMorphOps from './components/svgMorph.js'
import svgTransformOps from './components/svgTransform.js'

// initialize your components
const EssentialBoxModel = new Animation(essentialBoxModelOps)
const ColorProperties = new Animation(colorsOps)
const HTMLAttributes = new Animation(attrOps)
const OpacityProperty = new Animation(opacityOps)
const TextWrite = new Animation(textWriteOps)
const TransformFunctions = new Animation(transformOps)
const ScrollProperty = new Animation(scrollOps)
const SVGDraw = new Animation(svgDrawOps)
const SVGMorph = new Animation(svgMorphOps)
const SVGTransform = new Animation(svgTransformOps)

// export the GLOBAL !important
export default {
  Animation,
  Components: {
    EssentialBoxModel,
    ColorProperties,
    HTMLAttributes,
    OpacityProperty,
    TextWrite,
    TransformFunctions,
    ScrollProperty,
    SVGDraw,
    SVGMorph,
    SVGTransform
  },

  Tween, // Tween Constructor
  fromTo, // Tween Interface
  to, // Tween Interface
  TweenCollection, // Tween Collection
  allFromTo, // Tween Collection Interface
  allTo, // Tween Collection Interface

  Objects,
  Util,
  Easing,
  CubicBezier,
  Render,
  Interpolate,
  Process,
  Internals,
  Selector,
  Version
}

Save your file then execute this command in your kute.js/trunk folder:

npm run custom INPUTFILE:src/index-custom.js,OUTPUTFILE:dist/my-custom-build.js,MIN:false,FORMAT:cjs

Build Options

• INPUTFILE - allows you to specify the source file path
• OUTPUTFILE - allows you to specify the output file path
• MIN - when true, it will compress the output
• FORMAT - umd|cjs|esm and any format you specify or configure your rollup for

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 special 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/[email protected]/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/kute.min.js"></script>
<script>
  // Your awesome animation coding here.
</script>

An alternate CDN link here:

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

Remember: the polyfill must be added to your document before KUTE.js.