Here's the link: missingdice.com/spin-the-wheel. I'd really appreciate any feedback on improving it, i've been staring at it for a week!
I've been...
For further actions, you may consider blocking this person and/or reporting abuse
This looks really cool.
I have "prefers reduce motion" activated and the animation is not there in that case (which is great). Maybe an improvement for that: there's no animation, so the selected option is visible immediately, but the banner and the button are disabled until the end of the animation, so there's a gap of a couple of seconds in which the user sees the selected option, but it is not announced and you cannot click on the button to generate a new one, which is a bit weird.
That's great to know. thank you. That's a javascript thing so I'll add something to detect it.
Interesting to come up with a non-spinning version that still has the same drama? Maybe a fade-in or something?
In the meantime I'll update it to show immediately.
Why did you decide on text paths, rather than using simple html elements with a
transform: rotateapplied?That's a good question.
Firstly, becuase when it can, the text curves along with the edges of the wheel — not the simplest thing to do, but I felt like it looked nicer and was probably the expectation of the user. That's only possible with an svg
<textPath>.The text paths reuse some of the same functions used to draw the rest of the wheel.
I think there's a performance reason too. I haven't actually tested this, but my understanding is that the browser treats an inline svg in a similar way to a single image. So performing animations on it is less expensive to compute — i'd have to double check that.
The svg scales to fit the user's device. I suppose it is possible to set a font-size relative the parent's height, but that didn't occur to me at the time.
Thanks for the detailed reasoning, I think you made the right decision.
Superb work!
The animation feels much natural and the site helps me a lot.
Would love to have a look at the source code.
Agreed! the best I found that can support the thousands of entries scenario. I need this for my project so the source code would be a huge help... Cheers!
Clever !
Love this mate! Did you end up creating custom embeddable wheelz? I'd love to chat
Is there any possibility to take a peek at code responsible for generating audio? I have trouble with clipping sounds. Thanks! :)