https://austindailysun.com/js/controllers/newsTickerController.js?v9e91e12689728780f01d6dd9a70eb5c9bae56d64

1import { Controller } from "../stimulus.js";
2
3const PIXELS_PER_SECOND = 80;
4
5export default class extends Controller {
6  connect() {
7    this.updateDuration = this.updateDuration.bind(this);
8    this.updateDuration();
9
10    this.resizeObserver = new ResizeObserver(this.updateDuration);
11    this.resizeObserver.observe(this.element);
12
13    if (document.fonts?.ready) {
14      document.fonts.ready.then(this.updateDuration);
15    }
16  }
17
18  disconnect() {
19    this.resizeObserver?.disconnect();
20  }
21
22  updateDuration() {
23    // The list contains two copies of the items; one full loop scrolls one set.
24    const singleSetWidth = this.element.scrollWidth / 2;
25    if (singleSetWidth <= 0) return;
26    const duration = singleSetWidth / PIXELS_PER_SECOND;
27    this.element.style.setProperty("--news-ticker-duration", `${duration}s`);
28  }
29}