Jump to content
Search Community

Place an object in the center of the screen

ninmorfeo test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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.

carte.jpg

Link to comment
Share on other sites

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!!!

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • Solution
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
});

 

 

  • Like 3
Link to comment
Share on other sites

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
});

 

 

 

Link to comment
Share on other sites

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

  • Like 1
Link to comment
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.
×
×
  • Create New...