Abozanona

I'm trying to move an object `#from` to another object `#to` along a path defined in an svg element. If I try to move a circle along the path using `align` & `alignOrigin`, the circle indeed moves along the path, as shows in the codepen code sample. But what I need is to move an object from it's current position to another's object position, and I want the shape of the movement to be like how it is in the path, even if SVG was not visible. The current behaviour is that the `#from` object start position is changed, and the end position is not the same as `#to` object. What I'm trying to do is somehow move an object to a point using a path. If the distance between the two objects is for example longer than the defined path, I would expect the path to expand to match the distance between the two points. I also want to expect that object a will move to the same exact position as object b using the path even if the path's position was not between object a & b. https://codepen.io/abozanona/pen/XWQdjwM

I'm trying to add a menu for a draggable object. The menu has three options(three grey squares). I want the menu to always be on top of the draggable object(the red square), and I don't want to allow the user to drag using the menu. If the user clicks on the menu, I need to only execute a js function and not allow the user to drag it. In order to position the menu always on top of the draggable object, I defined the menu inside the draggable object. But now I need to find a way to disable the dragging behaviour from the menu(the cursor and the ability to drag). https://codepen.io/abozanona/pen/BaEjMZo

I have a dom element with a specific class name, and I'm trying to move this element to a specific point in the screen after the user finished dragging it. In order to do that, my plan is to create a temp dom element in the position I want to move the point to, move the original element, and then remove the temp element. Here's my code ``` gsap.registerPlugin(Draggable, MotionPathPlugin) const selector = ".my-obj"; Draggable.create(selector, { type: "x,y", onDragEnd: function (e: any) { const pointTag = document.createElement("temp-point-tag"); pointTag.style.position = 'absolute'; pointTag.style.top = 200 + window.scrollY + "px"; pointTag.style.left = 400 + window.scrollX + "px"; pointTag.style.width = "3px" pointTag.style.height = "3px" pointTag.style.backgroundColor = "red" document.body.appendChild(pointTag); const point = MotionPathPlugin.convertCoordinates(pointTag, document.querySelector(selector), { x: 0, y: 0 }) gsap.to(selector, { x: point.x, y: point.y }); }, }); ``` My code doesn't work as expected. It doesn't have a static behaviour. If I dragged the object. it goes to a random place in the screen, and might also go outside the screen. The expected behaviour for `MotionPathPlugin.convertCoordinates`, as I understand from the documentation, is to move to {x:0, y:x} relative to the object's coordinates which I specified. Why is `MotionPathPlugin.convertCoordinates` not working? What is the correct way to move an object to a specific point(x,y) in the screen? Sample codepen: I'm trying to move the red square to the red dot after dragging event has ended https://codepen.io/abozanona/pen/wvZMdLd