How to use ember-animated - 10 common examples

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;

sentSprites.forEach(sprite => {
      // this is needed because we're dealing with orphans who will no longer
      // automatically ride along with their original parent.
      //
      // TODO: if a parent and child sprite both get orphaned, can we maintain
      // their relationship? That would be best.
      move(sprite);

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

insertedSprites.concat(receivedSprites).forEach(sprite => {
      sprite.applyStyles({ 'pointer-events': '' });

      // this animates them to their natural opacity, which is determined by our
      // stylesheet.
      opacity(sprite);
    });

advance(ms) {
    if (this._runningSpeed) {
      throw new Error("You can't advance a running TimeControl. Use either runAtSpeed or advance but not both at once.");
    }
    this._timer += ms;
    // This waits for three frames because:
    //
    //   1. You need at least two rAFs to guarantee that everybody
    //   else who is running at rAF frequency had a chance to run
    //   (because you don't know which ones ran before you in the same
    //   frame).
    //
    //   2. Our Tween system doesn't mark Tweens as done until they
    //   had a whole frame in their "done" state (see comments in
    //   ./tween.js).
    return rAF().then(rAF).then(rAF);
  }
  runAtSpeed(factor) {

() => null,
    );
    context.insertedSprites;

    // Each motion contains its own promise that is used by
    // TransitionContext#animate so that a transition can wait for a
    // single motion to finish (as opposed to waiting for the whole
    // transition Task to finish). In this test harness, there is no
    // distinction, and this extra promises will just generate console
    // noise if it remains unconsumed.
    motion._promise.then(() => {}, () => {});

    return this.get('runner').perform(motion);
  },
  isAnimating: alias('runner.isRunning'),
  runner: task(function*(motion) {
    this.beforeAnimation(motion);
    yield* motion._run();
    this.afterAnimation(motion);
  }).restartable(),
});

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

sentSprites.forEach(sprite => {

      // Caution! This is a hack. It just happens to be safe in this situation
      // because we're messing with only the children of sentSprites, which will
      // all get destroyed at the end of animation regardless.
      [...sprite.element.children].forEach(element => {
        element.classList.add('ember-animated-hidden');
      });

      sprite.applyStyles({ 'z-index': 1 });
      move(sprite);
      resize(sprite);
      adjustColor.property('background-color')(sprite);
    });
  }