Jump to content


Animate from transform:translate(-50%,-50%) to z value, not working

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

I'm trying to set an element with TweenMax.set() and assign the values of {x: "-50%", y: "-50%" } to it in order to center it with additional top: 50% and left: 50% values in CSS. I then want the z axis to animate from that in the timeline, but it seems to ignore that value and is having trouble maybe to merge the set values to the new values in the timeline.

Am I doing something wrong here? The x and y values should be constant throughout the whole animation. It's only the z axis animation that I want to add to this in the timeline.

See the Pen wQaNYR by anon (@anon) on CodePen

Link to comment
Share on other sites

To animate element across z-axis you need to set perspective on the parent. If you want to set x and y translate in percentage then you can instead use xPercent and yPercent.


Go through this page to learn more about transforms and how GSAP can make things easy for you: https://greensock.com/docs/Plugins/CSSPlugin


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


  • Like 6
Link to comment
Share on other sites

Thank you so much Sahil! 

This is not really because of GSAP, but any idea why the transform origin is not in the center of the div having the z axis animated in IE 11? It scales down from the bottom right corner. Even if I set the transformOrigin: 50% 50% on the div. Any ideas on how to make it transform from the center on IE 11?

Link to comment
Share on other sites

That's because you are setting position to fixed and setting left, top which seems to create situation where IE does IE stuff and messes up transform origin. Any reason you are setting top, left? Doesn't seem like you have to. If you remove top left and remove xPercent, yPercent from javascript it will work fine.

  • Like 3
Link to comment
Share on other sites

It's because the image in the div has a higher height than the viewport. So it's a way to make the image first "cover" the screen, and then when the axis is animated to make the image smaller, the whole image shows. It gets cropped by the window edges in the beginning, basically.

If I remove the top and left values from the CSS, the div would be placed at the top instead of the center of the screen, which would make the div not being centered when applying the transform.

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.