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
const maxOffset = 1;
const fadeBuffer = 0.02;
label.animate([
{ '--mask-left': 'black', '--mask-right': 'transparent', offset: 0 },
{ '--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: p2 - 0.02 },
{ '--mask-left': 'transparent', '--mask-right': 'black', offset: p2 },
{ '--mask-left': 'transparent', '--mask-right': 'black', offset: p3 },
{ '--mask-left': 'transparent', '--mask-right': 'transparent', offset: p3 + 0.02 },
{ '--mask-left': 'black', '--mask-right': 'transparent', offset: 1 }
], {
duration: totalMs,
iterations: Infinity
});
{ '--mask-left': 'black', '--mask-right': 'transparent', offset: 0 },
{ '--mask-left': 'black', '--mask-right': 'transparent', offset: p1 },
{ '--mask-left': 'transparent', '--mask-right': 'transparent', offset: Math.min(p1 + fadeBuffer, maxOffset) },
{ '--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: p3 },
{ '--mask-left': 'transparent', '--mask-right': 'transparent', offset: Math.min(p3 + fadeBuffer, maxOffset) },
{ '--mask-left': 'black', '--mask-right': 'transparent', offset: 1 }
], {
duration: totalMs,
iterations: Infinity
});
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
});
// 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([
{ '--mask-left': 'black', '--mask-right': 'transparent', offset: 0 },
{ '--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: p2 - 0.02 },
{ '--mask-left': 'transparent', '--mask-right': 'transparent', offset: Math.min(p1 + fadeBuffer, maxOffset) },
{ '--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: 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 }
], {
duration: totalMs,