minor styles: reduce hero flash on fast scroll

Sheraff · Mar 30, 2024 · e0df504 · e0df504
1 parent 877702d
commit e0df504
Showing 1 changed file with 10 additions and 9 deletions.
diff --git a/client/src/components/Hero/Hero.module.css b/client/src/components/Hero/Hero.module.css
@@ -102,7 +102,7 @@
 	animation-range-start: exit 0%;
 	animation-range-end: exit 80%;
 	animation-fill-mode: both;
-	animation-timing-function: ease-in;
+	animation-timing-function: ease-in-out;
 
 	&::before {
 		content: "";
@@ -138,17 +138,18 @@
 		--falloff: 5deg;
 		--light: 65%;
 	}
-	50% {
+	60% {
 		opacity: 0.2;
 		--angle: 35deg;
-		--falloff: 35deg;
-		--light: 80%;
+		--falloff: 25deg;
+		--light: 75%;
 	}
+
 	100% {
 		opacity: 0.1;
-		--angle: 5deg;
-		--falloff: 5deg;
-		--light: 65%;
+		--angle: 2deg;
+		--falloff: 2deg;
+		--light: 70%;
 	}
 }
 
@@ -207,12 +208,12 @@
 		scale: 0.9;
 		filter: drop-shadow(0 0 5px rgb(0 0 0 / 0)) brightness(1);
 	}
-	70% {
+	60% {
 		scale: 1;
 		filter: drop-shadow(0 100px 10px rgb(0 0 0 / 0.8)) brightness(1.2);
 	}
 	100% {
 		scale: 1;
-		filter: drop-shadow(0 170px 15px rgb(0 0 0 / 0)) brightness(0.9);
+		filter: drop-shadow(0 170px 20px rgb(0 0 0 / 0)) brightness(0.9);
 	}
 }