Place an object in the center of the screen

[ninmorfeo 11 Likes (Newbie)]

I can't get an object to place in the center of the screen. If you look at the picture you can see how the cards are placed translate to the right of the red line. When I created the cards I tried to place the transformation point but it doesn't seem to work.
First i create card with this code:
 

$('.drag_zone').append('<div id="' + chi + '" class="carta_estratta' + ' ' + classe + '"></div>');

gsap.set($("#" + chi), {
    background: 'url(' + sfondo + ') no-repeat center center',
    rotationX: 20,
    rotationY: 0,
    rotationZ: 0,
    opacity: 1,
    transformOrigin: "center center",
    transform: "translate(-90px, -176px)",
    boxShadow: 'rgba(0,0,0,0.75) -2px 2px 5px 0px ',
    zIndex: 100 + (10 * zindex_pos++)
});

where 90px is the half width card and 176px is half height card.

then i animate with this code:
 

a_c_i = gsap.timeline();

  
a_c_i.to(chi, {
        duration: 1,
        x: larghezza_browser/2,
        ease: Power4.easeIn,
    }, "-=0.8")
        .to(chi, {
            duration: 0.7,
            y: function (index) {
                new_y = (altezza_browser / 2) - ((index) * 0.8);
                return new_y;
            },
            scale: 0.6           
        }, "-=0.8");
}

where am i wrong?

it is as if it always calculated the animations from the 0,0 point of the card and not from the center.

[Rodrigo 5,887 Likes (Superhero)]

Hi,

 

There area  couple of approaches for this, depending on the browser support of your site.

 

For a universal solution, you can use this:

gsap.set("#chi", {
  position: "absolute",
  top: "50%",
  left: "50%",
  xPercent: -50,
  yPercent: -50
});

The other alternative is to use flexbox in the cards' container:

HTML

<div class="container">
  <div class="box"></div>
</div>

CSS

.container {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center
}

Also there is no need to pass this to GSAP: transform: "translate(-90px, -176px)", you can just use x and y:

gsap.set(element, {
  x: -90,
  y: -176
});

If you keep getting issues with this, please try to create a reduced live sample in codepen.

 

Happy Tweening!!!

[ninmorfeo 11 Likes (Newbie)]

hi thanks for reply.
The problem in not on positioning object at start. I know i can do in a couple of way.
The problem is on animation...
why, if i give end coordinates like :

x: larghezza_browser/2,

where larghezza_browser is 

window.innerWidth

the card is not be placed at center of window? again, it'seem that the transform point of the card is placed upper left and not in middle.

[Rodrigo 5,887 Likes (Superhero)]

Please provide a reduced live sample in Codepen. We can't guess what problems you're facing with the few code snippets you're providing:

 

 

[OSUblake 18,533 Likes (Superhero)]

2 hours ago, ninmorfeo said:

the card is not be placed at center of window? again, it'seem that the transform point of the card is placed upper left and not in middle.

 

By default, the transform point where scaling and rotation happens is in the center on HTML elements. However, translation (x/y) is always in the top left. 

 

So if you want it be in the center, set your elements with an offset like this.

gsap.set(".card", {
  xPercent: -50,
  yPercent: -50
});

 

 

[ninmorfeo 11 Likes (Newbie)]

1 hour ago, OSUblake said:

i'll try thanks !
 

By default, the transform point where scaling and rotation happens is in the center on HTML elements. However, translation (x/y) is always in the top left. 

 

So if you want it be in the center, set your elements with an offset like this.

gsap.set(".card", {
  xPercent: -50,
  yPercent: -50
});

 

 

 

[ninmorfeo 11 Likes (Newbie)]

13 hours ago, OSUblake said:

 

By default, the transform point where scaling and rotation happens is in the center on HTML elements. However, translation (x/y) is always in the top left. 

 

So if you want it be in the center, set your elements with an offset like this.

gsap.set(".card", {
  xPercent: -50,
  yPercent: -50
});

 

 

 

It works! thanks a lot