diff --git a/rss_ticker_overlay/rss_ticker.html b/rss_ticker_overlay/rss_ticker.html
index 8bcb1f1..c0b2dc1 100644
--- a/rss_ticker_overlay/rss_ticker.html
+++ b/rss_ticker_overlay/rss_ticker.html
@@ -22,7 +22,7 @@
#ticker-content {
display: inline-block;
padding-left: 100%; /* Start off-screen */
- animation: ticker-scroll 240s linear infinite;
+
}
@keyframes ticker-scroll {
0% { transform: translate3d(0, 0, 0); }
@@ -90,7 +90,20 @@
}
});
if (headlines.length > 0) {
- document.getElementById('ticker-content').textContent = headlines.join(" | ");
+ const tickerContent = document.getElementById('ticker-content');
+ tickerContent.textContent = headlines.join(" | ");
+
+ // Calculate dynamic animation duration
+ const pixelsPerSecond = 50; // Adjust this value to change the perceived speed
+ const contentWidth = tickerContent.scrollWidth;
+ const animationDuration = contentWidth / pixelsPerSecond;
+
+ // Apply and restart animation
+ tickerContent.style.animationDuration = `${animationDuration}s`;
+ tickerContent.style.animation = 'none'; // Reset animation
+ void tickerContent.offsetWidth; // Trigger reflow
+ tickerContent.style.animation = 'ticker-scroll ${animationDuration}s linear infinite';
+
} else {
document.getElementById('ticker-content').textContent = "No headlines found in feed.";
}