Jump to content
GreenSock

kakarlus

drawSVG + radius bug?

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

Hi GSAP,

 

I'm trying to animate a circle svg to have a thicker stroke grow outside while using drawSVG and playing with the radius.

After animation the drawSVG is not working as expected, instead, it drew an arc less than 50% of the circle

 
svg:
<circle fill="none" id="lingin" stroke="#444444" stroke-width="0" stroke-miterlimit="10" cx="150" cy="125" r="100"/>
 
js:
TweenMax.to('#lingin', 3, {strokeWidth: 40, attr: {r: 120}, drawSVG: '0% 50%'});
 
hAJH33M.png
 
Regards,
Carlos
Link to comment
Share on other sites

Hi carlos,

 

It would really help if you can provide a very simple CodePen demo that replicates this issue.

You can just fork this demo http://codepen.io/GreenSock/pen/qEdoRE and add your svg and js code.

 

I suspect that things are working as designed as I'm pretty sure DrawSVG does calculations based on the percentages you pass in and the current length of the stroke (circumference of the circle). If you change the radius of the circle there is no way for DrawSVG to know that.

  • Like 2
Link to comment
Share on other sites

Hi Carlos,

 

I think Carl is exactly right - everything is working as it should be. When you tell drawSVG to animate to 50%, it will calculate the circumference of the circle. In your particular case that is approximately 628 units. It will then draw to 314. At the same time you are animating the radius by 20% which will  increase the circumference by 20% over the duration of the tween - giving you approximately 753. The 314 is only 41.6% of the 753 so it appears that the stroke did not draw to 50%, but based on the initial calculations, it did. 

 

Here is your data from above in a CodePen:

 

See the Pen RRzoOz by PointC (@PointC) on CodePen

 

I've set up a console.log to show the circumference at the beginning and the end of the timeline so you can see what I mean. I also added an additional tween to draw to 50%. You'll see that the second tween draws to the new 50% position because the radius animation has completed and the new length can be calculated.

 

Hopefully that makes sense and helps a bit.

 

Happy tweening.

:)

  • Like 4
Link to comment
Share on other sites

Hello Carl & PointC

 

oh ok i get it now thank you :) any work around for this?

 

Regards,

Carlos

Link to comment
Share on other sites

You could animate scale instead of the radius which would give you the same effect, but the circumference of the circle would not change. Here's a revised version of my pen from above with that option.

 

See the Pen EyBLQV by PointC (@PointC) on CodePen

 

Hopefully that helps.

 

Happy tweening.

:) 

  • Like 1
Link to comment
Share on other sites

Hello PointC,

 

i was hoping to achieve something like this 

See the Pen rLEvAB?editors=1010 by kakarlus (@kakarlus) on CodePen

 

the outer radius grows outside while the inside radius remains put, or at least not budge a lot

 

regards,

Carlos

Link to comment
Share on other sites

That will be a little tricky when you're animating the strokeWidth. SVG 1.1 will only align strokes to the middle. I think SVG 2.0 will have outer/inner aligned strokes, but for now you'll have to deal with the stroke in the middle. 

 

So what's happening is half of the stroke width is expanding to the middle of the circle and the other half is expanding outward. Getting the inner radius to stay put won't work. You have a couple of options:

  1. If this is going to be on a solid colored background, you can add a second circle with the same radius as the first over the top and set the fill to the background color. That will hide the part of the stroke animation that is expanding towards the middle.
  2. If this isn't going to be on a solid colored background, you could add a mask/clip-path so the inner part of expanding stroke is hidden.

Here's a revised version of my pen with a second circle that matches the background.

 

See the Pen grNzEj by PointC (@PointC) on CodePen

 

Hopefully that helps.

 

Happy tweening.

:)

  • Like 4
Link to comment
Share on other sites

#1 is a very clever solution PointC salute!

  • Like 1
Link to comment
Share on other sites

Great explanation PointC :)

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.
×