Mystery XY Offset gsap.set()

[jdhadwin]

Hi everyone, newish to GSAP, first-time posting.

I have a complex webapp I've built and have stripped it down in order to demonstrate this problem in a sensible way.  The problem is explained by the pen... please forgive all the excess code.  Please help me determine how to resolve the unintentional XY offset.  As you can see, the applyPointer() method gets the coordinates of an SVG circle, then applies them to an SVG group (containing a few paths that form a pointer).  Even though the code resolves to the correct coordinates, gsap.set() produces a matrix that does not match the coordinates.  I cannot see anywhere the difference/offset could be coming from.  Help!



Thank you all in advance for any insights.
~JD

See the Pen abMxQOx by jdhadwin (@jdhadwin) on CodePen

[Rodrigo]

Hi,

 

There is actually nothing mysterious or off in terms of the matrix calculations being made. There are a few issues in your setup, your SVG doesn't have a viewBox attribute, so that creates a a problem with which elements are visible and responsiveness.

 

Then your pointer path implies moving the path position to a specific point to start the drawing of that path. When creating something that you want to move around in the SVG canvas is better to either put it at x: 0 and y: 0 in your SVG editor (top/left corner of the drawing) or at the center. With the current setup you have you need to use a magic number in order to offset the position in the Y axis and make it work the way you want.

 

Here is a fork of your codepen, I had to remove all your code since I didn't have time to go through all that and figure it out:

See the Pen gOEJaOr by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Rodrigo]

Ohh I see @Cassie is working some SVG magic here ✨, so probably you should pay more attention to Her answer 😃

[Cassie]

Hey there! 

 

So this isn't a GSAP set thing. I've tweaked the demo so you can see what's happening. (I 've added a viewBox so we can see the bounding box of the SVG more clearly)

 

Untransformed circle (green)

The circle, by default, is positioned exactly at [0,0] without the GSAP transform added. Perfect

 

Transformed circle (red)
If you add the x and y coordinates to a circle element it ends up at the correct place - this is because the circle starts exactly at [0,0].

Untransformed Hand (purple outline)
The hand however, with the same transforms applied is positioned below and left [0,0]. So it's starting point is offset from the very beginning. This is because the bounds of a group just reflect the bounds of its contents. The hand path isn't drawn to start at [0,0], so the g isn't bounded by a point at [0,0]

 

Adjusted path - (Green outline)

I adjusted your path to start at [0,0] - awkwardly, the way the pointer was drawn means the start of the path is at the bottom of the hand 🫠

Adjusted and transformed path - (Red outline)
With the adjusted start point the hand ends up on the dot as expected.

See the Pen KKELpem by GreenSock (@GreenSock) on CodePen

I'd recommend redrawing the pointer so that the beginning of the path is the tip of the finger and starts at [0,0] - that'll solve your problem neatly, or just add some 'magic number' offsets now that you understand what's happening. 

[Cassie]

@Rodrigo - lols at both of us saying "magic number" and "put it at x: 0 and y: 0"

[Rodrigo]

Just now, Cassie said:

@Rodrigo - lols at both of us saying "magic number" and "put it at x: 0 and y: 0"

Yep, I've learned a few tricks with smart SVG folks like you, @PointC, @OSUblake and @Carl around, that make me look competent enough 😂

[jdhadwin]

Thank you @Cassie.  I'm a MGFX video guru (After Effects) first and a coder (distant) last-place.  I had something of an existential crisis momentarily upon realizing that viewBox acts as a virtual camera while viewPort acts as the wildly varying screen size... not because it isn't awesome, THAT it truly is... however, it was because I wrote my entire app as though that did not exist.  The chart and whatever plots are generated to match viewPort size.  I really appreciate you and @Rodrigo causing me to realize that the <g> is inheriting from ` M ` command in the path, and that was where I was really unaware.  Perhaps I was most confused because developing locally on Laravel's Herd, everything worked as I expected.  But immediately on uploading to a remote server, the offset appeared.  I don't have time to figure out what the heck that was all about, but I'm thanking God for you two.

My mild existential crisis bore some fruit too.  I added viewBox which eliminated the need for window resize calculations and re-drawing, then added a few lines to my code that created a virtual camera so that I can focus a user's attention somewhere more like a videographer would than a coder would.

 

I found an SVG editor on github and used it to re-craft my svg so that the origin 0,0 is at the fingertip.  Learned a lot about SVG today!  What do you guys use to create SVG's?  I was hoping Illustrator would be more useful to me... but seems to not be the right tool.  Thoughts?

Up and running as expected now, thanks to your help.

Cheers!

[Cassie]

Ah! This is great to hear. Glad it helped a little.

So, i use either affinity, boxy or illustrator - personally illustrator's my fave but that's down to years of muscle memory. I usually recommend boxy to people for light tweaking and affinity as a cheaper illustrator alternative.

What issues were you having with illustrator? (The top left corner of your artboard is [0,0] so usually I just use that as a rough starting point)

 

A v helpful hack is to use relative paths too, relative paths draw each point relative  to the first M command. That means you can change the x and y of the M command to anything and the rest of the path will move along with it. Easy hand-editing for SVG path positions! 🥳

Most editors spit out a mix of absolute and relative path points, so if you try to change the M command you just distort the path 🫠

Affinity allows you to choose relative paths as an export setting which is great.

Failing that - this is a helpful tool for adjusting your paths here.
https://lea.verou.me/blog/2019/05/utility-convert-svg-path-to-all-relative-or-all-absolute-commands/

 

Good luck with it all!
 

[PointC]

On 2/22/2024 at 9:07 AM, Cassie said:

personally illustrator's my fave but that's down to years of muscle memory.

+1

except I now have to say Illustrator instead of AI otherwise everyone gets confused.  😜