Animating elements is very much the same as manipulating elements using the attr() method. The only difference is you have to include the animate() method.


returns SVG.FX

rect.animate().move(150, 150)

The animate() method will take three arguments. The first is duration, the second ease and the third delay:

rect.animate(2000, '>', 1000).attr({ fill: '#f03' })

Alternatively you can pass an object as the first argument:

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

By default duration will be set to 1000, ease will be set to <>.

You can chain multiple animations together by calling animate again:

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