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.
These options affect all types of tweens, no matter the properties used or context.
.allTo() and .allFromTo() methods. This allows you to set a base delay in miliseconds that increases with each element in the collection.
This has no effect on other methods and the default value is 0.repeat option is set to 0, will produce no effect.
The default value is 0.repeat
option with at least value 1. The default value is false.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.
perspective for a given HTML element. No default value.perspectiveOrigin for a given HTML element. This option has no default value and only accepts valid CSS values according to
it's specs.perspective for the parent of the HTML element subject to the transform animation. No default value.perspectiveOrigin for the parent of the HTML element subject to the transform animation. Also like the above similar
options, this options only accepts valid CSS values and has no default value.transformOrigin for the HTML/SVG element subject for the transform animation. Starting KUTE.js 1.6.0 this option also aplies to
SVG transforms featured with the SVG Plugin. This options only accepts valid CSS values for CSS3 transforms, but keep in mind that for both CSS3 transform and SVG transform attribute KUTE.js will always
think of "50% 50%" as the default value, even if most browser's default value for SVG transform origin is "0px 0px 0px" and the reason is simply consistency all round. When applied to a
svgTransform property, it can also accept array values: transformOrigin: [250,250]. There is no default value but the SVG Plugin will always use
50% 50% for your transform tweens.The following options only affect animation of the path tween property, to customize the SVG morph animation. See SVG Plugin page.
true this option allows you to reverse the draw direction of the FIRST shape.true this option allows you to reverse the draw direction of the SECOND shape.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.
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();
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.
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.