Streaming live at 10am (PST)

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


#1

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.


#2

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.


#3

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


#4

Ahah i understand :wink:


#5

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


#6

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


#7

Great stuff. You're welcome :slight_smile:


#8

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)


#9