React GSAP css animation from right to left with transform

I am refactoring a project using functional components and React Hooks.

The original animation move the BG Component from right to left but for some reasons with exactly the same code my animation works the other way around ( from left to right ). I have to correct this behavior.

I have reproduced the case => https://codesandbox.io/s/weathered-currying-63uy9w?file=/src/features/bg/Bg.js

This is the code that is not working as expected, in the BG component i have the useEffect to animate BG direction in the timeline with GSAP

  useEffect(() => {
    tl.addLabel("phase-3", 0.5).fromTo(
      boxRef.current,
      t3,
      {
        transformOrigin: "100% 0",
        transform: "scaleX(0) translate3d(0px, 0px, 0px)"
      },
      {
        transform: "scaleX(1) translate3d(0px, 0px, 0px)"
        // ease: Elastic.easeOut
      },
      "phase-3"
    );
  });

So the question is, how can i animate the component from right to left and not from left to right as it is now? What am i doing wrong?