How to use the ember-animated.wait function in ember-animated

if (this.isShowingFinal) {
      removedSprites.forEach(fadeOut);

      // Need to set inserted sprites to 0 opacity in case their animation is interrupted
      insertedSprites.forEach(sprite => {
        sprite.applyStyles({
          opacity: '0'
        });
      });

      keptSprites.map(sprite => {
        fadeIn(sprite);
        move(sprite);
      });

      yield wait(duration);

      while (this.animationPaused) {
        yield wait(100);
      }

      // this.set('isAnimatingInsertedLines', true);
      this.onAnimationChange(true);

      for (let sprite of insertedSprites) {
        sprite.moveToFinalPosition();
        sprite.applyStyles({
          overflow: 'hidden',
          opacity: '1',
          display: 'inline-block',
          width: 'auto'
        });

//
      // These receivedSprites are homed inside the receivedSprite that is doing
      // the outerBox transition. I *think* that if we moved *both* of them to
      // initial position of their matched sprites, their relative positioning
      // may make sense?
      //
      // TODO: either design an API that makes moved-by-default explicit instead
      // of implicit, OR see if there is an automatic nested behavior that we're
      // failing to do.
      sprite.moveToFinalPosition();

      sprite.applyStyles({ opacity: 0 });
    });

    if (receivedSprites.length > 0) {
      yield wait(duration * 0.8);
      receivedSprites.forEach(sprite => {
        opacity(sprite, { from: 0, to: 1, duration: duration * 0.2 });
      });
    }
  },

width: 'auto'
        });

        let totalWidth = sprite.element.getBoundingClientRect().width;
        let chars = sprite.element.textContent;
        let characterWidth = totalWidth / chars.length;

        sprite.reveal();

        for (var i = 0; i < chars.length; i++) {
          sprite.applyStyles({
            width: characterWidth * (i + 1)
          });

          if (chars[i] !== " ") {
            yield wait(15);
          }

        }
      }

      // this.set('isAnimatingInsertedLines', false);
      this.onAnimationChange(false);

    } else {
      removedSprites.forEach(fadeOut);
      keptSprites.map(sprite => {
        fadeIn(sprite);
        move(sprite);
      });
      insertedSprites.forEach(fadeIn);
    }

// Need to set inserted sprites to 0 opacity in case their animation is interrupted
      insertedSprites.forEach(sprite => {
        sprite.applyStyles({
          opacity: '0'
        });
      });

      keptSprites.map(sprite => {
        fadeIn(sprite);
        move(sprite);
      });

      yield wait(duration);

      while (this.animationPaused) {
        yield wait(100);
      }

      // this.set('isAnimatingInsertedLines', true);
      this.onAnimationChange(true);

      for (let sprite of insertedSprites) {
        sprite.moveToFinalPosition();
        sprite.applyStyles({
          overflow: 'hidden',
          opacity: '1',
          display: 'inline-block',
          width: 'auto'
        });

        let totalWidth = sprite.element.getBoundingClientRect().width;
        let chars = sprite.element.textContent;

let magnify = awayDistance * screenBounds.width / distanceFromCenter;

      // our sprite's center and the screen's center form a line. We
      // want to aim for a place along that line far offscreen.
      sprite.endAtPixel({ x: magnify * dx,  y: magnify * dy });
      distances.set(sprite, distanceFromCenter);

      // TODO: this is a workaround for an issue in ember-animated,
      // you shouldn't ever need to invoke this hook manually.
      arguments[0].onMotionStart(sprite);
    });

    removedSprites.sort((a,b) => distances.get(b) - distances.get(a));
    for (let sprite of removedSprites) {
      move(sprite, { easing: easeIn });
      yield wait(perSpriteDelay);
    }

    sentSprites.concat(receivedSprites).forEach(sprite => {
      sprite.applyStyles({
        zIndex: 1
      });
      move(sprite);
      scale(sprite);
    });

    receivedSprites.forEach(sprite => {
      motionCenterX = sprite.absoluteFinalBounds.left + sprite.absoluteFinalBounds.width / 2;
      motionCenterY = sprite.absoluteFinalBounds.top + sprite.absoluteFinalBounds.height / 2;
    });

* shuffleWithStagger({ receivedSprites }) {
    for (let sprite of receivedSprites) {
      sprite.applyStyles({
        zIndex: (receivedSprites.length - receivedSprites.indexOf(sprite)) * 100
      });
      move(sprite);
      scale(sprite);

      yield wait(75);
    }
  },

width: `${width * 0.6}px`,
      });

      yield wait(duration / 5);

      sprite.applyStyles({
        width: `${width * 0.8}px`,
      });

      yield wait(duration / 5);

      sprite.applyStyles({
        width: `${width}px`,
      });

      yield wait(duration / 5);
    }
  },
});

inner: function * ({ receivedSprites, sentSprites, duration }) {
    sentSprites.forEach(sprite => {
      move(sprite);
      opacity(sprite, { to: 0, duration: duration * 0.2 });
      sprite.applyStyles({ 'z-index': 1 });
    });

    receivedSprites.forEach(sprite => {
      let diff = sprite.difference('finalBounds', sprite, 'initialBounds');
      sprite.translate(diff.dx, diff.dy);
      sprite.applyStyles({ opacity: 0 });
    });

    if (receivedSprites.length > 0) {
      yield wait(duration * 0.75);
      receivedSprites.forEach(sprite => {
        opacity(sprite, { from: 0, to: 1, duration: duration * 0.2 });
      });
    }
  },