how I can reduce the width of this SVG from only left side other should stay static

Question

I trying the GSAP to control SVG to move from right to left. it's working fine but when I want to animate it to the extreme left side but the down line should stay at the same position. the other side should remain in the same position. The second thing I want is to start from the current position(eg, click the second button then if you click on another button it should start from the position from the second button), currently, it starts from the extreme left. Any help would be appreciated.

function myFunction() {
    var tl = new TimelineMax();
    tl.fromTo('.box', 2,{scaleX: 1}, {scaleX: 0.7, transformOrigin: '100% 90%'});
    gsap.set('.box',{ strokeDasharray: '4'});
}

function myFunction1() {
    var tl = new TimelineMax();
    tl.fromTo('.box', 2,{scaleX: 1}, {scaleX: 0.2, transformOrigin: '100% 90%'});
    gsap.set('.box',{ strokeDasharray: '4'});
}


function myFunction2() {
    var tl = new TimelineMax();
    tl.fromTo('.box', 2,{scaleX: 1}, {scaleX:- 1.1, transformOrigin: '100% 90%'});
    gsap.set('.box',{ strokeDasharray: '4'});
}


function myFunction3() {
    var tl = new TimelineMax();
    tl.fromTo('.box', 2,{scaleX: 1}, {scaleX: -1.5, transformOrigin: '100% 90%'});
    gsap.set('.box',{ strokeDasharray: '4'});
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js"></script>
<div width="100%">

<svg xmlns="http://www.w3.org/2000/svg" width="544" height="190" viewBox="0 0 544 190" fill="none">
    <path class="box" d="M2 0V65.3452C2 78.6001 12.7452 89.3452 26 89.3452H518C531.255 89.3452 542 100.09 542 113.345V190" stroke="#FBDF4B" stroke-width="4" stroke-dasharray="8 8"/>
</svg>



</div>

<button onclick="myFunction()">Pos 1</button>
<button onclick="myFunction1()">Pos 2</button>
<button onclick="myFunction2()">Pos 3</button>
<button onclick="myFunction3()">Pos 4</button>

Answer 1

let prevScaleX = 1;
    
function myFunction(newScaleX) {
    let tl = new TimelineMax();
    tl.fromTo('.box', 2,{scaleX: prevScaleX}, {scaleX: newScaleX, transformOrigin: '100% 90%'});
    gsap.set('.box',{ strokeDasharray: '4'});
    prevScaleX = newScaleX;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js"></script>
<div width="100%">

<svg xmlns="http://www.w3.org/2000/svg" width="544" height="190" viewBox="0 0 544 190" fill="none">
    <path class="box" d="M2 0V65.3452C2 78.6001 12.7452 89.3452 26 89.3452H518C531.255 89.3452 542 100.09 542 113.345V190" stroke="#FBDF4B" stroke-width="4" stroke-dasharray="8 8"/>
</svg>

<button onclick="myFunction(0.7)">Pos 1</button>
<button onclick="myFunction(0.2)">Pos 2</button>
<button onclick="myFunction(-1.1)">Pos 3</button>
<button onclick="myFunction(-1.5)">Pos 4</button>

all you have to do is keep track of previous scaleX and use it as next "from" in the fromTo