[Resetting the SVG transform created with Draggable]

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!

[Resetting the SVG transform created with Draggable]

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

[Resetting the SVG transform created with Draggable]

25 minutes ago, Sahil said:

Oh right, we forgot to mention that Draggable has it's own properties like x, y and rotation. If you animate element externally you need to call update method of draggable so it will update these properties. Take a look at following thread.

 

 

 

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...

 

[Resetting the SVG transform created with Draggable]

1 hour ago, OSUblake said:

 

Sounds like you're using an old version of GSAP. You shouldn't see a 3d matrix in the style for SVG elements. The current version is 2.0.1.

https://cdnjs.com/libraries/gsap

 

 

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?

 

[Resetting the SVG transform created with Draggable]

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

See the Pen KBJjzm by CasualToolCoder (@CasualToolCoder) on CodePen