tweening svg attributes

[danehansen]

hey i have noticed that some svg specific attributes will be tweened without using the AttrPlugin and {attr: {}} syntax, and some will. is this a feature that is currently in works or is there a reason that only some but not all of those attributes work that way? thank you.

[Carl]

Hi Dane,

 

Can you provide a simple demo of SVG attributes being tweened without the AttrPlugin? 

My quick test did not reveal any issues

 

http://codepen.io/GreenSock/pen/yydBgX

 

it appears all the animated changes are being applied to the inline style.

 

Thanks

 

Carl

[jniac]

It seems that we cannot animate the "r" attribute of the circle, or i'm doing something wrong.

 

Ok. It seems that, by default, you can only tween attribute that make sense for the CSS (element.style, eg:"fill").

However native attributes of svg element could be animated using the attr{ } syntax.

 

See the Pen PzQZgP by jniac (@jniac) on CodePen.

[Carl]

jniac,

 

Yes, it is a little tricky with svg as things like fill are both attributes and also css properties. In your demo it's important to note that the tween set an inline style for the fill which has more specificity than the attribute. After the tween the circle looks like this:

<circle cx="50" cy="50" r="5" fill="#FF0055" style="fill: blue; opacity: 0.5; transform: matrix(0.5, 0, 0, 0.5, 12.5, 12.5);"></circle>

[GreenSock]

Yep, Carl is right - it's tricky because there are overlaps in SVG between attributes and CSS properties. You can easily control which ones you want to tween in GSAP by segregating them into either css:{} or attr:{}. By default, for example, if you animate the "x" of an SVG and you've got CSSPlugin loaded, it'll assume you want to animate the transform (translateX()). But if you want to animate the "x" attribute, you can just use attr:{x:100}. And "fill" is both an attribute and a CSS property. So once again, GSAP assumes you want to animate the CSS property but you can easily tell it to do otherwise by wrapping it in attr:{}. There's no "r" css property, so that's why you can't just natively animate that via CSS (gotta use AttrPlugin). 

 

Does that help at all?