Make news scroll past more smoothly

gorge.css

@@ -582,24 +582,33 @@ div::-webkit-scrollbar-corner {
   top: 15vh;
   left: 50vw;
   transform-origin: 0% 0%;
-  animation: news-text-frames 7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  animation: news-text-enter 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   animation-fill-mode: both;
   max-width: 40vw;
   font-size: 16pt;
 }
 
-@keyframes news-text-frames {
+.news-text.news-text-leaving {
+  pointer-events: none;
+  animation: news-text-exit 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  animation-fill-mode: both;
+}
+
+@keyframes news-text-enter {
   0% {
     transform: translate(-50%, -50px);
     opacity: 0;
   }
-  20% {
+  100% {
     transform: translate(-50%, 0px);
     opacity: 1;
   }
-  80% {
-    transform: translate(-50%, -0px);
-    opacity: 1;
+}
+
+@keyframes news-text-exit {
+  0% {
+    transform: translate(-50%, 0px);
+    opacity: 1
   }
   100% {
     transform: translate(-50%, 50px);

gorge.js

@@ -1112,20 +1112,26 @@ function showNews(text) {
   div.innerHTML = text;
 
   div.classList.add("news-text");
+  const body = document.querySelector("body");
 
   div.addEventListener("click", () => {
     clearTimeout(newsShowTimer);
     clearTimeout(newsRemoveTimer);
-    body.removeChild(div);
+    div.classList.add("news-text-leaving");
+    setTimeout(() => {
+      body.removeChild(div);
+    }, 1000);
     doNews();
   });
 
-  const body = document.querySelector("body");
 
   body.appendChild(div);
 
   newsRemoveTimer = setTimeout(() => {
-    body.removeChild(div);
+    div.classList.add("news-text-leaving");
+    setTimeout(() => {
+      body.removeChild(div);
+    }, 1000);
   }, 8000);
 }