feat: add animations to Playground elements (WIP)

client/src/components/Playground.vue

@@ -4,7 +4,7 @@
       <div class="playground__sources" :class="{ 'playground__sources__show': showSources }">
         <SourceCard v-for="(source, index) in sources" :key="source.id" :source="source" :selectable="selectable"
           :selected="selection == source.id" @click="selectSource(source)" :badge="badgeMap[source.id]"
-          :disabled="disabledMap[source.id]" :index="index" />
+          :disabled="disabledMap[source.id]" :index="index" :animation-delay="3" />
       </div>
       <div class="playground__spacer" />
       <div class="playground__quote" :class="{ 'playground__quote__show': showQuote}">
@@ -111,15 +111,19 @@ const disabledMap = computed(() => {
 
     &__show {
       visibility: visible;
+      animation: quote-show 1s linear;
     }
   }
 
   &__skip {
     visibility: hidden;
     align-self: flex-end;
+    opacity: 0;
 
     &__show {
       visibility: visible;
+      animation: quote-show 0.5s linear 5s;
+      animation-fill-mode: forwards;
     }
   }
 
@@ -128,4 +132,13 @@ const disabledMap = computed(() => {
     margin: 16px 16px 0 64px;
   }
 }
+
+@keyframes quote-show {
+  from {
+    opacity: 0%;
+  }
+  to {
+    opacity: 100%;
+  }
+}
 </style>

client/src/components/SourceCard.vue

@@ -1,6 +1,8 @@
 <template>
-  <div :class="containerClasses">
+  <div :class="containerClasses" :style="containerStyle">
-    <div class="source-card__source">{{ source.name }}</div>
+    <div class="source-card__source">
+      {{ source.name }}
+    </div>
     <div v-if="badge" class="source-card__badge-container">
       <div class="source-card__badge-text">
         {{ badge }}
@@ -20,6 +22,7 @@ const props = defineProps<{
   selected?: boolean,
   badge?: number,
   disabled?: boolean,
+  animationDelay?: number,
 }>()
 
 const containerClasses = computed(() => {
@@ -29,9 +32,12 @@ 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,
   }
 })
+
+const containerStyle = {
+  animationDelay: props.disabled ? '0' : `${props.index * 0.25 + (props.animationDelay || 0)}s`,
+}
 </script>
 
 <style lang="scss">
@@ -51,9 +57,7 @@ const containerClasses = computed(() => {
     color: $sourcecard-text-color;
     cursor: not-allowed;
     opacity: 0;
-    animation-name: source-show;
+    animation: source-show 1s cubic-bezier(0.2, 2, 0.7, 1.5);
-    animation-duration: 1s;
-    animation-timing-function: cubic-bezier(0.2, 2, 0.7, 1.5);
     animation-fill-mode: forwards;
 
     &__selectable {
@@ -78,17 +82,6 @@ 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 {
@@ -115,15 +108,22 @@ const containerClasses = computed(() => {
 }
 
 @keyframes source-fade-out {
-  to { opacity: 10%; }
+  from {
+    opacity: 100%;
+  }
+
+  to {
+    opacity: 10%;
+  }
 }
 
 @keyframes source-show {
-  from { 
+  from {
     position: relative;
     top: -40px;
     opacity: 5%;
   }
+
   to {
     position: relative;
     top: 0;