DrawSVGPlugin, Part 2

[Five&Done]

I'm just about set with the DrawSVG plugin for what I need to to do. Wondering if anyone has a best practice for getting circle stroke percentages set by DrawSVG to update while Tweening the radius of the circle. So far this almost works: 

 

//SET INITIAL VALUE

TweenMax.to($("#path"), 0, {drawSVG:"40% 60%"});

 

//ATTEMPT TO TWEEN RADIUS OF CIRCLE SMALLER AND GROW VISUAL STROKE ARC, RESULT LOOKS LIKE A ROTATION WAS APPLIED
TweenMax.to($("#path"), 1, {drawSVG:"30% 70%", attr:{r:90}, delay:3});

 

//RUN SAME THING AGAIN AND PERCENT VALUES NOW WORK PROPERLY AS EXPECTED, BUT AFTER THE FACT
TweenMax.to($("#path"), 1, {drawSVG:"30% 70%", attr:{r:90}, delay:6});

 

Ultimately I am trying to achieve an animated stroke around a circle- the circle will change in size, but I'd like to keep the stroke at a specific weight and not just scale a parent container resulting in the stroke weight getting thinner/heavier. 

 

Thoughts? I'd do a Codepen but I am a novice and wouldn't know how to do that without exposing the purchased plugin.

Thanks! 

[PointC]

I'm not sure I follow that completely, but it sounds like you'd want to set:

 

vector-effect="non-scaling-stroke"

 

More info:

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/vector-effect

 

Regarding CodePen demos, you can use CodePen safe plugins. The easiest  way is to fork this demo.

See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen.

Hopefully that helps. Happy tweening.

 

[PointC]

Okay, I just re-read your question and I think I understand what you're asking. You want to set a specific drawSVG percentage and then increase the radius of the circle, but not have the stroke move during the radius animation? You mentioned it looked like the stroke rotated as the radius animated. That's because the path length is changing. You can update the drawSVG percentage during radius animation via an onUpdate call.

 

See the Pen rrzVzP by PointC (@PointC) on CodePen.

 

Does that help at all? Happy tweening.