Jump to content


TimelineMax issue animating SVG width vs scaleX

Moderator Tag
Go to solution Solved by Jonathan,

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



I am having an issue animating/tweening the width of a rect element within an SVG.


When using scaleX with a percentage value, the rect animated perfectly, however the SVG stroke scales with the box, which is not ideal, I would also prefer to specify a specific value as opposed to a percentage.


When using width with a pixel value (without appending "px"), the rect does not animate. If you inspect the element you will notice the animation being applied to the correct element, however the value being applied to the rect is specified in pixels with the "px" appended, which is not a value SVG elements recognise/respond to.


I hope my explanation makes sense. If anyone can shed some light on this it would be greatly appreciated.


Thank you.

See the Pen yyzgWE by pexcil (@pexcil) on CodePen

  • Like 1
Link to comment
Share on other sites

  • Solution

Hello Pexcil,


That happens with your demo2 because width is an attribute on that element. By default GSAP would think you are animating CSS width not an attribute named width:


Try using the attr:{} object to explicitly tell GSAP to animate the attribute named width:


Example of demo2 working:

See the Pen Qwqpyr by jonathan (@jonathan) on CodePen

var demo2 = new TimelineMax({repeat:-1, repeatDelay:0, yoyo:true});
demo2.to("#rect2", 1, {attr:{width:190}, transformOrigin:"50% 50%"});


Does that help?



CSSPlugin: http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/

AttrPlugin: http://greensock.com/docs/#/HTML5/Plugins/AttrPlugin/



  • Like 2
Link to comment
Share on other sites

Hi Jonathan,


Yes, that worked! Thank you, but there is one new issue though, the transformOrigin is now being ignored?


Any ideas on that?

Link to comment
Share on other sites

Hi Pexcil,


Thanks for creating the demo and posting here.


transformOrigin only applies to css-transforms: scale, scaleX, rotation, rotationX, rotationY, skewX, and skewY.


transformOrigin does not have any control over how the width and height attributes (although that was a great suggestion from Jonathan)


In order to scale an SVG but keep the stroke at its normal size it seems that vector-effect="non-scaling-stroke" works




info: http://www.w3.org/TR/SVGTiny12/painting.html#NonScalingStroke

  • Like 2
Link to comment
Share on other sites

Hi Carl,


Thanks very much, I continued working on it and realised that was the issue.


Thank you both very much for your assistance!


I have successfully refactored all my SVG SMIL animations to GSAP and they are now all working in IE and consistently across all browsers, very stoked!


Thanks again.

Link to comment
Share on other sites

Hi Pexcil,


Great job on your site http://www.pexcil.com/, really beautiful.

Love the animated SVG icons!


Thanks for the kind words on Twitter. Glad you are happy with GSAP.


Let us know if you need any more help



  • Like 1
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.