Callbacks

after / afterAll()

returns itself

Furthermore, you can add callback methods using after()/afterAll():

rect.animate(3000).move(100, 100).after(function(situation) {
  this.animate().attr({ fill: '#f06' })
})

// or
rect.animate(3000).move(100, 100).afterAll(function() {
  this.animate().attr({ fill: '#f06' })
})

The function gets the situation which was finished as first parameter. This doesn't apply to afterAll where no parameter is passed
Note that the after()/afterAll() method will never be called if the animation is looping eternally.
You can call after()/afterAll() multiple times to add more functions which should be executed.

during / duringAll()

returns itself

If you want to perform your own actions during one/all animation you can use the during()/duringAll() method:

var position
  , from = 100
  , to   = 300

rect.animate(3000).move(100, 100).during(function(pos, morph, eased, situation) {
  position = from + (to - from) * pos
})

// or
rect.animate(3000).move(100, 100).duringAll(function(pos, morph, eased, situation) {
  position = from + (to - from) * pos
})

Note that pos is 0 in the beginning of the animation and 1 at the end of the animation.

To make things easier a morphing function is passed as the second argument. This function accepts a from and to value as the first and second argument and they can be a number, unit or hex color:

var ellipse = draw.ellipse(100, 100).attr('cx', '20%').fill('#333')

rect.animate(3000).move(100, 100).during(function(pos, morph, eased, situation) {
  // numeric values
  ellipse.size(morph(100, 200), morph(100, 50))

  // unit strings
  ellipse.attr('cx', morph('20%', '80%'))

  // hex color strings
  ellipse.fill(morph('#333', '#ff0066'))
})

The eased parameter contains the position after the easing function was applied.
The last parameter holds the current situation related to the current during call.
You can call during()/duringAll() multiple times to add more functions which should be executed.

Fork me on GitHub