Apply transform as is

[larsvers]

Hello,

 

I have a path in a g element which has an initial transform (x, y and scale) set, e.g.:

 

<g id="group" transform="translate(5, 10), scale(0.5, 0.5)">

I now want to update this transform to for example: 

 

<g id="group" transform="translate(50, 40), scale(0.2, 0.2)">

 

So I do:

 

gsap.to('#group', { x: 50, y: 40, scale: 0.2 })

 

which leads to a g element with the following properties:

 

transform="matrix(0.2,0,0,0.2,147,184)" data-svg-origin="-10 -20" style="transform-origin: 0px 0px;"

 

while I would have - probably naively - expected:

 

transform="matrix(0.2,0,0,0.2,50,40)"

 

After some attempts including setting the svgOrigin in the gsap tween to "0  0" as well as the initial transformed position of "2.5 5" I can't seem to get the desired outcome.

 

My 2 questions are:

1. what exactly is gsap doing here? As in, how does it arrive at the transform matrix and svgOrigin values (I grasp some of it, but would be grateful for some expertise)?

2. how do I achieve the exact transform as specified in the gsap tween?

 

Many thanks for any pointers in advance! 

See the Pen pogrQQX by doldinger (@doldinger) on CodePen

[OSUblake]

Here's a good article that explains how some of the stuff is calculated.

https://css-tricks.com/svg-animation-on-css-transforms/

 

46 minutes ago, larsvers said:

After some attempts including setting the svgOrigin in the gsap tween to "0  0" as well as the initial transformed position of "2.5 5" I can't seem to get the desired outcome.

 

What's the desired outcome? Don't look at the matrix. What do you want it to do visually?

 

[GreenSock]

Yeah, when it comes to transforms, GSAP does a lot of work for you. Like for SVG elements, it applies smoothOrigin by default, meaning it will calculate offsets to ensure that if you change the transformOrigin it'll do so seamlessly without a "jump". And there are many other problems it solves. But if you just want to tween the "transform" value between two that are in the same format with the same quantity of numbers in the string, you could just use the AttrPlugin: 

gsap.to('#group', { attr: {transform: "translate(40, 50) scale(0.2, 0.2)"}, onComplete });

But like Blake said, it's probably best if you help us understand the "why" behind your question. 

[larsvers]

Many thanks @OSUblake and @Jack !

 

@OSUblake I now properly read the article you pointed at, which I only skimmed before and I am much clearer now on the background. Apologies for looking at the matrix - I couldn't help it : )

 

@Jack attr is of course the solution and is exactly what I'm after. After reading your css-tricks article I also appreciate the difference and the use cases.

 

I was looking for this solution as I have a complex SVG path, which I translate and scale with some getBBox help to fit the viewport responsively (viewbox is not an option unfortunately). I then morph some part of this image into another shape (with your stellar morphSVG plugin).

 

For performance reasons I can't morph the whole complex path, so I overlay the long path with only a part of it in a separate g element with the same transform values. This part-copy will get morphed into another shape, which requires a new transform I can now simply apply with attr as the CSS transform appears less straight forward. Here's a simplified demo of my mission:

 

See the Pen GRoMJVN by doldinger (@doldinger) on CodePen

 

Thanks again - for the help and GSAP!