Smartcraft-Media-Tech/nutty-tools
1
0
Fork 0
mirror of https://github.com/nuttylmao/nutty.gg.git synced 2026-09-19 04:00:59 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fixed marquee animation bug

Browse Source
This commit is contained in:
nutty
2026-08-16 11:57:11 +10:00
parent fd3dfa647d
commit 5c994401e9
2 changed files with 22 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
now-playing/script.js
+6 -3
View File
@@ -543,14 +543,17 @@ function ApplyMarquee(label, text) {
}); });
// 2. Animate Mask Variables simultaneously to keep soft edges synced // 2. Animate Mask Variables simultaneously to keep soft edges synced
const maxOffset = 1;
const fadeBuffer = 0.02;
label.animate([ label.animate([
{ '--mask-left': 'black', '--mask-right': 'transparent', offset: 0 }, { '--mask-left': 'black', '--mask-right': 'transparent', offset: 0 },
{ '--mask-left': 'black', '--mask-right': 'transparent', offset: p1 }, { '--mask-left': 'black', '--mask-right': 'transparent', offset: p1 },
{ '--mask-left': 'transparent', '--mask-right': 'transparent', offset: p1 + 0.02 }, { '--mask-left': 'transparent', '--mask-right': 'transparent', offset: Math.min(p1 + fadeBuffer, maxOffset) },
{ '--mask-left': 'transparent', '--mask-right': 'transparent', offset: p2 - 0.02 }, { '--mask-left': 'transparent', '--mask-right': 'transparent', offset: Math.max(0, p2 - fadeBuffer) },
{ '--mask-left': 'transparent', '--mask-right': 'black', offset: p2 }, { '--mask-left': 'transparent', '--mask-right': 'black', offset: p2 },
{ '--mask-left': 'transparent', '--mask-right': 'black', offset: p3 }, { '--mask-left': 'transparent', '--mask-right': 'black', offset: p3 },
{ '--mask-left': 'transparent', '--mask-right': 'transparent', offset: p3 + 0.02 }, { '--mask-left': 'transparent', '--mask-right': 'transparent', offset: Math.min(p3 + fadeBuffer, maxOffset) },
{ '--mask-left': 'black', '--mask-right': 'transparent', offset: 1 } { '--mask-left': 'black', '--mask-right': 'transparent', offset: 1 }
], { ], {
duration: totalMs, duration: totalMs,
now-playing/themes/compact/script.js
+7 -4
View File
@@ -198,15 +198,18 @@ function UpdateSingleSongLabel(containerId, trackName, artistName) {
iterations: Infinity iterations: Infinity
}); });
// 2. Animate Mask Variables simultaneously on the container // 2. Animate Mask Variables simultaneously to keep soft edges synced
const maxOffset = 1;
const fadeBuffer = 0.02;
container._anim = container.animate([ container._anim = container.animate([
{ '--mask-left': 'black', '--mask-right': 'transparent', offset: 0 }, { '--mask-left': 'black', '--mask-right': 'transparent', offset: 0 },
{ '--mask-left': 'black', '--mask-right': 'transparent', offset: p1 }, { '--mask-left': 'black', '--mask-right': 'transparent', offset: p1 },
{ '--mask-left': 'transparent', '--mask-right': 'transparent', offset: p1 + 0.02 }, { '--mask-left': 'transparent', '--mask-right': 'transparent', offset: Math.min(p1 + fadeBuffer, maxOffset) },
{ '--mask-left': 'transparent', '--mask-right': 'transparent', offset: p2 - 0.02 }, { '--mask-left': 'transparent', '--mask-right': 'transparent', offset: Math.max(0, p2 - fadeBuffer) },
{ '--mask-left': 'transparent', '--mask-right': 'black', offset: p2 }, { '--mask-left': 'transparent', '--mask-right': 'black', offset: p2 },
{ '--mask-left': 'transparent', '--mask-right': 'black', offset: p3 }, { '--mask-left': 'transparent', '--mask-right': 'black', offset: p3 },
{ '--mask-left': 'transparent', '--mask-right': 'transparent', offset: p3 + 0.02 }, { '--mask-left': 'transparent', '--mask-right': 'transparent', offset: Math.min(p3 + fadeBuffer, maxOffset) },
{ '--mask-left': 'black', '--mask-right': 'transparent', offset: 1 } { '--mask-left': 'black', '--mask-right': 'transparent', offset: 1 }
], { ], {
duration: totalMs, duration: totalMs,