Jump to content


gsap transform overwriting existing css rules

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 People :)


So, I'm trying to animate a bunch of elements from already centered positions.


My problem is, when animating something that includes a transform-tween (ex. xPercent: og just x:) the tween seems to overwrite the existing transforms in the css by creating the matrix used by gsap.


I'm certain there is a easy fix for this, I'm just not seeing it clearly.... :)

Link to comment
Share on other sites

Hey 3jerregaard


Do you think you could whip a demo up for us? The answer will probably be simple but it will depend on what you are doing, how you are doing and what your desired outcome is.


  • Like 2
Link to comment
Share on other sites

Hi 3jerregaard :)


Welcome to the GreenSock forum.


As Dipscom mentioned, a CodePen demo will help us troubleshoot your problem.


My personal preference in getting things ready to animate is to position them with GSAP's set() method. It's a convenience method that allows you to 'set the stage' and animate everything in the JavaScript. It also cuts down on any conflicts between CSS and GSAP.  Just my two cents worth. More information can be found here:




Happy tweening.


  • Like 3
Link to comment
Share on other sites

Are you trying to center something like this?

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

Percents like that get converted to pixels. If you check the computed style before doing anything with GSAP, you'll see that it gives a matrix without those percentages. That's why it's best to set stuff with GSAP.


You can also center stuff with flexbox.

.my-container {
  display: flex;
  align-items: center;
  justify-content: center;

See the Pen f0f832a5d08d781273306104cddecc5a by osublake (@osublake) on CodePen



  • Like 2
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.