CODEWITHSUNDEEP
jqueryjquery-animatetweengsap
mheavers
mheavers

Reputation: 30178

tweening svg attributes with greensock tweenlite (js version)

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.

Upvotes: 4

Views: 5372

Answers (2)

bernard
bernard

Reputation: 86

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/

Upvotes: 4

r8n5n
r8n5n

Reputation: 2059

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.

Upvotes: 3

Related Questions