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

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

.then(function(newView){
        return animate(newView, {opacity: [1, 0]}, opts);
      });
  })

function animateWidth() {
  let promises = [];
  if (this.newElement) {
    let width = this.newElement.width();
    this.newElement.css('display', 'none');
    promises.push(
      animate(this.newElement, { display: '', width: [ width, 0] }).then(() => {
        this.newElement.css('width', '');
      })
    );
  }
  if (this.oldElement) {
    promises.push(animate(this.oldElement, { width: 0 }));
  }
  return Promise.all(promises);
}

opts.adjust.forEach(({element, property}) => {
        animate(element, {[property]: `${size}px`}, { duration: 0, queue: false });
      });
    }

function animateDialog() {
  return Promise.all([
    animate(this.oldElement, {scale: [0, 1]}, {duration: 250}),
    animate(this.newElement, {scale: [1, 0]}, {duration: 250, display: ''})
  ]);
}

var newTarget = this.newElement.find('.liquid-tether').length ?
                  this.newElement.find('.liquid-tether').children().eq(0) :
                  this.newElement;

  var oldOffset = oldTarget.offset();
  var newOffset = newTarget.offset();

  if (opts.movingSide === 'new') {
    let motion = {
      translateX: [0, oldOffset.left - newOffset.left],
      translateY: [0, oldOffset.top - newOffset.top],
      outerWidth: [newTarget.outerWidth(), oldTarget.outerWidth()],
      outerHeight: [newTarget.outerHeight(), oldTarget.outerHeight()]
    };
    oldTarget.css({ visibility: 'hidden' });
    return animate(newTarget, motion, opts);
  } else {
    let motion = {
      translateX: [newOffset.left - oldOffset.left, 0],
      translateY: [newOffset.top - oldOffset.top, 0],
      outerWidth: newTarget.outerWidth(),
      outerHeight: newTarget.outerHeight()
    };

    newTarget.css({ visibility: 'hidden', position: 'absolute' });
    return animate(oldTarget, motion, opts).then(() => {
      this.newElement.css({ visibility: '' })
      newTarget.css({ visibility: '', width: '', height: '', transform: ''});
      oldTarget.css({ width: '', height: '', transform: '', position: ''});
    });
  }
}

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

        () => animate(this.newElement, {
          [property]: ["0px", (-1 * bigger * direction) + 'px']
        }, halfDuration, 'moving-in')
      )

function animateDialog() {
  return Promise.all([
    animate(this.oldElement, {scale: [0, 1]}, {duration: 250}),
    animate(this.newElement, {scale: [1, 0]}, {duration: 250, display: ''})
  ]);
}