Jump to content


Skew on TweenMax 1.18 vs GSAP 3

Recommended Posts

Can you guys please help me with figuring out how to use skewX and skewY in the new GSAP3 version ? Looks like it has a different Behaviour than before in TWeenMax 1.18 i.e. See my examples:


Older Version (i.e. TweenMax 1.18) : 

Newer Version GSAP3 : 

See the Pen GRgegOj by themepunch (@themepunch) on CodePen


TweenMax 1.18 ( use matrix)

gsap3 (  use css skew now)




Hope you can give me a hint !  Thanks a lot ! Really appreciate your help ! 



See the Pen mdyoyKO by themepunch (@themepunch) on CodePen

Link to comment
Share on other sites

Hey themepunch. This is because compensated skews were removed as the default for skews in GSAP 3. Now skews work like they do outside of GSAP by default.


We have a helper function that adds support for compensated skews:

function compensatedSkew() {
  var targets = this.targets(),
      i = targets.length,
      DEG2RAD = Math.PI / 180,
      target, scaleY, scaleX, cache;
  while (i--) {
    target = targets[i];
    cache = target._gsap;
    scaleY = cache.scaleY;
    scaleX = cache.scaleX;
    cache.scaleY *= Math.cos(parseFloat(cache.skewX) * DEG2RAD);
    cache.scaleX *= Math.cos(parseFloat(cache.skewY) * DEG2RAD);
    cache.renderTransform(1, cache);
    cache.scaleY = scaleY;
    cache.scaleX = scaleX;

// usage:
gsap.set(target, {skewX: -30, onUpdate: compensatedSkew});


  • Like 2
Link to comment
Share on other sites

Lovely ! Somehow i overseen that page ! Great solutions i can see there ! Thank you and have a great Weekend ! 

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.