snuck in a scroll animation for the episodes list

argyleink · argyleink · commit f00610cccbbd · 2025-08-27T22:22:21.000-07:00
while i'm makin scroll better
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -28,6 +28,19 @@ footer:has(+ #audio-player .player) {
   }
 }
 
+[aria-label="EpisodeList"] li {
+  animation: episode-in linear both;
+  animation-timeline: view();
+  animation-range: entry 10% cover 25%;
+}
+
+@keyframes episode-in {
+  from {
+    opacity: 0;
+    translate: 0 25px;
+  }
+}
+
 .animated-bottom-border {
   @apply border-b after:block after:h-[1px] after:w-0 after:bg-gradient-to-r after:from-[#C6B2FF] after:to-[#8D67FF] after:transition-all after:duration-500 after:ease-in-out hover:after:w-full dark:border-dark-border dark:after:from-[#43C9F5] dark:after:to-[#B4EDFF];
 }

Original file line number	Diff line number	Diff line change
`@@ -28,6 +28,19 @@ footer:has(+ #audio-player .player) {`
`28`	`28`	`}`
`29`	`29`	`}`
`30`	`30`
	`31`	`+[aria-label="EpisodeList"] li {`
	`32`	`+ animation: episode-in linear both;`
	`33`	`+ animation-timeline: view();`
	`34`	`+ animation-range: entry 10% cover 25%;`
	`35`	`+}`
	`36`	`+`
	`37`	`+@keyframes episode-in {`
	`38`	`+ from {`
	`39`	`+ opacity: 0;`
	`40`	`+ translate: 0 25px;`
	`41`	`+ }`
	`42`	`+}`
	`43`	`+`
`31`	`44`	`.animated-bottom-border {`
`32`	`45`	`@apply border-b after:block after:h-[1px] after:w-0 after:bg-gradient-to-r after:from-[#C6B2FF] after:to-[#8D67FF] after:transition-all after:duration-500 after:ease-in-out hover:after:w-full dark:border-dark-border dark:after:from-[#43C9F5] dark:after:to-[#B4EDFF];`
`33`	`46`	`}`