Timing

at()

returns itself

Say you want to control the position of an animation with an external event, then the at() method will prove very useful:

var animation = draw.rect(100, 100).move(50, 50).animate('=').move(200, 200)

document.onmousemove = function(event) {
  animation.at(event.clientX / 1000)
}

The value passed as the first argument of at() should be a number between 0 and 1, 0 being the beginning of the animation and 1 being the end. Note that any values below 0 and above 1 will be normalized.

Also note that the value is eased after calling the function. Therefore the position specifies a position in time not in space.

delay()

returns itself

Alternatively, you can call delay() which will set a delay in ms before the next animation in the queue is run

rect.animate({ ease: '<', delay: '1.5s' }).attr({ fill: '#f03' }).delay(500).animate().dmove(50,50)

loop()

returns SVG.FX

By default the loop() method creates and eternal loop:

rect.animate(3000).move(100, 100).loop()

But the loop can also be a predefined number of times:

rect.animate(3000).move(100, 100).loop(3)

Loops go from beginning to end and start over again (0->1.0->1.0->1.).

There is also a reverse flag that should be passed as the second argument:

rect.animate(3000).move(100, 100).loop(3, true)

Loops will then be completely reversed before starting over (0->1->0->1->0->1.).

once()

returns itself

Finally, you can perform an action at a specific position only once. Just pass the position and the function which should be executed to the once method. You can also decide whether the position which is passed should be handled as position in time (not eased) or position in space (easing applied):

// the 0.5 is handled as uneased value (you can omit the false)
rect.animate(3000).move(100, 100).once(0.5, function(pos, eased) {
  // do something
}, false)
// the 0.5 is handled as eased value
rect.animate(3000).move(100, 100).once(0.5, function(pos, eased) {
  // do something
}, true)

The callback function gets the current position uneased and eased.

queue()

returns itself

If you want to call a custom funtion between two chained animations, you simply can queue them up:

rect.animate({ ease: '<', delay: '1.5s' }).attr({ fill: '#f03' }).queue(function(){

    this.target().fill('#000')
    this.dequeue() // dont forget to call dequeue when the queue should continue running

}).animate().dmove(50,50)
Fork me on GitHub