fix: a bit smoother title reveal

ScottyLabs · Feb 2, 2025 · ae38fe4 · ae38fe4
1 parent dc0f75b
commit ae38fe4
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 17 deletions.
diff --git a/src/components/EateryCardSkeleton.tsx b/src/components/EateryCardSkeleton.tsx
@@ -26,13 +26,23 @@ const SkeletonText = styled(Skeleton)({
 	marginBottom: '12px',
 });
 
-function EateryCardSkeleton() {
+function EateryCardSkeleton({ index }: { index: number }) {
 	return (
 		<Grid item xs={12} md={4} lg={3} xl={3}>
-			<StyledCard>
+			<StyledCard
+				className="skeleton-card--animated"
+				style={{
+					animation: `fade-in 1s cubic-bezier(0.08, 0.67, 0.64, 1.01) 1s forwards,
+		oscillate-opacity 2s ease-in-out ${1.4 + index * 0.1}s infinite`,
+				}}
+			>
 				<StyledCardHeader
 					title={
-						<Skeleton variant="text" sx={{ fontSize: '1rem' }} />
+						<Skeleton
+							variant="text"
+							sx={{ fontSize: '1rem' }}
+							animation={false}
+						/>
 					}
 					avatar={
 						<Avatar
@@ -46,14 +56,27 @@ function EateryCardSkeleton() {
 								variant="circular"
 								width={40}
 								height={40}
+								animation={false}
 							/>
 						</Avatar>
 					}
 				/>
 				<CardContent>
-					<SkeletonText variant="text" sx={{ fontSize: '2rem' }} />
-					<SkeletonText variant="text" sx={{ fontSize: '1rem' }} />
-					<SkeletonText variant="text" sx={{ fontSize: '1.2rem' }} />
+					<SkeletonText
+						variant="text"
+						sx={{ fontSize: '2rem' }}
+						animation={false}
+					/>
+					<SkeletonText
+						variant="text"
+						sx={{ fontSize: '1rem' }}
+						animation={false}
+					/>
+					<SkeletonText
+						variant="text"
+						sx={{ fontSize: '1.2rem' }}
+						animation={false}
+					/>
 				</CardContent>
 			</StyledCard>
 		</Grid>

diff --git a/src/pages/ListPage.css b/src/pages/ListPage.css
@@ -16,28 +16,42 @@
 	grid-gap: 1rem;
 	padding: 3rem 0;
 }
+/* we need this to properly animate the mask gradient */
+@property --left-pos {
+	syntax: '<percentage>';
+	inherits: false;
+	initial-value: 0%;
+}
 .Locations-header__greeting {
-	display: block;
-	overflow: hidden;
+	--left-pos: 100%;
 	width: fit-content;
 	animation: slide-in 1.2s forwards;
 	animation-timing-function: cubic-bezier(0.04, 0.34, 0.5, 1.02);
+	/* we add a delay so it doesn't look jittery on page load */
 	animation-delay: 0.1s;
 	opacity: 0;
+
+	mask-image: linear-gradient(
+		to right,
+		rgba(0, 0, 0, 1) 0%,
+		rgba(0, 0, 0, 1) var(--left-pos),
+		rgba(0, 0, 0, 0) calc(var(--left-pos) + 10%)
+	);
 }
 @keyframes slide-in {
 	0% {
 		opacity: 0;
-		clip-path: inset(0px 100% 0px 0px);
+		/* clip-path: inset(0px 100% 0px 0px); */
 		transform: translate(-10px, 0);
+		--left-pos: 0%;
 	}
 	20% {
 		opacity: 1;
 	}
 	100% {
 		opacity: 1;
-		clip-path: inset(0px -5% 0px 0px);
-		transform: translate();
+		transform: translate(0, 0);
+		--left-pos: 100%;
 	}
 }
 @media screen and (min-width: 900px) {
@@ -96,20 +110,20 @@
 	&:hover {
 		animation:
 			var(--fade-in-animation),
-			/* so we don't overwrite this*/ glow-animation 1.5s infinite;
+			glow-animation 1.5s infinite;
 	}
 }
 @keyframes fade-in {
 	0% {
-		filter: opacity(0);
+		opacity: 0;
 		transform: translate(-20px, 0);
 	}
 	20% {
 		opacity: 1;
 	}
 	100% {
-		opacity: 1;
 		transform: translate(0, 0);
+		opacity: 1;
 	}
 }
 @keyframes glow-animation {
@@ -123,3 +137,17 @@
 		box-shadow: 0 0 5px rgba(238, 111, 82, 0.7);
 	}
 }
+@keyframes oscillate-opacity {
+	0% {
+		opacity: 1;
+	}
+	30% {
+		opacity: 0.6;
+	}
+	90% {
+		opacity: 1;
+	}
+}
+.skeleton-card--animated {
+	opacity: 0;
+}
diff --git a/src/pages/ListPage.tsx b/src/pages/ListPage.tsx
@@ -179,9 +179,11 @@ function ListPage({
 								{/* TODO: find a better solution */}
 								{Array(36)
 									.fill(null)
-									.map((_, index) => index)
-									.map((v) => (
-										<EateryCardSkeleton key={v} />
+									.map((_, index) => (
+										<EateryCardSkeleton
+											key={index}
+											index={index}
+										/>
 									))}
 							</Grid>
 						);