Animate a DIV to center of screen with translate3d

[trueicecold]

Hello all,

 

if I have a div positioned at 0,0 (translated), and I want to bring it to the center of the screen, let's say X=320.

if I move it with GSAP, the top left corner is calculated towards 320px, meaning it's not fully centered, and what I really need to do is move it to 320-div.width/2 to get the proper results.

 

I've tried using transform-origin but that doesn't seem to help (also, transform-origin is 50% 50% by deault if I'm not mistaken).

I have lots of elements, and the vast majority of them should be move from their center point.

 

Any quick solution for this using GSAP?

 

Attached a codepen to illustrate the problem

 

Thanks!

See the Pen WoJMwq by trueicecold (@trueicecold) on CodePen

[Dipscom]

Hi trueicecold,

 

Welcome to the forums!

 

Is there a particular reason as to why you have to use the CSS plugin to tween the translate property?

 

The easiest way I know to achieve what you are explaining is to use the following:

TweenMax.to($(".div1"), 2, {x:window.innerWidth/2, xPercent:-50});

GSAP's x property will use the transform anyway so, that should give you the results you are after.

[trueicecold]

Thanks Dipscom, 

 

x uses transform? not "left", for that matter? I was under the assumption I need to use css property for this.

And what xPercent stand for?

[trueicecold]

ok, just verified this totally works! x Property as well as xPercent

 

Actually I wasn't aware of the matrix method of translating in css at all! Just goes to show how much time GSAP saves

 

Thanks a lot!

[Dipscom]

There you go, glad you worked it all out.

 

Most of the CSS properties can be written without the css:{} encapsulation, GSAP will recognise them all and work its magic - All in the name of convenience.

 

If you want, you can read a much more detailed explanation of the CSS plugin here: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/