Interface Tween<T>

Things get more interesting when you sequence different tweens in order, i.e. setup one tween to start once a previous one has finished. We call this chaining tweens, and it’s done with the chain method. Thus, to make tweenB start after tweenA finishes:

More complex arrangements might require delaying a tween before it actually starts running. You can do that using the delay method:

Tween.js will perform the interpolation between values (i.e. the easing) in a linear manner, so the change will be directly proportional to the elapsed time. This is predictable but also quite uninteresting visually wise. Worry not–this behaviour can be easily changed using the easing method. For example:

For example, when the tween has just started (progress is 0), the interpolation function will return the first value in the array. When the tween is halfway, the interpolation function will return a value approximately in the middle of the array, and when the tween is at the end, the interpolation function will return the last value.

Executed when a tween is finished normally (i.e. not stopped). The tweened object is passed in as the first parameter.

Executed whenever a tween has just finished one repetition and will begin another. The tweened object is passed in as the first parameter.

Executed right before the tween starts animating, after any delay time specified by the delay method. This will be executed only once per tween, i.e. it will not be run when the tween is repeated via repeat().

Executed when a tween is explicitly stopped via stop(), but not when it is completed normally, and before stopping any possible chained tween.

Executed each time the tween is updated, after the values have been actually updated. The tweened object is passed in as the first parameter.

If you wanted a tween to repeat forever you could chain it to itself, but a better way is to use the repeat method. It accepts a parameter that describes how many repetitions you want after the first tween is completed:

Normally the delay time is applied between repetitions of a tween, but if a value is provided to the repeatDelay function then that value will determine the total time elapsed between repetitions of a tween.

So far we’ve learnt about the Tween.start method, but there are more methods that control individual tweens. Probably the most important one is the start counterpart: stop. If you want to cancel a tween, just call this method over an individual tween:

This function only has effect if used along with repeat. When active, the behaviour of the tween will be like a yoyo, i.e. it will bounce to and from the start and end values, instead of just repeating the same sequence from the beginning.