Sliding Results Bar by Variable - impossible?

I've attached a .story file with a simple example demonstrating how to achieve this effect. In short, start by drawing a rectangle, for example, 400px wide, which will serve as the background for the fill. Then, draw a line on top of the rectangle and align it with the left edge of the rectangle. Once aligned, set the line's width to 1px and its height to 0px. Next, select the line, right-click to access 'Accessibility' and enter 'line' as 'Alternative Text', so that we can reference it in our scripts. 

The main goal is to properly access the line 'x2' property and manipulate its value with the value of our variable.

Example:
Current x2 = 1;
Var = 72;
Base length: 400px
New x2 = 72 * (400 / 100) = 288px (72% of the length of the base rectangle)

Initially, I load this script to set the line's stroke-width to match the height of the base rectangle.

const fill = document.querySelector('[data-acc-text="line"] line');
fill.style.setProperty('stroke-width', '15');

Main script

const fillWidthCurrent = document.querySelector('[data-acc-text="line"] [x2]');
const maxLength = 400;

const myVar = getVar('Var1');
const fillWidthAfter = myVar * (maxLength / 100);

gsap.to(fillWidthCurrent, {
    duration: 1,
    attr: {
        x2: fillWidthAfter
    },
    ease: 'power2.out'
});

Result