Tween Options

Any animation can be customized in many ways for duration, progress / easing, delay and even for specific plugins. Some of these options have a default value and starting with KUTE.js version 1.6.1 you can override these default values, as we'll see later on this page.

Common Options

These options affect all types of tweens, no matter the properties used or context.

Transform Options

These options only affect animation involving any 3D property from CSS3 transform and have no effect on other CSS properties. While you can set perspective or perspective origin via CSS, these options are here to help, especially with full browser support and preffix free handling.

SVG Plugin Options

The following options only affect animation of the path tween property, to customize the SVG morph animation. See SVG Plugin page.

Text Plugin Options

The only option for the plugin is the textChars option for the text property and allows you to set the characters set for the scrambling character during the animation. See Text Plugin page for more instructions and demo.

Callback Options

These options also affect all types of tweens, and are bound by the tween control options and the internal update functions.

A quick example would look like this:

//define a function
var callback = function(){
  //do some foo

//create object and start animating already
KUTE.fromTo(div,{left:150},{left:0},{complete: callback}).start();

Other Options

keepHex: true option allows you to always use HEX color format, even if you have used RGB or RGBA. This option is useful when tweening color properties on legacy browsers, however modern browsers may ignore this option for performance reasons.

Override Default Options' Values

Most options have a default value as you can see above, they are globally defined in the KUTE.defaultOptions object like so:

// the list of all tween options that can be overrided
KUTE.defaultOptions = {
    duration: 700,
    delay: 0,
    offset: 0, // allTo() or allFromTo() methods only
    repeat: 0,
    repeatDelay: 0,
    yoyo: false,
    easing: 'linear',
    keepHex: false,
    morphPrecision: 15, // SVG Plugin only
    textChars: 'alpha', // Text Plugin only

As some user suggested, he would need a way to override the default duration value, here's how to:

// sets the new global duration tween option default value
KUTE.defaultOptions.duration = 1000;

Also make sure to define the new option global default values before you define your tween objects.