diff --git a/client/src/components/SourceCard.vue b/client/src/components/SourceCard.vue
index f1c522c..80bec9a 100644
--- a/client/src/components/SourceCard.vue
+++ b/client/src/components/SourceCard.vue
@@ -29,6 +29,7 @@ const containerClasses = computed(() => {
     'source-card__container__selected': props.selected,
     'source-card__container__showBadge': props.badge,
     'source-card__container__disabled': props.disabled,
+    [`source-card__container__index_${props.index}`]: true,
   }
 })
 </script>
@@ -49,7 +50,10 @@ const containerClasses = computed(() => {
     background-color: $sourcecard-background-color;
     color: $sourcecard-text-color;
     cursor: not-allowed;
-    animation: source-show 1s ease-out;
+    opacity: 0;
+    animation-name: source-show;
+    animation-duration: 1s;
+    animation-timing-function: cubic-bezier(0.2, 2, 0.7, 1.5);
     animation-fill-mode: forwards;
 
     &__selectable {
@@ -74,6 +78,17 @@ const containerClasses = computed(() => {
       animation: source-fade-out 0.7s linear;
       animation-fill-mode: forwards;
     }
+
+    &__index_0 { animation-delay: 0.0s; }
+    &__index_1 { animation-delay: 0.5s; }
+    &__index_2 { animation-delay: 1.0s; }
+    &__index_3 { animation-delay: 1.5s; }
+    &__index_4 { animation-delay: 2.0s; }
+    &__index_5 { animation-delay: 2.5s; }
+    &__index_6 { animation-delay: 3.0s; }
+    &__index_7 { animation-delay: 3.5s; }
+    &__index_8 { animation-delay: 4.0s; }
+    &__index_9 { animation-delay: 4.5s; }
   }
 
   &__badge-container {
@@ -106,12 +121,12 @@ const containerClasses = computed(() => {
 @keyframes source-show {
   from { 
     position: relative;
-    left: -40px;
-    opacity: 0%;
+    top: -40px;
+    opacity: 5%;
   }
   to {
     position: relative;
-    left: 0;
+    top: 0;
     opacity: 100%;
   }
 }