Forum Discussion
Pie Chart Radial Wipe
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!
Your example didn't make it. You can attach something only by using a browser and the Add Attachment button. Phones don't send the file, only a link, which the system can't handle.
Thanks, Walt! Trying again here.
Maybe something like this would work. It would probably work better with layers.
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
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.
Lots of great ideas here, y'all! I love seeing everyone's different approaches to the task. I'll play around with these. Thank you :)
