❮ Previous Next ❯

GSAP transforms

  • Transformations are properties that can increase and decrease the size of the selected elements.

  • Transforms

    GSAP offers built-in aliases for transform properties that are cross-browser compatible, high-performance, and more reliable than manually animating the CSS transform string.

gsap.to(element, {
  // Instead of writing this in CSS:
  // transform: "translate(-50%, -50%)"
  xPercent: -50,
  yPercent: -50,
});

  • In regular CSS, the order of transform functions (like translate, scale, rotate, etc.) affects the final result — changing the sequence can completely alter the transformation.
    However, GSAP standardizes this by always applying transforms in a fixed, consistent order for predictable results:

    Order of application:

    1. Translation (x, y, z)

    2. Scale

    3. RotationX

    4. RotationY

    5. Skew

    6. Rotation (same as rotationZ)

    This ensures that your transforms behave the same way every time — no surprises, no browser inconsistencies.

  • GSAP Property Equivalent CSS / Description
    x: 100 transform: translateX(100px)
    y: 100 transform: translateY(100px)
    xPercent: 50 transform: translateX(50%)
    yPercent: 50 transform: translateY(50%)
    scale: 2 transform: scale(2)
    scaleX: 2 transform: scaleX(2)
    scaleY: 2 transform: scaleY(2)
    rotation: 90 transform: rotate(90deg)
    rotation: "1.25rad" transform: rotate(1.25rad)
    skew: 30 transform: skew(30deg)
    skewX: 30 transform: skewX(30deg)
    skewY: "1.23rad" transform: skewY(1.23rad)
    transformOrigin: "center 40%" transform-origin: center 40%
    opacity: 0 Adjusts the element’s opacity
    autoAlpha: 0 Shorthand for opacity + visibility (sets visibility: hidden when opacity = 0)
    duration: 1 animation-duration: 1s
    repeat: -1 animation-iteration-count: infinite
    repeat: 2 animation-iteration-count: 3
    delay: 2 animation-delay: 2s
    yoyo: true animation-direction: alternate (makes the animation reverse every other cycle)
❮ Previous Next ❯