Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
therddlr

Tweenmax set translateX not working as expected, why?

Recommended Posts

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

Link to comment
Share on other sites

Here's what I expect (set in DevTools)

 

 

Screenshot from 2018-12-14 11-53-43.png

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

@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

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

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

 

 

  • Like 1
Link to comment
Share on other sites

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

 

  • Like 3
Link to comment
Share on other sites

@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 ?

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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: 

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×