GSAP scaleX: 1 animation reverts to scale: none in DOM

I’m trying to animate an element’s width from scaleX(0) to scaleX(1) using GSAP. Here’s my setup:

Initial CSS: The element starts with transform: scaleX(0); in CSS:

.line {
    background-color: rgba(39, 39, 39, 0.3);
    max-width: 1360px;
    height: 1px;
    transform: scaleX(0);
    transform-origin: center;
}

GSAP Animation Code: I use GSAP to animate the element to scaleX(1) upon scrolling, with a slight delay using setTimeout:

setTimeout(() => {
  gsap.to(".line-wrapper .line", {
    scaleX: 1,
    scrollTrigger: {
      trigger: ".line-wrapper",
      start: "top bottom",
      scrub: false,
      markers: false,
    },
    duration: 1.2
  });
}, 100);

Even though I set scaleX: 1 in GSAP, the resulting DOM shows

translate: none;
rotate: none;
scale: none;
transform: translate(0px, 0px);

and the element does not animate as expected. I also tried transform: “scale(1, 1)” in GSAP and transform: scale(0, 0) in css, but it didn’t work either

How can I make sure GSAP animates from scaleX(0) to scaleX(1) and reflects the correct scaleX value in the DOM? Also, why does the DOM revert to scale: none despite the GSAP setting?