diff --git a/app/components/palettes-list.hbs b/app/components/palettes-list.hbs
index eafc98300..cde883bfd 100644
--- a/app/components/palettes-list.hbs
+++ b/app/components/palettes-list.hbs
@@ -1,8 +1,8 @@
-
- {{#each @palettes as |palette|}}
+
+ {{#animated-each @palettes use=this.transition as |palette|}}
- {{/each}}
-
\ No newline at end of file
+ {{/animated-each}}
+
\ No newline at end of file
diff --git a/app/components/palettes-list.js b/app/components/palettes-list.js
index 22227de95..03ff44a6b 100644
--- a/app/components/palettes-list.js
+++ b/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);
+ }
+ }
}