Jump to content
Search Community

Resetting the SVG transform created with Draggable

AndyZ test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

You just need to reset x and y properties.

 

GSAP creates an object _gsTransform and attaches it to the DOM object to keep track of all the transform related values. Usually you will want to avoid trying to manipulate css transform directly and use gsap instead. It keeps things simple.

 

For draggable of type 'rotation' you will need to reset 'rotation' property.

 

https://greensock.com/docs/Plugins/CSSPlugin

 

See the Pen MBLMXG?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

  • Like 3
Link to comment
Share on other sites

56 minutes ago, AndyZ said:

I see that Draggable applies its transformation to the <g>'s


style:"transform: matrix3d(...)"

 

 

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

 

 

56 minutes ago, AndyZ said:

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.

 

 

You really shouldn't be messing with a transform or matrix. Use and "x" and "y" directly.

 

TweenLite.to("#groupAll", 0.4, {
  x: startX, 
  y: startY
});

 

 

See the Pen gjqNgp by osublake (@osublake) on CodePen

 

 

 

And I need to remember to refresh the page before posting. I didn't see that @Sahil already posted.  :oops:

  • Like 3
Link to comment
Share on other sites

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?

 

Link to comment
Share on other sites

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.

 

 

Quote

Am I using the wrong Draggable version?

 

The version you are using is latest but I don't see the behavior of element jumping. Are you talking about behaviour in your project? And in which browsers is it happening? Please post a reduced test case.

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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!

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...