Add animation for favorites filtering

app/components/palettes-list.hbs

@@ -1,8 +1,8 @@
-<div class="palettes-list">
-  {{#each @palettes as |palette|}}
+<AnimatedContainer class="palettes-list">
+  {{#animated-each @palettes use=this.transition as |palette|}}
     <PaletteRow
       @moveColorsBetweenPalettes={{@moveColorsBetweenPalettes}}
       @palette={{palette}}
     />
-  {{/each}}
-</div>
+  {{/animated-each}}
+</AnimatedContainer>

app/components/palettes-list.js

@@ -1,4 +1,20 @@
 import Component from '@glimmer/component';
+import { fadeOut } from 'ember-animated/motions/opacity';
+import move from 'ember-animated/motions/move';
 
 export default class PalettesListComponent extends Component {
+  *transition({ keptSprites, insertedSprites, removedSprites }) {
+    for (let sprite of insertedSprites) {
+      sprite.startTranslatedBy(0, -sprite.finalBounds.height / 2);
+      move(sprite);
+    }
+
+    for (let sprite of keptSprites) {
+      move(sprite);
+    }
+
+    for (let sprite of removedSprites) {
+      fadeOut(sprite);
+    }
+  }
 }