Jump to content
Search Community

Modifying width after scale = not centered

hamstanim test
Moderator Tag

Go to solution Solved by GreenSock,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
Share on other sites

  • Solution

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 comment
Share on other sites

  • 3 weeks later...

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.
×
×
  • Create New...