tweening svg attributes with greensock tweenlite (js version)

Question

I want to use greensock's js animation platform to tween the radius of an svg circle, but it doesn't seem to be working, and I didn't see anything in the documentation about tweening attributes, only css properties. Is this possible? I essentially have this:

<circle r="17.451467196282987" data-rad="17.451467196282987"></circle>

and am trying to do this:

TweenLite.to($('circle'), .5, {r:25});

I tried doing this with jquery and it didn't work either, but I'd accept either method.

Answer 1

I think that it must be the way jQuery and TweenMax/Lite target the property of the element.

I have managed to get it to work using TweenLite by creating an object with a property. You can then tween the property and apply it back to the element as follows.

$(document).ready(function(){

            var o = {r : $('circle').attr('r')};

            TweenLite.to(o, 2, {r:100, onUpdate:onUpdateHandler, onComplete:ocCompleteHandler});

            function onUpdateHandler(){
                $('circle').attr('r', o.r);
            }
            function ocCompleteHandler(){
                alert('end');
            }

    });

js fiddle here http://jsfiddle.net/g9g6M/10/

Hope this helps.