search

CrazyTim / spin-wheel

An easy to use, themeable component for randomising choices and prizes.
https://crazytim.github.io/spin-wheel/examples/themes
MIT License
174 stars 45 forks source link

Add support for nested wheels #33

Closed MalikBagwala closed 4 months ago

MalikBagwala commented 5 months ago

I wanted to implement a nested wheel like in the video below.

https://github.com/CrazyTim/spin-wheel/assets/23068029/e40324d6-1a3b-48e6-b7bf-39228185c0d0

Is this possible using the current API? If not I am curious as to how we can add support for this.

@CrazyTim

CrazyTim commented 5 months ago

Hi @MalikBagwala,

I have always wanted to add support for multiple wheels in the same container. However because the canvas' background is transparent by default, you can acheive this as-is by layering two wheel containers on top of each other using CSS position: absolute. Then just syncronise their animations to make it look like they are the same wheel.

I think this is a common requirement, so when I get the time I'll add a simple example of how to do this in this repo.

MalikBagwala commented 4 months ago

@CrazyTim I was able to implement this flawlessly with the z-index (position absolute) method, Thanks.