Share Posted February 2, 2015 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 1 Link to comment Share on other sites More sharing options...
Share Posted February 2, 2015 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/ 2 Link to comment Share on other sites More sharing options...
Author Share Posted February 2, 2015 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 More sharing options...
Share Posted February 2, 2015 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 2 Link to comment Share on other sites More sharing options...
Author Share Posted February 3, 2015 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 More sharing options...
Share Posted February 3, 2015 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now