How to use the liquid-fire.finish function in liquid-fire

let outOpts = opts,
      firstStep;

  if (dimension.toLowerCase() === 'x') {
    oldParams.translateX = `${(direction * offset)}px`;
    newParams.translateX = ['0px', `${(direction * offset)}px`];
  } else {
    oldParams.translateY = `${(direction * offset)}px`;
    newParams.translateY = ['0px', `${(direction * offset)}px`];
  }

  if (fadingElement) {
    // We still have some older version that is in the process of
    // fading out, so out first step is waiting for it to finish.
    firstStep = finish(fadingElement, 'fade-out');
  } else {
    if (isAnimating(this.oldElement, 'fade-in')) {
      // if the previous view is partially faded in, scale its
      // fade-out duration appropriately.
      outOpts = { duration: timeSpent(this.oldElement, 'fade-in') };
    }
    stop(this.oldElement);
    firstStep = animate(this.oldElement, oldParams, outOpts, 'fade-out');
  }
  return firstStep.then(() => {
    return animate(this.newElement, newParams, opts, 'fade-in');
  });
}

let outOpts = opts,
      firstStep;

  if (dimension.toLowerCase() === 'x') {
    oldParams.translateX = `${(direction * offset)}px`;
    newParams.translateX = ['0px', `${(direction * offset)}px`];
  } else {
    oldParams.translateY = `${(direction * offset)}px`;
    newParams.translateY = ['0px', `${(direction * offset)}px`];
  }

  if (fadingElement) {
    // We still have some older version that is in the process of
    // fading out, so out first step is waiting for it to finish.
    firstStep = finish(fadingElement, 'fade-out');
  } else {
    if (isAnimating(this.oldElement, 'fade-in')) {
      // if the previous view is partially faded in, scale its
      // fade-out duration appropriately.
      outOpts = { duration: timeSpent(this.oldElement, 'fade-in') };
    }
    stop(this.oldElement);
    firstStep = animate(this.oldElement, oldParams, outOpts, 'fade-out');
  }
  return firstStep.then(() => {
    return animate(this.newElement, newParams, opts, 'fade-in');
  });
}

export function waitForPrevious(context, name) {
  if (isAnimating(context.oldElement, name)) {
    return finish(context.oldElement, name);
  } else {
    stop(context.oldElement);
    return Promise.resolve();
  }
}

elementToOverlay = this.oldElement;
  }

  var overlay = jQuery('<div class="transition-overlay"></div>');
  elementToOverlay.append(overlay);

  if (dimension.toLowerCase() === 'x') {
    property = 'translateX';
    measure = 'width';
  } else {
    property = 'translateY';
    measure = 'height';
  }

  if (isAnimating(this.oldElement, 'moving-in')) {
    firstStep = finish(this.oldElement, 'moving-in');
  } else {
    stop(this.oldElement);
    firstStep = Promise.resolve();
  }

  return firstStep.then(() =&gt; {
    var bigger = biggestSize(this, measure);

    this.oldElement[0].style.zIndex = direction &gt; 0 ? 5 : 0;
    this.newElement[0].style.zIndex = direction &gt; 0 ? 0 : 5;

    oldParams[property] = (bigger * (direction &gt; 0 ? 1 : -0.5)) + 'px';
    newParams[property] = ["0px", (bigger * (direction &gt; 0 ? -0.5 : 1)) + 'px'];

    return Promise.all([
      animate(overlay, overlayParams, opts),

};
  }

  var overlay = jQuery('<div class="transition-overlay"></div>');
  this.oldElement.append(overlay);

  if (dimension.toLowerCase() === 'x') {
    property = 'translateX';
    measure = 'width';
  } else {
    property = 'translateY';
    measure = 'height';
  }

  if (isAnimating(this.oldElement, 'moving-in')) {
    firstStep = finish(this.oldElement, 'moving-in');
  } else {
    stop(this.oldElement);
    firstStep = Promise.resolve();
  }

  return firstStep.then(() =&gt; {
    var bigger = biggestSize(this, measure);

    this.oldElement[0].style.zIndex = direction &gt; 0 ? 5 : 0;
    this.newElement[0].style.zIndex = direction &gt; 0 ? 0 : 5;

    oldParams[property] = (bigger * (direction &gt; 0 ? 1 : -0.5)) + 'px';
    newParams[property] = ["0px", (bigger * (direction &gt; 0 ? -0.5 : 1)) + 'px'];

    return Promise.all([
      animate(overlay, overlayParams, opts),

var oldParams = {},
      newParams = {},
      firstStep,
      property,
      measure;

  if (dimension.toLowerCase() === 'x') {
    property = 'translateX';
    measure = 'width';
  } else {
    property = 'translateY';
    measure = 'height';
  }

  if (isAnimating(this.oldElement, 'moving-in')) {
    firstStep = finish(this.oldElement, 'moving-in');
  } else {
    stop(this.oldElement);
    firstStep = Promise.resolve();
  }

  return firstStep.then(() => {
    var bigger = biggestSize(this, measure);
    oldParams[property] = (bigger * direction) + 'px';
    newParams[property] = ["0px", (-1 * bigger * direction) + 'px'];

    return Promise.all([
      animate(this.oldElement, oldParams, opts),
      animate(this.newElement, newParams, opts, 'moving-in')
    ]);
  });
}