Skew on TweenMax 1.18 vs GSAP 3

[themepunch 61 Likes (Contributor)]

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

[ZachSaucier 7,132 Likes (Superhero)]

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});

 

[themepunch 61 Likes (Contributor)]

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