GSAP converts property to matrix is not working well

[TDT]

If I use the folowing code through jQuery:

$('.logo').css('transform', 'scale('+ (maxvw / 1920) + ') translateX(36%) translateY(41%)');

The CSS is applyed and everything is ok. The logo is scaled on X and Y, and then image is positioned where I want.

 

Perhaps I need to set this through TweenMax for browser compatibility, since it translates to -all-browser prefixes, and even works on IE older versions. Then I'm using this:

TweenMax.set('.logo', {scale: (maxvw / 1920), x: '36%', y: '41%'});

The problem is that GSAP is converting "scale" property to "matrix", and the inline style is something like this:

transform: translate(36%, 41%) matrix(0.658854, 0, 0, 0.658854, 0, 0);

Look that property X and Y was correct setted, but matrix comes later, with 0 (zero) on X and Y and not position my element on 36% and 41% as I expected.

 

Why this happens? Which format should I use or it's a bug?

[Diaco]

Hi TDT 

 

Yep , i see what you mean , but there's a point :

 

with css ( even inline style ) , order of properties is really important and you have different result with different orders .

in the other hand GSAP arranges properties before apply inline style and you see exactly same result with different orders .

 

pls check this out : 

See the Pen vNreyz by MAW (@MAW) on CodePen

in the above pen , the green box styled with GSAP , red with css and blue with jquery.

[TDT]

Hi TDT 

 

Yep , i see what you mean , but there's a point :

 

with css ( even inline style ) , order of properties is really important and you have different result with different orders .

in the other hand GSAP arranges properties before apply inline style and you see exactly same result with different orders .

 

pls check this out : 

See the Pen vNreyz by MAW (@MAW) on CodePen

in the above pen , the green box styled with GSAP , red with css and blue with jquery.

 

After read on and on again your code and answer, I understood.

You always set translate before scale to get identical effects, because GSAP uses this way.

 

The problem here is that I'm applying this on window resize and the element (btw its an image) needs to be in the same position relative to the background (that also resizes). When I use translate before scale, the translate values are fixed because I use "translate-origin: top left", and only scale I calculate base on viewport width.

 

Here is my code pen:

See the Pen epKedM by anon (@anon) on CodePen

I forked your example change the div for imgs, where one of these is background. Also notice "position: absolute" and "top:" 0 on all elements.

 

Look that green and blue are not positioned at the same X and Y coordinates. Our reference is the leaf tip.

Now resize the window. Look that green one works as I expect, becoming at the same X and Y coordinates proportional to before, in other words, on the leaf tip. But blue don't, since translate is applyed before scale.

 

How can I solve this? Once that GSAP uses translate before scale.

[OSUblake]

Your assumptions are wrong. 

var calc = ($(window).width() / 800); 

TweenMax.set('.green', { scale: calc, xPercent: 328 * calc, yPercent: 325 * calc });

See the Pen gaKvXy?editors=011 by osublake (@osublake) on CodePen

[Jonathan]

Hello TDT

 

And just to clarify I noticed your using jquery css() method. you really shouldn't be mixing GSAP set() with jquery css(). Otherwise you will you are changing transform properties outside of GSAP. It's best to use GSAP set() instead of jquery css(), this way GSAP can keep track and record those transform values for later use.

[TDT]

@OSUblake

Already minded. I swear that I have already tried this and didnt work.

Thank you at all.

 

@Jonathan

Yes. But thats the point, I was comparing the GSAP set() method behavior against CSS ones thourgh jQuery css() method.

With CSS the element stay on the position that I want as I wrote the transform order: first scale, later translate.

With GSAP the element wasnt staying on same position because it handle the parameteres and put in own order: first translate, later matrix (to scale).

[Jonathan]

@TDT I see .. I think your example should have had it apply on two separate elements, since you were adding the jquery css() after GSAP set ().. and jquery CSS won't parse the existing matrix and just prepend your CSS in the style attribute. Since jquery CSS acts as more of a setter whereas GSAP set() will actually parse the matrix. As you can see in Blake's example above.