Tween

Overview

KUTE.js comes with three Tween constructor versions that are responsible for creating your tween objects, the bread and butter of the JavaScript animation. In addition it comes with a useful tool to create multiple tween objects in a staggering effect.

Tween Base

The Tween Base class is the most basic constructor and covers the mininum required options and methods for animation and is the fastest in terms of performance.

Since most animations may not require options like repeat or yoyo or various other methods, and their effects can be reproduced with the most basic tween constructor, TweenBase might be the right tool for your light application.

Note: this class doesn't support to() and allTo() interface functions.

Tween Base Options:

• duration: 500 set the animation duration in milliseconds. Default: 700.
• delay: 500 set an animation delay in milliseconds. Default: 0.
• easing: 'easingCubicInOut' set an easing function for the animation. Default: linear.
• onStart: Function() set a callback function to be triggered when start() is called.
• onStop: Function() set a callback function to be triggered when stop() is called
• onUpdate: Function() set a callback function to be triggered by update() on every tick.
• onComplete: Function() set a callback function to be triggered when animation is complete.

Tween Base Methods:

• start() starts "ticking" and the animation for the tween object.
• stop() stops the animation for the tween object.
• update() executes the properties' update functions on each tick.
• close() stops the "ticking".

Tween Standard

The Tween extends the TweenBase class with a couple of additional methods and new options for convenience and enable more complex animations. This class overrides the update() method of the parent class mainly to enable additional methods and options.

This class is bundled with the official kute.js distribution file.

Standard Tween Options:

• duration: 500 (inherited) set the animation duration in milliseconds. Default: 700.
• delay: 500 (inherited) set an animation delay in milliseconds. Default: 0.
• easing: 'easingCubicInOut' (inherited) set an easing function for the animation. Default: linear.
• onStart: Function() (inherited) set a callback function to be triggered when start() is called.
• onStop: Function() (inherited) set a callback function to be triggered when stop() is called
• onUpdate: Function() (inherited) set a callback function to be triggered by update() on every tick.
• onComplete: Function() (inherited) set a callback function to be triggered when animation is complete.
• repeat: 5 set a number of repetitions for the animation. Default: 0.
• repeatDelay: 0 set a delay between repeated animations. Default: 0.
• yoyo when TRUE and the above repeat option is set to more than 0, every odd animation iteration will run backwards. Default: FALSE.
• onPause: Function() set a callback function to be triggered when pause() is used.
• onResume: Function() set a callback function to be triggered when resume() is used.
• onRepeat: Function() set a callback function to be triggered on each animation repetition.

Tween Standard Methods:

• start() (inherited) starts "ticking" and the animation for the tween object.
• stop() (inherited) stops the animation for the tween object.
• update() (inherited) executes the properties' update functions on each tick.
• close() (inherited) stops the "ticking".
• pause() pauses the animation for the tween object.
• resume() resumes the animation for the tween object.
• reverse() will replace valuesStart object with valuesEnd object of the tween object when yoyo is TRUE.
• chain() start the animation of another tween object when the current is complete.

Tween Extra

The Tween Extra class extends the above Tween class and provides additional methods and options as well as bringing some new experimental functionality. The class inherits all the parent class functionality and brings more functionality and convenience at the expense of negligible performance.

This is still a work in progress.

Tween Collection

The Tween Collection class creates a tween object for each Element in a selection like NodeList, HTMLCollection or Array of Element items. The class is used by allTo() and allFromTo() interface functions and was developed to ease your work with animation for multiple elements.

KUTE.js has a unique functionality that the Tween Collection class uses to make sure it calls the Tween constructor of your choice and inherits most of it's functionality, except Tween Base which has a completely different purpose.

The class will return an object with the following structure:

• tweens : [Array] holding the tween objects assigned to each element in the collection
• length : <Number> the number of items in the collection
• prototype : {Object} the methods associated to the object, see methods below

Tween Collection Options:

• duration: 500 set the animation duration in milliseconds. Default: 700.
• delay: 500 set an animation delay in milliseconds. Default: 0.
• offset: 100 set a staggering animation delay in milliseconds. Default: 0.
• easing: 'easingCubicInOut' set an easing function for the animation. Default: linear.

Tween Collection Methods:

• start(time) calls the start() method for each tween object
• stop() calls the stop() method for each tween object
• pause() calls the pause() method for all active tween objects
• resume() calls the resume() method for all paused and active tween objects
• chain(args) calls the chain() method for the last tween object
• playing() returns TRUE when at least one tween object in the collection is active
• removeTweens() when called it will clear the this.tweens array
• getMaxDuration() returns the total duration of all tween objects, including their delay and offsets