How To Animate A Pie Chart

Duration: 08:15

Step 1 - Understand The Project Structure

Begin by reviewing the composition of the pie chart. The chart is organized into multiple folders, with a dedicated strokes group that contains each colored slice as an individual stroke element. Labels are stored separately in their own folder.

Step 2 - Plan The Animation Order

Establish a clear sequence before animating. The large slices are animated first, followed by the smaller slices, and finally the labels. This three-part approach keeps timing manageable and ensures visual clarity.

Step 3 - Animate The First Large Slice

Select the largest slice, the blue one, and prepare to animate its stroke offset. Because the final state of the animation is already visible, work backward in time. Add a keyframe to the stroke offset properties, focusing on both the dashes value and the offset value. Instead of starting from a blank canvas, leave a small portion of the blue slice visible in the first frame. Set the offset to a partial value that reveals only a small segment.

Step 4 - Hide The Remaining Large Slices

Move on to the lilac slice and apply the same stroke offset animation approach. This time, match the dashes value exactly to the offset value so the stroke disappears completely at the starting frame. Repeat this process for the pink slice. At this stage, temporarily hide the remaining colors.

Step 5 - Add A Global Rotation

To avoid the slices simply appearing in place, animate the rotation of the entire strokes group folder. Add a rotation keyframe and set the first frame to a larger negative rotation, such as -180 degrees. Over the duration of the animation, allow the group to rotate back into alignment with the labels.

Step 6 - Fix Slice Gaps

Inspect the animation closely and address any visual gaps, particularly in the lilac slice. If an unexpected gap appears, check its individual rotation value. Add a rotation animation to that slice and reset its rotation at the first frame to a full 360 degrees, which is effectively 0.

Step 7 - Animate The Smaller Slices

With the main slices complete, proceed to the smaller ones: orange, red, and gray. Starting around 1 second into the timeline, animate each slice’s stroke offset so it is completely invisible at first by matching dashes and offset values. Apply the same technique consistently to all three. Afterward, offset their keyframes by a few frames so they appear one after another rather than simultaneously, creating a more engaging rhythm.

Step 8 - Animate The Labels

Use a simple scale animation so each label grows into place next to its corresponding slice. Select all labels at once and add a scale animation to save time. Set the initial scale to 0 and animate it quickly up to one over a few frames.

Step 9 - Adjust Label Placement And Timing

Review the label positions and correct any that do not align properly. If a label is misplaced, remove it temporarily and reintroduce it in the correct position. Apply the same scale animation so it remains consistent with the others. To add polish, apply a subtle ease-out or bounce to the scale animation and fine-tune the timing so each label feels synchronized with the slice it represents.

Play the animation from the beginning and evaluate the overall pacing. If necessary, slightly speed up the rotation or adjust keyframes to better match the label reveals.

This technique can be extended to other illustrations, allowing you to replicate the process.

Still have questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can!