comments-list.js

import Component from '@ember/component';
import { easeIn, easeInAndOut, easeOut } from 'ember-animated/easings/cosine';
import move from 'ember-animated/motions/move';

export default Component.extend({
  transition({ insertedSprites, keptSprites, removedSprites }) {
    // Removed sprites should exit to the right side of the window. We use
    // easeIn here so they start with no momentum and gradually speed up until
    // they leave the screen at top speed.
    removedSprites.forEach(sprite => {
      sprite.endAtPixel({ x: window.innerWidth });
      move(sprite, { easing: easeIn });
    });

    // Kept sprites should ease out of their current position and ease in to
    // their new position.
    keptSprites.forEach(sprite => {
      move(sprite, { easing: easeInAndOut });
    });

    // Inserted sprites should come in from the right side of the window. We use
    // easeOut here so they enter at top speed and gradually slow down as they
    // approach their final position.
    insertedSprites.forEach(sprite => {
      sprite.startAtPixel({ x: window.innerWidth });
      move(sprite, { easing: easeOut });
    });
  }
});