animierte Zeitleiste

[Eifelkrimi]

Guten Morgen,

die Plattform »eifelkrimi.de« präsentiert nicht nur Bücher und Autoren, sondern auch Filme und TV-Serien, die seit den dreißiger Jahren in der Region gedreht worden sind.
Als besonderer »Eyecatcher« wird eine horizontale Zeitleiste am oberen Seitenrand auf das Jahr der Veröffentlichung bewegt - allerdings bisher noch viel zu schnell.
Beispiel: https://www.wackerberg.de/tatort/maik.php

Die Anweisung  --- document.body.style.scrollBehavior = 'smooth; --- reicht für den gewünschten Effekt offensichtlich nicht aus. Statt dessen würde ich gerne einen Parameter mit der gewünschten Zeitdauer der Bewegung einführen (z.B. 4.000 Millisekunden) und zusätzlich eine Art »ease-in-out« nutzen.

In den bestehenden Code (s.u.) soll diese Funktionalität mit ein paar Zeilen JavaScript/JQuery integriert werden. Dazu fehlen mir als absoluter Anfänger und »Nicht-Programmierer«  jedoch die Fähigkeiten.

Code:

<script type="text/javascript">
  let timelineYear = 2018
  let paddingRight = 136
  let delayForScriptToRun = 1000// ms

  const ScrollTimelineYearIntoView = (timelineYear, paddingRight) => {
    document.body.style.scrollBehavior = 'smooth;'
    let timelineDiv = document.getElementsByClassName("timelines-years")[0]
    let targetParent = document.getElementById(timelineYear)
    let targetSpan = targetParent.getElementsByTagName("span")[0];
    let getDistance = function (){ return window.innerWidth - $(targetParent).position().left - paddingRight}

    targetSpan.className="rot"
   
    timelineDiv.scrollBy({
      left: getDistance() < 0 ? -getDistance() : 0,
      behavior: 'smooth'
    });
  }

  $(document).ready(function(){
    setTimeout(ScrollTimelineYearIntoView(timelineYear, paddingRight), delayForScriptToRun);
    console.debug(`ScrollTimelineYearIntoView(${timelineYear}, ${padding}), ${delayForScriptToRun})`)
  });
</script>