Timeline API

The Timeline API is placed in SDK samples\animations\timeline directory, with two examples provided in samples\animations. It's modelled after GreenSock Animation Platform (GSAP), albeit much more limited. Nevertheless, it's recommended to start learning with excellent GSAP tutorials and docs to get overall idea of this API.

The Timeline API provides the following classes:

• class Tween animates DOM object properties, f.e. Tween($(#button), {duration:2}, {opacity:1; scale:1}, {opacity:0; scale:0}) animates the button appearance in 2 seconds.
• class TweenRepeater extends Tween with repeated animations (including endless).
• class Timeline is animation sequencer composing multiple animations in sequential, parallel and delayed ways.

All three classes expose render() function that you may call in canvasPaint or run by element.animate. The Timeline class also exposes function play() that runs animate on the object.

Module morph.tis

morph.tis exposes a lot of easing function in namespace Ease. Easing function is the function that returns point on some curve at specified time.

It also attaches morph(from/*Object*/, to/*Object*/, position = 0.0 ) function to Object, Array, Tuple and Element classes. Each morph function returns intermediate state between states defined by the object from (equivalent to position 0) and object to (equivalent to position 1), interpolating all properties contained in the objects. F.e. morph({x:0; y:0}, {x:100; y:200}, 0.33) will return {x:33; y:66} object.

Animated objects may have arbitrarily complex structure. Moreover, Element.morph simplifies animation of CSS properties by providing natural default values for undefined ones, such as opacity=1 and rotate=0.