Best way to make a semi-circular navigation?


#1

So I am looking to make a semi circular navigation that acts like a wheel. So what I want in the end is a half circle and as you slide up and down on the wheel the circle rotates and the items on the wheel move along with it. I have made a super basic sketch to kind of show what I am talking about

Any idea what would be the best way to do this would be? Could I modify the ionic scroller maybe with a modifier class to magnify the items in the middle? Or would I make a new function that handled it all on its own? I basically have no idea where to start on this so any direction would be great, only other thing I want is that the wheel follows your finger and has a “flick” motion similar to iOS date selector ( as you slide down it rotates but if you slide fast and let go it will continue to spin)


#2

Look at these tutorials if you need an inspiration, or you can even try to implement into Ionic:



#3

Thank you for the response but it is not exactly where I am getting stuck and i’m sorry if I have not portrayed the issue well. Basically my issue currently is not making the physical semi circle its the movement and motion, I am not a css expert hence my issue. What I am trying to do is make almost a modification to the existing ion-scroll. I need momentum, finger tracking, flick ability etc just like ion scroll has but in a semi circle, and most of all it needs to be able to loop. Any idea on how one could modify ion scroll (maybe using css animation) to make it look as if it is a circle, small and to the left in the top spots, larger and woward the right in the middle spots etc and then deal with looping later.