javascript - Reverse SVG paths being animated with Javascript

Question

First: Credit where credit is due, this code block was created by Mary Lou here, I've only made a few very slight edits. The problem I'd like to solve is to modify wipeDown to animate the paths in reverse, from the top to the bottom. Currently both wipeUp and wipeDown animate the SVG paths from the bottom to the top of the window.

I think that might be doable by editing the str in the updatePath method, hoping someone can confirm and maybe lend a hand or provide guidance?

I've included the entire codeblock for below clarity.

export class ShapeOverlays {
  constructor(elm) {
    this.elm = elm;
    this.path = elm.querySelectorAll('path');
    this.numPoints = 11;
    this.duration = 360;
    this.delayPointsArray = [];
    this.delayPointsMax = 160;
    this.delayPerPath = 160;
    this.timeStart = Date.now();
    this.isOpened = false;
    this.isAnimating = false;
  }

  //OG Methods

  toggle() {
    this.isAnimating = true;
    for (var i = 0; i < this.numPoints; i++) {
      this.delayPointsArray[i] = Math.random() * this.delayPointsMax;
    }
    if (this.isOpened === false) {
      this.open();
    } else {
      this.close();
    }
  }

  //Updated Methods
  wipeUp() {
    this.isAnimating = true;
    for (var i = 0; i < this.numPoints; i++) {
      this.delayPointsArray[i] = Math.random() * this.delayPointsMax;
    }
    this.isOpened = true;
    //this.elm.classList.add('is-opened');
    this.timeStart = Date.now();
    this.renderLoop();
  }
  wipeDown() { <--- What I would like to modify to reverse the animation
    this.isAnimating = true;
    for (var i = 0; i < this.numPoints; i++) {
      this.delayPointsArray[i] = Math.random() * this.delayPointsMax;
    }
    this.isOpened = false;
    this.elm.classList.remove('is-opened');
    this.timeStart = Date.now();
    this.renderLoop();
  }
  updatePath(time) {
    const points = [];
    for (var i = 0; i < this.numPoints; i++) {
      points[i] = (1 - ease.cubicInOut(Math.min(Math.max(time - this.delayPointsArray[i], 0) / this.duration, 1))) * 100
    }

    let str = '';
    <--- Below is where I THINK the change might need to occur --->
    str += (this.isOpened) ? `M 0 0 V ${points[0]}` : `M 0 ${points[0]}`; 
    for (var i = 0; i < this.numPoints - 1; i++) {
      const p = (i + 1) / (this.numPoints - 1) * 100;
      const cp = p - (1 / (this.numPoints - 1) * 100) / 2;
      str += `C ${cp} ${points[i]} ${cp} ${points[i + 1]} ${p} ${points[i + 1]} `;
    }
    str += (this.isOpened) ? `V 100 H 0` : `V 0 H 0`;
    return str;
  }
  render() {
    if (this.isOpened) {
      for (var i = 0; i < this.path.length; i++) {
        this.path[i].setAttribute('d', this.updatePath(Date.now() - (this.timeStart + this.delayPerPath * i)));
      }
    } else {
      for (var i = 0; i < this.path.length; i++) {
        this.path[i].setAttribute('d', this.updatePath(Date.now() - (this.timeStart + this.delayPerPath * (this.path.length - i - 1))));
      }
    }
  }
  renderLoop() {
    this.render();
    if (Date.now() - this.timeStart < this.duration + this.delayPerPath * (this.path.length - 1) + this.delayPointsMax) {
      requestAnimationFrame(() => {
        this.renderLoop();
      });
    }
    else {
      this.isAnimating = false;
    }
  }
}