Jump to content
GreenSock

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

Modifying width after scale = not centered

Recommended Posts

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!

Link to post
Share on other sites

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!

  • Like 3
Link to post
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.

×