❮ Previous

Transform Properties

  • Transform Properties are used to apply a complex transformation to the selected Object.

  • Complex Strings

    GSAP can smoothly animate complex string-based CSS values such as:

    • boxShadow: "0px 0px 20px 20px red"

    • borderRadius: "50% 50%"

    • border: "5px solid rgb(0,255,0)"

    It automatically detects when a property needs a vendor prefix and applies it, so you don’t have to worry about browser compatibility.

  • Units

    GSAP uses smart defaults for units. For example, x: 24 is automatically treated as 24px. If you want to use another unit (like vw, %, or em), just wrap the value in a string.

gsap.to(element, {
  rotation: 360,        // defaults to degrees
  rotation: "1.25rad",  // use radians
  x: 24,                // defaults to px
  x: "20vw",            // viewport width unit
});

  • 3D Transforms

    GSAP supports full 3D transform animations such as rotationX, rotationY, rotationZ, z, perspective, and transformPerspective — all supported in modern browsers.

gsap.to(element, {
  duration: 2,
  rotationX: 45,
  scaleX: 0.8,
  z: -300,
});

  • To achieve a true 3D perspective, you must either:

    • Apply perspective to the parent container (so all child elements share the same vanishing point), or

    • Use transformPerspective on the individual element itself.

// Apply perspective to a container (recommended)
gsap.set(container, { perspective: 500 });

// Apply perspective to a single element
gsap.set(element, { transformPerspective: 500 });


.myClass {
  transform: perspective(500px) rotateX(45deg);
}


gsap.set(element, {
  transformPerspective: 500,
  rotationX: 45,
});

  • 3D Transforms

    force3D

    force3D improves performance by using translate3d() instead of translate() when possible.

    • Default: "auto" — GSAP automatically enables and disables GPU acceleration when needed.

    • force3D: true — keeps it in 3D mode (more GPU usage, but higher speed).

    • force3D: false — forces 2D mode (useful if GPU memory is limited).

    This optimization ensures smoother animations by offloading work to the GPU.

  • transformOrigin

    Defines the point around which all transforms (2D and 3D) occur.
    By default, it’s "50% 50%" — the element’s center.

You can use keywords, percentages, or pixels: 

// Rotate around the top-left corner
gsap.to(element, {
  duration: 2,
  rotation: 360,
  transformOrigin: "left top",
});

// Spin and scale around a custom point (50px right, 20px down)
gsap.to(element, {
  duration: 2,
  rotation: 270,
  scale: 0.5,
  transformOrigin: "50px 20px",
});

You can also define a 3D transform origin by adding a third value (the Z offset): 

// Rotates around a point 400px behind the element (in 3D space)
gsap.to(element, {
  duration: 2,
  rotationY: 360,
  transformOrigin: "50% 50% -400px",
});
❮ Previous