TimelineMax issue animating SVG width vs scaleX

[Pexcil]

Hi,

 

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

[Jonathan]

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?

 

Resources:

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

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

 

[Pexcil]

Hi Jonathan,

 

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

 

Any ideas on that?

[Carl]

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

 

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

 

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

[Pexcil]

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.

[Carl]

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

 

Carl