This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Dave Crow
Posted Feb 24 - Read on Facebook

Anyone have any tricks for doing a radial wipe animation on a pie chart? Something like this: https://dribbble.com/shots/2000368-Radial-Wipes

I tried using Josh Puckett’s SVG module, but getting all the pieces lined up is really difficult.

Ideally, I’d also be able to reverse it.

4 Comments

Jordan Robert Dobson

I have a circle animation using SVG up somewhere in this group that might be easier for you?

Dave Crow

I came up with a hack to make it work. But it's a prototype...so nothing wrong with hacks!

I used Josh Puckett's SVG module to create a white SVG mask for the pie chart. So I'm animating the mask instead of the chart itself. Works perfectly for the UI I'm working on!

Here's a demo:
http://share.framerjs.com/i4r2a22huhqc/

Jordan Robert Dobson

http://jrdn.io/0r1O2w0N3X2V - Here's a quick version of what I sent you.

Johannes Eckert

You can draw arcs yourself, once you understand the svg path commands like MoveTo, DrawTo, ArcTo and some trigonometry:

http://cloud.eckert.io/1p001P2M3T2N

I tried to make this with d3, but I always have a hard time getting behind some of the concepts. and d3's arcTween is no fun.

I ended up drawing svg arcs manually, after calculating all necessary angles for each data set, then I simply distribute the arcs between a start and an end angle, both can be set independently with an animation or sliders.
What's a bit wacky here is that all the SVG paths are removed and re-drawn to "animate" them. I don't know if there's a way to update/change an svg's path, but at least for this it's all happening fast and smooth.

Oh yeah, the code is pretty rough :)

Read the entire post on Facebook