style(lyrics-plus): adjust lyric animation in karaoke mode (#3130)

spicetify · Aug 12, 2024 · f02128b · f02128b
1 parent e3c4832
commit f02128b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/CustomApps/lyrics-plus/Pages.js b/CustomApps/lyrics-plus/Pages.js
@@ -70,6 +70,8 @@ const KaraokeLine = ({ text, isActive, position, startTime }) => {
 				className: `lyrics-lyricsContainer-Karaoke-Word${isWordActive ? " lyrics-lyricsContainer-Karaoke-WordActive" : ""}`,
 				style: {
 					"--word-duration": `${time}ms`,
+					// don't animate unless we have to
+					transition: !isWordActive ? "all 0s linear" : "",
 				},
 			},
 			word

diff --git a/CustomApps/lyrics-plus/style.css b/CustomApps/lyrics-plus/style.css
@@ -303,11 +303,23 @@ div.lyrics-tabBar-headerItemLink {
 
 .lyrics-lyricsContainer-Karaoke-WordActive {
 	color: var(--lyrics-color-active) !important;
+	background-position: top left !important;
 }
 
 .lyrics-lyricsContainer-Karaoke-Word {
 	color: var(--lyrics-color-inactive);
-	transition: var(--word-duration) color ease;
+	background-image: linear-gradient(to right,
+		var(--lyrics-color-active),
+		var(--lyrics-color-active) 45%,
+		var(--lyrics-color-inactive) 55%,
+		var(--lyrics-color-inactive));
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	background-size: 225% 100%;
+	background-position: top left 100%;
+	transition-property: color, background-position;
+	transition-duration: calc(var(--word-duration) + 0.05s);
+	transition-timing-function: linear;
 }
 
 .lyrics-lyricsContainer-LyricsLine a {