Pie Chart Radial Wipe

May 29, 2024

Rachel Hedgepeth
By Rachel Hedgepeth

Hi all,

I'm trying to figure out the best way to do this:

- I have a pie chart with five equal slices.
- I'd like for the user to be able to mouse over each slice and for the slice to then wipe radially to fill the whole chart.

In my slide example, you'll see that I've accomplished what I'm describing in the top right slice by simply using a wheel animation. However, this only works because the wheel starts at 12:00. The start point can't be changed, apparently, (https://community.articulate.com/discussions/articulate-storyline/wheel-animation-storyline-2 - I've submitted a feature request) so I'm trying to figure out a work around: how to create this feature (or similar! I'm open to outside-the-wheel ideas... the pie slice could expand from both sides at once, for example) so that any of the five slices and expand to fill the whole circle.

Thanks in advance!

6 Replies
Nathanial Hilliard
27 days ago05/30/24 at 2:15 pm (UTC)

Here is an option close to what you were looking for. It uses an animated shape border to "wipe" in the solid shape when you click on a pie segment. It uses a little JavaScript to adjust shapes  already on the slide. The scripts could be cleaned up/combined.

Expanded from an idea here:

https://stackoverflow.com/questions/33778835/radial-wipe-with-pure-css-if-not-svg-alternative

Try it:

https://360.articulate.com/review/content/c721b423-ce69-40b1-b218-3b330daa8536/review

Nedim Ramic
26 days ago05/30/24 at 5:39 pm (UTC)

This is the closest I can get using Storyline alone, combining pie shapes, states, and state changes based on timing. It simulates a wheel animation that can be sped up or slowed down. Each layer has a faded oval to cover imperfections. Please check out my video demonstrating this interaction.

Sign In to Reply