Jump to content
GreenSock

swampthang

FEATURE REQUEST: Variable width stroke animation

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

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.

Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

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.

:)

  • Like 3
Link to comment
Share on other sites

  • 6 months later...

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

Link to comment
Share on other sites

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.

:)

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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)

:)

  • Like 2
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.
×