How to use the liquid-fire.Promise.all 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

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

  return () => Promise.all(targets.map(target => animate(target.element, {[target.property]: `${distance}px`}, opts)));
}

overlayAnimation = this.lookup(opts.overlay);
    }
  }

  var boxAnimation = animateDialog;
  var boxAnimationArgs = [];
  if (opts.box) {
    if (Ember.isArray(opts.box)) {
      boxAnimation = this.lookup(opts.box[0]);
      boxAnimationArgs = opts.box.slice(1);
    } else {
      boxAnimation = this.lookup(opts.box);
    }
  }

  return Promise.all([
    overlayAnimation.apply(overlay, overlayAnimationArgs),
    boxAnimation.apply(box, boxAnimationArgs)
  ]);

}

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

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

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

    return Promise.all([
      animate(overlay, overlayParams, opts),
      animate(this.oldElement, oldParams, opts),
      animate(this.newElement, newParams, opts, 'moving-in')
    ]).then(() => overlay.remove());
  });
}

function animateOverlay() {
  return Promise.all([
    animate(this.oldElement, {opacity: [0, 0.5]}, {duration: 250}),
    animate(this.newElement, {opacity: [0.5, 0]}, {duration: 250, display: ''})
  ]);
}

return waitForPrevious(this, 'moving-in').then(() => {
    let bigger = biggestSize(this, measure);
    let animateMargin = marginAdjustment(this, measure, opts);
    let halfDuration = { duration: opts.duration / 2 };
    return Promise.all([
      animateMargin(),
      animate(this.oldElement, {
        [property]: (-1 * bigger * direction) + 'px'
      }, halfDuration).then(
        () => 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: ''})
  ]);
}

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

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

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

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

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