FEATURE REQUEST: Variable width stroke animation

[swampthang]

Referencing this post by Blake - http://greensock.com/forums/topic/15152-drawing-in-a-mask-doesnt-completely-cover-line/#entry65724

 

It would be awesome if we were able to animate stroke width across the length of a path! Blake mentions that in the process you might be able to fix a browser masking issue we have no control over where there are overlapping strokes in a path due to higher stroke-width values.

[GreenSock]

Thanks for the suggestion. I'm curious how many other people would express significant interest in this. My gut says it's a very niche thing that only a tiny fraction of the audience would ever use, but I could totally be wrong. It's not a trivial thing to create, that's for sure. We've got our plate very full with quite a few other things that we're confident a much larger portion of the audience would benefit from, but we'll keep this on the radar, especially if more people express a need for it. Thanks again for the suggestion. 

[PointC]

I made a CodePen once where that feature would have been nice, but in the real world I'd tend to agree and say this would be something only a few would use on a regular basis. 

 

Just my 2 cents worth though.

[velshnia]

I'd like this feature to be implemented so I can animate an SVG pie chart.

[PointC]

Hi velshnia 

 

Welcome to the GreenSock forum.

 

I'm curious why you would need variable width strokes to animate an SVG pie chart? I made a demo last year that served up some slices of pie. I didn't have to use any variable width strokes. Maybe it could give you some ideas.

 

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

 

Happy tweening.

[velshnia]

I followed along with a post by Lea Verou to animate an SVG pie chart:

https://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/

(scroll down to 'SVG Solution')

 

...and I thought the easiest way to animate it would be by adjusting the stroke width. Your example is great, but it's much too complicated for the Undergraduates I'm teaching. I've only just introduced them to JS this Semester, so I'm not trying to make a chart that dynamically changes with data input, but rather one with pre-set values that animates its pie 'slices' once the DOM loads. Thanks for your idea, though.

[PointC]

ahhh... I see. I agree, my demo would not be very good for teaching new JS users.

 

Here's a super simple version of a pie chart with a draggable control.

 

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

 

It will look fine in Chrome, but FF and Edge will have some strangeness in the middle. You'll actually see the same oddity in the Smashing article graphics if you view it in either of those browsers. That strange overlap is one of the reasons I left a small hole in the middle of the chart on my Baking Pie Charts demo. I'm not really sure how to make it go away. I believe it's just a weird browser rendering issue that Chrome gets right and the others do not.

 

Hopefully that helps.

 

Happy tweening (& teaching)