Trying to animate this pie graph, can it be done in wf?

Hi community,

I’ve been trying to create an interaction to animate the dark blue part of this pie chart. Starting with a sliver of dark blue and progressing until it reaches 62% (counter clockwise), but with no luck.

I’ve tried every tutorial or post I could find here and still am stuck at getting this to work. Any ideas would be greatly appreciated.

Thanks in advance.

ps. I can’t share my link as it contains sensitive financial data.

Hello,

I don’t think you can achieve that on Webflow yet.
I guess this king of graphic would be doable, playing with transform of DIVs.

I’ve been able to animate bar graphs with height interactions and that works well. Just trying to make that pie a little more tasty :cake:

thanks

Ahah i understand :wink:

I (kind of) got it playing ball.

Uses a few layers, the background gradient and rotation interactions. Needs to be tweaked.

http://pie-chart-animation.webflow.io/

https://preview.webflow.com/preview/pie-chart-animation?preview=1fd7b71b04b39baac6f25d18f651c766

2 Likes

@JamieBrown Awesome, that’s what I’m looking for. Cheers!

Great stuff. You’re welcome :slight_smile:

Here’s my take on what @JamieBrown got started on. Don’t forget to enjoy some animated pie this holiday season!

Uses 50% background overlays, z-index layering, and rotation/opacity interactions.

http://pie-animation-by-crusader.webflow.io/

Here is my public share link: https://preview.webflow.com/preview/pie-animation-by-crusader?preview=05cadadaa32fa9068bfc0ff0134c39f1
(how to access public share link)

1 Like