Tuning animation snappyness

glyphr-studio · Sep 20, 2024 · 886f980 · 886f980
1 parent 8529c0e
commit 886f980
Showing 1 changed file with 9 additions and 8 deletions.
diff --git a/src/common/resets.css b/src/common/resets.css
@@ -2,10 +2,11 @@
 	--dark-gradient-background: linear-gradient(135deg, var(--blue-l15), var(--purple-l05));
 	--global-focus-style: 1px dashed var(--purple-l50);
 	--global-transition: all 80ms ease;
-	--animate-fade-in-slide-down: 180ms ease-in fade-slide-in;
-	--animate-fade-in: 180ms ease-in fade-in;
-	--animate-fade-out: 180ms ease-out fade-out;
-	--animate-fade-update: 140ms ease-in fade-in-update;
+	--animate-fade-duration: 140ms;
+	--animate-fade-in-slide-down: var(--animate-fade-duration) ease-in fade-slide-in;
+	--animate-fade-in: var(--animate-fade-duration) ease-in fade-in;
+	--animate-fade-out: var(--animate-fade-duration) ease-out fade-out;
+	--animate-fade-update: var(--animate-fade-duration) ease-in fade-in-update;
 
 	--l1-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
 	--l1-shadow-down: 0px 2px 2px rgba(0, 0, 0, 0.1);
@@ -292,7 +293,7 @@ edit-canvas:focus-visible {
 @keyframes fade-slide-in {
 	from {
 		opacity: 0;
-		transform: translateY(-5px);
+		transform: translateY(-3px);
 	}
 
 	to {
@@ -303,7 +304,7 @@ edit-canvas:focus-visible {
 
 @keyframes fade-in-update {
 	from {
-		opacity: 0.6;
+		opacity: 0.8;
 	}
 
 	to {
@@ -314,7 +315,7 @@ edit-canvas:focus-visible {
 @keyframes fade-in {
 	from {
 		opacity: 0;
-		transform: scale(1.01, 1.01);
+		transform: scale(1.006, 1.006);
 	}
 
 	to {
@@ -331,7 +332,7 @@ edit-canvas:focus-visible {
 
 	to {
 		opacity: 0;
-		transform: scale(0.99, 0.99);
+		transform: scale(0.994, 0.994);
 	}
 }