Tweenmax set translateX not working as expected, why?

[therddlr]

Here I need brackets transformed to the center of `#logo` but instead it transformed only a little bit. If I use absolute pixels then it's transformed, but I need relative! 

See the Pen jXWdaN by dubdub (@dubdub) on CodePen

 

What's strange is that anime.js transforms as expected...

And if you type this values in DevTools also works great. But GSAP works differently!

Not sure why this happens?

See the Pen jXWdaN by dubdub (@dubdub) on CodePen

[therddlr]

Here's what I expect (set in DevTools)

 

 

[therddlr]

While playing I noticed that `x: '1000%'` is looking good. But why so big value? Is it related to `matrix` calculations magic that GSAP has under the hood?

[mikel]

Hi @therddlr

 

Would it work that way for you?

 

See the Pen KbVEzN by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

 

[therddlr]

@mikel hello. I don't really need it for `e` letter. I need it right in the middle of the block. Beside, you have it hardcoded in pixels, if I understand, which is also not what I am searching. I need transfrom brackets to the middle

[mikel]

Hi @therddlr,

 

Is this your middle of the block?

 

See the Pen xmZBQm by mikeK (@mikeK) on CodePen

 

[therddlr]

@mikel looks like it, yes! Thanks!

 

One more question please - I thought if I set it in number then it's pixel values. But it doesn't looks like this 100px in this case.

[mikel]

Hi @therddlr,

 

The 100px are relative to the viewBox. A SVG only with viewBox and without width and height attributes makes it fully responsive in modern browsers. Therefore, the 100px are converted to the real size of the SVG  of the viewport.

More about this aspect for example here.

 

Kind regards

Mikel

 

 

[Carl]

Hi therddlr,

 

I think you may be misunderstanding what x:"40%" is supposed to do. 

To be clear it will translate the target a distance based on 40% of its own width, not to a position equal to 40% of its parent's width.

 

I forked your original demo and used to() tweens instead of set() so that you can see what is happening

 

See the Pen maPbbq?editors=0010 by GreenSock (@GreenSock) on CodePen

 

[Carl]

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

more details here: https://greensock.com/svg-tips

[therddlr]

@Carl yes, that's the case. I thougt it was parent %? because anime.js behaves this way. Thanks for the link! So much to learn!

 

@mikel thank you for your explanation. Didn't know that...

 

I am, like, writing down your every answer, guys ?

[GreenSock]

1 hour ago, therddlr said:

I thougt it was parent %? because anime.js behaves this way.

 

Hm, that doesn't sound right. If you read the spec, percentage-based transforms are supposed to be relative to the element itself, not the parent. That's how it works for regular DOM elements, and GSAP aims to deliver consistency across the board.

 

Happy tweening!

[Carl]

Hi Therddlr,

 

Glad you are eager to learn.SVG definitely has its quirks, but as Jack mentioned, GSAP does a lot to normalize behavior.

I'm sure you will do fine with GSAP.

 

If you want to make your head spin a bit, read through the SVG Gotchas thread. Some great info in here: