Centered Circular Draggable input

[jnhltmn]

I have a circular input with a width and height of 80vw/vh (depending on portrait or landscape).. GSAP Draggable uses the translate3d for the draggable component, but when I resize my window it doesn't center my #controller element anymore because of that. 

[Sahil]

It seems like it goes out of position without dragging in the first place, please post a reduced case demo, that will help.

 

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

[jnhltmn]

Thanks for your reply Sahil! How about this?
The controller gets out of position before dragging indeed. But when i remove the draggable functionality it stays in position.
 

See the Pen NXGZyW by jnhltmn (@jnhltmn) on CodePen.

 

[Sahil]

It was mostly due to CSS, this should solve the issue.

 

See the Pen LepwPg?editors=0010 by Sahil89 (@Sahil89) on CodePen.

 

[andrefelipe]

This solution works very well @Sahil 

Implemented in a audio player here https://www.eartheclipsed.com

 

Thanks!