Triggering Animation using button position change on the canvas


I am trying to apply button as a slider, not html range input, to trigger the animation. The buttons live on top the canvas. I was trying to create a playground but couldn’t come up one. So, I attached an image below to demonstrate what I am trying to do.

The circle with the arrow at the bottom is a button to slide horizontally and the top one is to slide in a quarter arc toward the handler. Dragging the bottom button to right or left will fold/unfold Corkscrew. Moreover, the slider button is only visible from specific angle when we rotate the model.


I hope the explanation with the image make sense what I am looking for. Any suggestion how I can apply this logic. I was trying to search for a playground with similar implementation but couldn’t find one. So, if there is, I would be glad to learn from it.

Thanks in advance!

Hello! :smiley:

For the bottom one, I think you can modify a Babylon GUI Slider in texture mode to achieve this effect: Texture mode Babylon.GUI | Babylon.js Playground (

The top one has a bit more complex movement, but there is still a way to use a Slider for all the hard work! I created an example with an “invisible” slider (i.e, one in which all the colors have alpha zero), and the value of the slider controls the angle of the circle :slight_smile: Using GUI slider | Babylon.js Playground (

@carolhmj thanks for the feedback.
I tried with the babylon GUI but my task request is to use specifically html button on top of the canvas. The bottom one is solved using button and trigger the animation based on the button clientX value with some conversion calculation. but the top one is harder as you mentioned. would be glad if someone come up with feedback or solution.

Just checking in, are you still having any issues? @Yofetahe_Habtu