Jump to content


tweening svg attributes

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

Link to comment
Share on other sites

Hi Dane,


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

My quick test did not reveal any issues




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





  • Like 1
Link to comment
Share on other sites

  • 1 year later...

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

Link to comment
Share on other sites



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>
  • Like 2
Link to comment
Share on other sites

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? 

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.