muldev Posted December 4, 2021 Share Posted December 4, 2021 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 1 Link to comment Share on other sites More sharing options...
iDad5 Posted December 4, 2021 Share Posted December 4, 2021 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 More sharing options...
muldev Posted December 4, 2021 Author Share Posted December 4, 2021 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 More sharing options...
iDad5 Posted December 4, 2021 Share Posted December 4, 2021 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 3 1 Link to comment Share on other sites More sharing options...
muldev Posted December 4, 2021 Author Share Posted December 4, 2021 (edited) Thanks for the advise. Working perfectly now Edited December 4, 2021 by muldev changed question 1 Link to comment Share on other sites More sharing options...
iDad5 Posted December 4, 2021 Share Posted December 4, 2021 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 More sharing options...
iDad5 Posted December 4, 2021 Share Posted December 4, 2021 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 1 Link to comment Share on other sites More sharing options...
Cassie Posted December 4, 2021 Share Posted December 4, 2021 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. 3 1 Link to comment Share on other sites More sharing options...
OSUblake Posted December 4, 2021 Share Posted December 4, 2021 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. 3 Link to comment Share on other sites More sharing options...
muldev Posted December 5, 2021 Author Share Posted December 5, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now