Smartcraft-Media-Tech/nutty-tools
1
0
Fork 0
mirror of https://github.com/nuttylmao/nutty.gg.git synced 2026-09-18 19:50:58 -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
+15 -12
View File
@@ -543,19 +543,22 @@ 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,
iterations: Infinity iterations: Infinity
}); });
label.classList.add('is-overflowing'); label.classList.add('is-overflowing');
} }
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,