KUTE.js

Tween Options

Common Options

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

• duration: 500 option allows you to set the animation duration in miliseconds. The default value is 700.
• repeat: 20 option allows you to run the animation of given tween multiple times. The default value is 0.
• delay: 500 option allows you to delay the tween animation for a certain number of miliseconds. The default value is 0.
• offset: 200 option is only for .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.
• repeatDelay: 500 option allows you to set a number of miliseconds delay between repeatable animations. If repeat option is set to 0, will produce no effect. The default value is 0.
• yoyo: true/false option makes use of the internal reverse functionality to also animate from end to start for a given tween. This option requires that you use the repeat option with at least value 1. The default value is false.
• easing: 'easingCubicInOut' option allows you to use a custom easing function for your animation. For more info on the easing functions, you need to see the example pages. The default value is linear.

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.

• perspective: 500 option allows you to set a 3D transformation perspective for a given HTML element. No default value.
• perspectiveOrigin: "50% 50%" option allows you to set a perspectiveOrigin for a given HTML/SVG element. This option has no default value and only accepts valid CSS values according to it's specs.
• parentPerspective: 500 option allows you to set a 3D perspective for the parent of the HTML element subject to the transform animation.
• parentPerspectiveOrigin: "50% 50%" option allows you to set a 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.
• transformOrigin: "50% 50%" option allows you to set a transformOrigin for the HTML 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].

SVG Plugin Options

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

• morphPrecision: Number option allows you to set the sampling size of the morph. The lesser value the better visual but the more power required.
• morphIndex: Number option allows you to rotate the second/end path in a way that the points travel the least possible distance during morph, and as an effect the morph animation feel more "natural".
• reverseFirstPath: true when is true this option allows you to reverse the draw direction of the FIRST shape.
• reverseSecondPath: true when is true this option allows you to reverse the draw direction of the SECOND shape.

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.

• start: function option allows you to set a function to run once tween animation starts.
• update: function option allows you to set a function to run on every frame.
• pause: function option allows you to set a function to run when animation is paused.
• resume: function option allows you to set a function to run when animation is resumed.
• stop: function option allows you to set a function to run when animation is stopped.
• complete: function option allows you to set a function to run when animation is finished.

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

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.

• Share