Forum Discussion
Spinning wheel
I need assistance with my spinning wheel interaction. It looks awkward when it spins and when it stops there's an award transition to show where it "landed." All the other spinning wheel examples I have looked at uses JavaScript which won't work for me because our LMS can't support JavaScript.
Hey there!
Here is an example file with some instructions.
360 Review - Spinning wheel 2Good luck,
P
Hey there!
Here is an example file with some instructions.
360 Review - Spinning wheel 2Good luck,
P
Thank you for your help!
I've never created a spinning wheel before, but I put one together using the Dial in Storyline. I designed a graphic in Canva using a Pie Chart element to replicate a circular layout with text inside, then exported it as a PNG to use as the Dial Face background.
In Storyline, I added a rectangle and six animation paths that adjust over time based on the Dial's values. This creates a more realistic effect where the Dial gradually slows down as it rotates. Since I didn’t like how the text rotated with the graphic, I opted to show or hide titles based on the Dial’s value when it stops. The entire sequence repeats whenever the Spin button is clicked.
For better readability, you could use a graphic displaying numbers (1, 2, and 3) instead of text, as numbers remain legible even when upside down. You can also control the visibility of the titles based on the Dial’s stopping value.
It's a complex but non-JavaScript solution. If you're confident with Dial interactions and want to dive deeper into this, let me know, so I can upload my .story file for you.
EXAMPLE:
