4

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.

mheavers
  • 29,530
  • 58
  • 194
  • 315

2 Answers2

4

you can animate attr values directly now

ex: TweenLite.to("#rect", 1, {attr:{x:100, y:50, width:100, height:100}, ease:Linear.easeNone});

check out on GSAP Website http://greensock.com/docs/#/HTML5/GSAP/Plugins/AttrPlugin/

bernard
  • 86
  • 4
3

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.

r8n5n
  • 2,059
  • 17
  • 23
  • This bit just saved my day :) Note you can also use this.target instead of $('circle') in the onUpdateHandler function. – hvgeertruy Oct 13 '14 at 11:54