Modifying width after scale = not centered

[hamstanim 0 Likes (Newbie)]

http://jsfiddle.net/nqdaj3cL/

 

Hello!

 

I have a (maybe simple) problem with transforms and GSAP:

 

I want to scale a centered object and modify its width but as you can see in the fiddle, the object isn't centered after the animation.

It's because the translate(-50%, -50%) isn't honored anymore as GSAP keeps in memory the initial x and y values.

 

But if I remove the matrix in the inspector and modify manually a transform : scale, it centers fine.

 

What can I do in this case?

 

Thank you!

[GreenSock 8,117 Likes (Superhero)]

That's because the browser reports the current values not as percents at all - it's as a composite matrix() or matrix3d(), so it'd actually be impossible for GSAP to know. But don't worry - there's a solution  

 

This illustrates why we highly recommend that you use GSAP for any transform-related values rather than affecting some with plain CSS and some with GSAP. It's far more efficient because GSAP can cache values, keep everything consolidated in one spot in our _gsTransform object, and minimize querying the DOM and trying to parse values which can get very awkward when it comes to matrix math (some things are mathematically impossible when you only have the matrix to go by). 

 

Merely add this simple set() call to your project:

tl.set(div, {xPercent:-50, yPercent:-50})

That's it. Everything else thereafter should work exactly the way you're expecting. Notice that GSAP separates out the percentage-based translations which makes it really easy to accomplish some very advanced effects. You can combine regular x and y with xPercent and yPercent.

 

Have fun!

[hamstanim 0 Likes (Newbie)]

Oops, forgot to reply.

Thank you for the quick answer!