From e841b6cba71e0f0fa452c7bc6009958fcf785a15 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Mon, 9 Sep 2024 10:39:54 -0700
Subject: [PATCH] perf: improves animation css to use translate instead

---
 assets/components/ScrollableView.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/assets/components/ScrollableView.vue b/assets/components/ScrollableView.vue
index 029639f9..62121464 100644
--- a/assets/components/ScrollableView.vue
+++ b/assets/components/ScrollableView.vue
@@ -25,7 +25,7 @@
         </div>
       </div>
       <div
-        class="animate-background h-1 bg-gradient-radial from-primary to-transparent to-70%"
+        class="animate-background h-1 bg-gradient-radial from-primary to-transparent to-50%"
         v-show="!scrollContext.paused && !scrollContext.loading"
       ></div>
       <div ref="scrollObserver" class="h-px"></div>
@@ -95,17 +95,16 @@ function scrollToBottom(behavior: "auto" | "smooth" = "auto") {
 }
 
 .animate-background {
-  animation: gradient-animation 2s ease infinite;
-  background-position: center;
+  animation: gradient-animation 3s ease-out infinite;
 }
 
 @keyframes gradient-animation {
   0%,
   100% {
-    background-size: 100% 100%;
+    transform: translateX(-25%);
   }
   50% {
-    background-size: 140% 120%;
+    transform: translateX(25%);
   }
 }
 </style>