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

} 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 default function rotateBelow(opts={}) {
  var direction = 1;
  if (opts.direction === 'cw') {
    direction = -1;
  }
  stop(this.oldElement);
  if (this.oldElement) {
    this.oldElement.css('transform-origin', '50% 150%');
  }
  if (this.newElement) {
    this.newElement.css('transform-origin', '50% 150%');
  }
  return Promise.all([
    animate(this.oldElement, { rotateZ: -90*direction + 'deg' }, opts),
    animate(this.newElement, { rotateZ: ['0deg', 90*direction+'deg'] }, opts),
  ]);
}
// END-SNIPPET

export default function (/* arg1, arg2 */) {
  // Stop any currently running animation on oldElement
  stop(this.oldElement);

  // Fade out the old element
  return animate(this.oldElement, { opacity: 0 })
    // And then fade in the new element, from opacity 0 to 1
    .then( () =>
      animate(this.newElement, { opacity: [1, 0] })
    );
}

} 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 default function fade(oldView, insertNewView) {
  stop(oldView);
  return animate(oldView, {opacity: 0})
    .then(insertNewView)
    .then(function(newView){
      return animate(newView, {opacity: [1, 0]});
    });
}

this.use(function(oldView, insertNewView, opts) {
    stop(oldView);
    return animate(oldView, {opacity: 0}, opts)
      .then(insertNewView)
      .then(function(newView){
        return animate(newView, {opacity: [1, 0]}, opts);
      });
  })
);

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

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),
      animate(this.oldElement, oldParams, opts),
      animate(this.newElement, newParams, opts, 'moving-in')

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),
      animate(this.oldElement, oldParams, opts),
      animate(this.newElement, newParams, opts, 'moving-in')

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