From 6acdc39645a9710cefc96afd002e1deb207f72aa Mon Sep 17 00:00:00 2001
From: Jesse Winton <jesse@appwrite.io>
Date: Thu, 13 Feb 2025 17:45:32 -0500
Subject: [PATCH] onboarding animation

---
 .../onboarding/create-project/loading.svelte        | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/routes/(console)/onboarding/create-project/loading.svelte b/src/routes/(console)/onboarding/create-project/loading.svelte
index 565213a52..453950874 100644
--- a/src/routes/(console)/onboarding/create-project/loading.svelte
+++ b/src/routes/(console)/onboarding/create-project/loading.svelte
@@ -41,7 +41,7 @@
             setTimeout(() => {
                 visible = true;
             }, 1000);
-        }, 5000);
+        }, 3000);
 
         return () => {
             clearInterval(interval);
@@ -233,7 +233,7 @@
         --appwrite-icon-fade-in-delay: calc(
             var(--final-icon-fade-out-delay) + 0.1s
         ); //delay before the appwrite logo appears
-        --welcome-to-appwrite-delay: calc(var(--icon-move-to-center-delay) + 0.3s);
+        --welcome-to-appwrite-delay: calc(var(--icon-move-to-center-delay) + 1.25s);
 
         --cell-dimension: 65px;
         --icon-width: 26px;
@@ -279,7 +279,6 @@
             var(--welcome-to-appwrite-delay);
     }
     .grid {
-        opacity: 0;
         transition: opacity var(--fade-in-animation-component-duration) var(--animation-type);
         display: grid;
         grid-template-columns: var(--half-cell-dimension) repeat(5, var(--cell-dimension)) var(
@@ -293,10 +292,6 @@
         }
     }
 
-    .start-animation .grid {
-        opacity: 1;
-    }
-
     .icon-container {
         width: calc(var(--cell-dimension) + 10px);
         padding: 5px;
@@ -309,8 +304,8 @@
         border-width: 1px;
         border-color: transparent;
         border-style: solid;
-        transition: all var(--icon-colorize-animation-duration) var(--animation-type)
-            var(--show-icon-color-delay);
+        transition: all calc(var(--icon-colorize-animation-duration) + var(--delay))
+            var(--animation-type) var(--show-icon-color-delay);
 
         @media (min-width: 768px) {
             width: calc(var(--cell-dimension) + 20px);