Chapter 165: "Compensated" Skews (Helper)

Core Idea

An unofficial helper that reproduces GSAP 2's old skewType: "compensated" rendering behavior in GSAP 3, which visually adjusts scaleX/scaleY to counteract the distortion skewing normally introduces.

Key Concepts

• Applied via a tween's onUpdate, not a config option — GSAP 3 doesn't have a built-in skewType anymore.
• Only works with degree-based skews, and is explicitly not an officially supported API.
• Directly manipulates the internal _gsap cache's scaleX/scaleY before calling renderTransform().

Code Examples

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

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

• What it demonstrates: hooking onUpdate to post-process a tween's rendered transform every frame.

Anti-patterns

• Relying on this for production-critical visuals: it touches undocumented internals (_gsap cache) and isn't officially supported, so it can break across GSAP versions.

Connects To

• CSS core plugin: owns the normal skew rendering this helper overrides.