How to create a pizza chart

[rscarpim]

Hello everyone.

 

I'm looking for some example of pizza chart animation.

 

Thank you everyone.

 

Best regards

[PointC]

There are probably some charts running around the forum here, but you'll probably have better luck and find a larger variety of examples at CodePen. Have you tried a search over there for some chart demos?

[rscarpim]

Hey PointC thank you for your reply.

 

Yes I tried some CodePen but unsuccessfully so far.

 

But I'll look again for that.

 

Thank you. 

[PointC]

Yeah, if you have some demo you like, we can point you in the right direction of how to animate it. A lot depends on what you're creating. Will the pieces be dynamically generated or will you be creating a simple SVG chart? What will the wedges need to do, etc. GSAP can certainly handle all the animation whether you use DOM, SVG, canvas, WebGl. 

 

Good luck with your search.

 

[rscarpim]

Hey Pointc.

 

My idea is create a <img> inside a wrapper and animate the pizza, so it's a DOM animation.

So probably it's kind of "static" content.

 

I had an example to animate bars. 

 

        var timeline = new TimelineLite({ paused: true }),
            $chart  = $('.su__comp-chart'),
            $x_axis = $chart.find('.su__chart-x-axis'),
            $y_axis = $chart.find('.su__chart-y-axis'),
            $axis_labels = $('.su__chart-axis-label'),
            $bar_1  = $('#su__chart-bar-1'),
            $bar_2  = $('#su__chart-bar-2');

        timeline

            .staggerFrom($axis_labels, 0.5, { opacity: 0 }, 0.1)
            .add([
                TweenLite.fromTo($bar_1, 2, { height: '1%' }, { height: '56%' }),
                TweenLite.fromTo($bar_2, 2, { height: '1%' }, { height: '54%' })
            ]);

And them play.

 

timeline.play();

[ZachSaucier]

Hey rscarpim and welcome to the forums.

 

Could you please create a demo of your situation in something like a CodePen? Then let us know where you're getting stuck and maybe some more detail about how  you're wanting it to animate. The post below provides more information on how to do so:

 

 

[rscarpim]

Thank you ZachSaucier