What does it mean to animate x and y?

[jorma 16 Likes (Newbie)]

I'm trying to move a group around in an SVG and am trying to understand how Greensock interprets {x: value, y: value} in the vars. Is there a page where this is explained? I couldn't find it in the Docs. 

[OSUblake 18,533 Likes (Superhero)]

x and y are translate transforms.

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

 

Check the console here.

See the Pen 835b1641eccb141275441bdee8782c42 by osublake (@osublake) on CodePen

 

 

[jorma 16 Likes (Newbie)]

Thank you!

So, absolute values, relative to the original position in the SVG, at the start of the animation?

 

Is there a page in the docs where I could read more about this?

[OSUblake 18,533 Likes (Superhero)]

1 minute ago, jorma said:

Is there a page in the docs where I could read more about this?

 

 Not really. It's just a standard translate transform, so it's really not a feature of gsap. 

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate

 

7 minutes ago, jorma said:

So, absolute values, relative to the original position in the SVG, at the start of the animation?

 

Yeah, but I don't know if "absolute values" is the best term. If something is scaled, then the coordinates are going to be scaled.

 

See the Pen 3725a4a2212e288d14aa4167c1bc2753 by osublake (@osublake) on CodePen

 

[jorma 16 Likes (Newbie)]

Got it. Thx