Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
muldev

Moving SVG group over another group's location

Recommended Posts

is there a simple way to move one svg group (or object) over another group's (or object) coordinates using gsap ?

 

The example in codepen moves the object relatively, however it would be ideal to moveto #hex1 position :)

See the Pen wvrKrrK by simonatmuldev (@simonatmuldev) on CodePen

  • Like 1
Link to comment
Share on other sites

I guess that would depend a lot on two things, the actual SVG and the way it is embedded…

Pleas give us a more concrete example or even better a CodePen with what you have so far. 

Link to comment
Share on other sites

I have added a simple codepen to the original post. basically I am creating a game board similar to scrabble. when the user clicks on their  tile that corresponds to the board's tile number, in this example "A-1" with id of '#hex2" the tile  moves over the existing board tile.

 

Link to comment
Share on other sites

That should be fairly simple. I could try to fix it for you, but my first guess is always, that you want to do it yourself to learn and better understand things.

So I start with some hints:

 

You don't need a timeline here, a tween should do.

Don't use TimelineMax, that's deprecated, use the new gsap 3 syntax. (https://greensock.com/docs/v3/GSAP/Tween)

Try to work with offsetLeft and offsetTop of the Element you want to move the other one to...

 

If that doesn't help you, I can offer you more help.

 

Maybe someone else will already have done it for you by then though ;-)

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Thanks for the advise. Working perfectly now :)

 

 

Edited by muldev
changed question
  • Like 1
Link to comment
Share on other sites

Ok, I have to admit, I have underestimated the task a bit.
I looked at the problem as if you had two html-elements that were children of the same display-parent.

But actually you want (need?) to happen all of this inside an svg.

That complicates things (at least for me a little) as some things like offsetLeft don't work inside svgs.

What I don't understand is why you use fromTo though, as far as I understand you just want to move one object from its' current position to another position. gsap.to should suffice totally for that it's normally even better than fromTo as it works regardless of the object's position.

 

Getting the target's position (in relation to the moving object's) one is what seems to work differently inside your svg. In this case it works if you simply move hex2 to x:0 and y:0 but I'm a bit curious and will try to understand it better.

 

 

 

Link to comment
Share on other sites

I have prepare a CodePen that should lead in the direction of a more flexible solution, but there is some problem with the scaling of the svg. You give its' size in millimeters but gsap generally works with pixels, also the sizing of an svg within the browser can be trick, and should be controlled.

I have a feeling that in the end you will have to pay more attention to those things than just dropping a pure svg into CodePen ;-)
 

Anyway here is my (not really working) approach, that could probably help later on, when the control over the svg's display is better established.

 

See the Pen wvrKPVX?editors=1111 by mdrei (@mdrei) on CodePen

  • Thanks 1
Link to comment
Share on other sites

Hi @muldev, glad you got this sorted!

 

Here's another SUPER easy way. Using Flip plugin.

See the Pen BawoxLO?editors=0010 by GreenSock (@GreenSock) on CodePen

 

3 hours ago, iDad5 said:

You give its' size in millimeters but gsap generally works with pixels, also the sizing of an svg within the browser can be trick, and should be controlled.

Just want to clear this up - all sizing in an SVG is in SVG units not pixels or millimeters. I certainly wouldn't say that GSAP 'generally works with pixels'. GSAP is a property manipulator, it's agnostic as to what that value represents. For transforms in SVG that would be SVG units.

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

4 hours ago, iDad5 said:

Anyway here is my (not really working) approach, that could probably help later on, when the control over the svg's display is better established.

 

For SVG coordinates, it's usually better to use getBBox instead of getBoundingClientRect. Here's a post that goes into some of the details and gotchas of getBBox.

 

 

  • Like 3
Link to comment
Share on other sites

Flip would sound great if I was a ShockinglyGreen greenjsock member, but I'm not. So I'll have to stick with fromTo with :)

 

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