kute.js

A minimal native Javascript tweening engine with jQuery plugin, forked from tween.js with most essential options for web developers, designers and animators. Unlike the original script, KUTE.js delivers easy to use methods to set up high performance animations on the fly.

kute.js is like a merge of my own jQueryTween with tween.js, but generally it's a much more smarter build. You link the script at your ending </body> tag and write one line to do just about any animation you can think of.

CDN

Thanks to jsdelivr, we have CDN link here.

Basic Usage

At a glance, you can write one line and you're done.

//vanilla js
new KUTE.fromTo('selector', fromValues, toValues, options);

//with jQuery plugin
$('selector').KUTE('fromTo', fromValues, toValues, options);

Advanced Usage

Quite easily, you can write 'bit more lines and you're making the earth go round.

//vanilla js
KUTE.fromTo(el, {
  //options
    { translate: 0, opacity: 1 }, // fromValues
    { translate: 150, opacity: 0 }, // toValues
    { duration: 500, delay: 0, easing	: 'exponentialInOut', // basic options
    
      //callbacks
      start: functionOne, // run function when tween starts 
      complete: functionTwo, // run function when tween animation is finished
      update: functionThree // run function while tween running    
      stop: functionThree // run function when tween stopped    
      pause: functionThree // run function when tween paused    
      resume: functionThree // run function when resuming tween    
    }
  }
);

Demo

For documentation, examples and other cool tips, check the demo.

#jQuery Plugin That's right, there you have it, just a few bits of code to bridge the awesome kute.js to your jQuery powered projects/apps. The plugin can be found in the /master folder.

What else it does

handles all kinds of transform properties and makes sure to always use the same order of the transform functions (translate, rotate, skew, scale)
computes properties' values properly according to their measurement unit (px,%,deg,etc)
properly handles cross browser 3D transform with perspective and perspective for element or it's parent
converts HEX colors to RGB and tweens the inner values, then ALWAYS updates color via RGB
properly replaces top, centered or any other background position with proper value to be able to tween
for most supported properties it reads the current element computed style property value as initial value (via currentStyle || getComputedStyle)
allows you to add many callbacks: start, update, complete, pause, stop, and they can be set as tween options
since translate3D is best for performance, kute.js will always use it
accepts "nice & easy string" easing functions, like linear or easingExponentialOut (removes the use of the evil eval, making development safer easier and closer to standards :)
uses all 31 Robert Penner's easing functions, as well as bezier and physics easing functions
handles browser prefixes for you for transform, perspective, perspective-origin, border-radius and requestAnimationFrame
all this is possible with a core script of less than 20k size!

Browser Support

Since most modern browsers can handle pretty much everything, legacy browsers need some help, so give them polyfills.io.

Contributions

Dav aka @dalisoft contributed a great deal for the performance and functinality of KUTE.js
Ingwie Phoenix: RequireJS/CommonJS compatibility and usability with common package managers
Others who contribute to the project

License

MIT License

4.1 KiB Raw Blame History