const barFillContainer = new Pixi.Container();

    this.container.addChild(this.barFill);

    // this.container.addChild(this.barFill);
    barFillContainer.addChild(this.barFill);
    barFillContainer.zIndex = 4;
    this.container.addChild(barFillContainer);

    const maskContainer = new Pixi.Container();
    // this mask moves up and down

    this.container.addChild(this.mask); // have to add child here -- not sure why
    this.barFill.mask = this.mask;

    // this mask does not
    const fixedMask = new Pixi.Graphics();
    fixedMask.beginFill(0x000000, 1); // color and alpha literally dont matter cuz its a mmask
    fixedMask.drawRoundedRect(0, 0, this.innerBarWidth, this.innerBarHeight, this.cornerRadius); // same dims as the inner bar. note that this doesnt take into account the line style of width 2, so it will cause the filling to leak over into the line style. to fix this barBorder is reapplied over the top to cover the leaks.
    fixedMask.zIndex = 31; // doesnt matter
    fixedMask.pivot.x = this.innerBarWidth/2; // left-right center in ourselves
    fixedMask.x = this.boundingBoxWidth/2; // center in the boundingBox
    fixedMask.y = this.textHeight; // same positioning as inner bar
    maskContainer.addChild(this.mask);
    // maskContainer.addChild(fixedMask);
    this.container.addChild(maskContainer);
    // this.container.addChild(this.mask); // have to add child here -- not sure why
    this.barFill.mask = maskContainer;

    this.container.addChild(fixedMask);
    barFillContainer.mask = fixedMask;