Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
martis

translate and x/y

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

Hey guys,

 

I have an older project where I was centering everything using

position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
-moz-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
-o-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);

I noticed when I upgraded to the latest GSAP that if I do a tween on any of those elements x or y that I lose my centering...

 

Any advice on how to remedy this without having to do a whole lot of rework?

 

Thanks

Link to comment
Share on other sites

Any chance you could provide a codepen demo? I'd really like to see what's going on. We're generally VERY careful about backward compatibility, so I'm rather confused about why your legacy project would suddenly break with a newer version of GSAP. Very interested, though. 

 

FYI, we strongly encourage folks to set transform-related values directly through GSAP for a bunch of reasons (more performant, better accuracy with rotations, browser compatibility, etc.). 

 

In your case, it'd look like:

TweenLite.set(".class", {xPercent:-50, yPercent:-50, left:"50%", top:"50%"});

Note that GSAP has special "xPercent" and "yPercent" values that can actually be combined with regular x/y values for some powerful effects. 

  • Like 3
Link to comment
Share on other sites

Hello!

 

I know what martis is going through. 

 

Although I don't know why, it is something I noticed that was possible to do in the past but it is no longer now.

 

Firstly, to answer martis, question: The solution to your issue is to use the xPercent and yPercent as proposed by Jack. Just do a general call to all the elements you need centred alignment, once you do that once, it should not be necessary to re-align it.

 

From the top of my head, I can't remember if you should remove the CSS transform rules. I'd say do it just for the sake of reducing redundant code but you might not need it.

  • Like 1
Link to comment
Share on other sites

No worries... I ended up wrapping the elements in another div. In the future I will just use xPercent/yPercent as Jack suggested.

 

Thanks!

Link to comment
Share on other sites

@Dipscom and @martis, any chance you could provide an example I could take a peek at? It sounds like you both ran into the same issue but I'm kinda shooting blind here and I'd love to make sure that anything is fixed that needs fixing. 

Link to comment
Share on other sites

Hey Jack,

 

I tried to make an example that replicated the issue but was not able to recreate it...

 

There may be other external styling involved that I am unaware of

Link to comment
Share on other sites

  • 4 years later...

I know this is an older thread, but I just encountered the same thing. I have a draggable dialog, and the original css looked like: 

 

.dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

But draggable offset the dialog's x and y position by 50%. Here is the fix (I'm using another element as a trigger for Draggable):

 

// set the dialog x,y position outside of css
gsap.set(dialog, {
  xPercent: -50,
  yPercent: -50,
  left: '50%',
  top: '50%'
});

// now draggable works without translating the dialog by 50% 
Draggable.create(dialog, {
  trigger: dialogHeader,
  type: 'x,y',
  edgeResistance: 0.65,
  bounds: modal
});

Just sharing in case someone encounters the exact same thing in 2021. 

  • Like 1
Link to comment
Share on other sites

  • 5 months later...

Cheers! Ran into the same problem.

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.
×