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

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');
  });
}

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');
  });
}