I can't center a DIV

[delizade]

Hi,

 

after change the text the DIV doesn't centered.

I've added CSS properties after edit text but it doesn't work either.

 

is there any suggestion?

 

thank you.

See the Pen rmrGvM by Cosmodrome (@Cosmodrome) on CodePen

[GreenSock]

That's because you're using percentage-based transforms that are set only in the CSS, but the browser reports the computed values in pixels (a matrix() or matrix3d()), so GSAP can't discern that you intended percentages. When you do a rotation (or any transform), those computed values got baked into the matrix()/matrix3d(). We strongly recommend that you always set transform values via GSAP because not only does it perform better, but it also ensures that your intent is clearly communicated and that rotational values beyond 360 degrees remain accurate (matrix math doesn't permit that). 

 

Just use GSAP's xPercent and yPercent. Here's a reworked fork of your demo: 

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

 

Better?

 

Happy tweening!

[delizade]

thank you! @GreenSock

[GreenSock]

Anytime! Happy to help. Good luck with your project.