Jump to content


GSAP scale negative values

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

here you can see that the scaleX values is -0.5 but when am trying to set it to -1.5 it flips the image, instead it should grow the image 1X times. Am i doing it wrong? why do i need 0.5? because it need to look flipped.

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

  • Like 1
Link to comment
Share on other sites

The problem is that you're setting the transforms via CSS and the browser reports those as a matrix which has inherently ambiguous rotational & scale data (for example, an image that's rotated 180 degrees has the same matrix as one that has a scaleX of -1). GSAP does its best to discern the data and in this case, it was interpreted as rotation:180, scaleY:-1. 


This is why we always recommend handling all your transforms directly through GSAP - it caches the data so that it's always exactly correct. No ambiguity. And it doesn't have to keep parsing matrices. 


To solve you situation, you can simply set the rotation, scaleX and scaleY initially: 

See the Pen 3c2055c057cd71c59a38c4315 by GreenSock (@GreenSock) on CodePen


Does that help? 

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