AndyZ

Aaaand I solved it. Error was clearly between chair and computer: wrong import. I imported Draggable in Typescript like this: import * as Draggable from "gsap/umd/Draggable"; instead of import Draggable from "gsap/Draggable"; now it works!

I'll try to construct an example that's closer to my use case. Thanks for your help so far! Ok, I am going crazy: I have re-built my app as close as I get and it works just fine https://stackblitz.com/edit/angular-7uvz7y

Thanks Sahil, however, that would solve (external transformation=>update Draggable so it knows where to start), which is not really the problem I have right now. Good to know though - because that would probably have been one of my next posts My problem is that Draggable writes the transform into the <g> element's style="transform:matrix3D(...)" instead of the element's attribute "transform" - like it does in your codepens. I guess Draggable doesn't identify the referenced Element as an SVG element and therefore uses the "style" to store the transform? How can I convince Draggable that it is operating on an SVG element? I should probably mention that I am using this with Typescript and Angular inside of Electron, if that makes any difference...

Thanks for the quick replies! I checked the version, and GSAP is 2.0.1. and Draggable is 0.16.4. Interestingly, when setting TweenLite.to("#groupAll", 0.4, { x: 0, y: 0 }); After clicking "reset", I can see that the G-Element's transform attribute is being set to transform="matrix(1,0,0,1,0,0)" (correct starting position for x:0, y:0), but since it still has the style-based transform inserted by Draggable style="cursor: move; touch-action: none; user-select: none; z-index: 1000; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 293.397, 258.317, 0, 1);" the G's position doesn't animate back to 0,0. When I start dragging it again, it "jumps" back to 0,0 and then moves from there. Am I using the wrong Draggable version?

Hi there, first post on the forums and absolute GSAP newbie - so please be patient I have created an abstract map in SVG (effectively a SVG group <g id="groupAll"> of boxes and lines between them), which I have made draggable by applying Draggable.create("#groupAll", {type:"x,y", edgeResistance:0.65, dragClickables: true}); My question is: How can I use TweenLite.to() to reset the transformation applied by the Draggable? I see that Draggable applies its transformation to the <g>'s style:"transform: matrix3d(...)" but I don't know which value to "cache" beforehand and to set it in the TweenLite.to() Using the transform value with "matrix3d(...)" doesn't work. Thanks for your help! AndyZ