Scroll history timeline navigation left or right on click with vanilla Javascript

I have setup a history timeline using Flickity and HTML/CSS. The core functionality is working as highlighted in the snippet, but I am needing to add "scroll to" functionality to the navigation links when they are clicked or tapped. I am trying to replicate what can be found here: Horizontal scroll to on small screen devices. You will see the year text transitions left or right depending on the direction when clicked/tapped by the user.

I have reviewed various vanilla Javascript scroll tutorials, but I cannot seem to get a grasp on how to implement this with Flickity. I am figuring out JavaScript as I go, so any assistance would be greatly appreciated.

const flkty = new Flickity(".carousel__content", {
  cellAlign: "left",
  contain: true,
  prevNextButtons: false,
  pageDots: false
});

const timelineNav = document.querySelector(".timeline__nav");

timelineNav.addEventListener("click", function(event) {
  event.preventDefault();
  // filter for button clicks
  if (!matchesSelector(event.target, ".js-btn--year")) {
    return;
  }
  let group = event.target.dataset.group;
  flkty.selectCell(`[data-group="${group}"]`);
});

let selectedListItem = timelineNav.querySelector(".is-active");
let selectedNavButton = timelineNav.querySelector(".is-selected");

flkty.on("change", function() {
  let group = flkty.selectedElement.dataset.group;
  let navButton = timelineNav.querySelector(`[data-group="${group}"]`);
  let listItem = navButton.parentElement;
  if (navButton != selectedNavButton) {
    selectedNavButton.classList.remove("is-selected");
    navButton.classList.add("is-selected");
    selectedNavButton = navButton;
  }
  if (listItem != selectedListItem) {
    selectedListItem.classList.remove("is-active");
    listItem.classList.add("is-active");
    selectedListItem = listItem;
  }
});

// Previous button
const previousBtn = document.querySelector(".js-btn--previous");
previousBtn.addEventListener("click", function() {
  flkty.previous();
});

// Next button
const nextBtn = document.querySelector(".js-btn--next");
nextBtn.addEventListener("click", function() {
  flkty.next();
});

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.carousel {
  --color-ruby: #89102A;
  --color-ruby-lighter: #A4475B;
  --color-grey-lighter: #C2C2C2;
  max-width: 1300px;
  height: 400px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.carousel__timeline {
  margin-bottom: 70px;
}

.timeline__nav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  padding: 0;
  position: relative;
  overflow-x: auto;
  transition-duration: 2s;
  transition-property: transform;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.timeline__nav::before,
.timeline__nav::after {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  position: absolute;
  top: 0.75rem;
  left: 0;
  z-index: 2;
  background-color: var(--color-ruby-lighter);
  border-radius: 50%;
}

.timeline__nav::after {
  right: 0;
  left: auto;
}

.timeline__item {
  flex: 1;
  margin: 0;
  padding: 0;
  position: relative;
  -webkit-transition: all 150ms ease-in-out;
  -moz-transition: all 150ms ease-in-out;
  transition: all 150ms ease-in-out;
}

.timeline__nav li::before {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  top: 0.4375rem;
  left: calc(50% - 0.5rem);
  z-index: 2;
  background-color: var(--color-ruby-lighter);
  border-radius: 50%;
  pointer-events: none;
}

.timeline__item.is-active::before {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  transform: scale(1.2);
  color: var(--color-ruby-lighter);
}

.timeline__nav li::after {
  content: "";
  width: 100%;
  height: 3px;
  position: absolute;
  top: 1rem;
  left: 0;
  z-index: 1;
  background-color: var(--color-grey-lighter);
  pointer-events: none;
}

.timeline__item.is-active::after {
  background-color: var(--color-ruby-lighter);
}

.timeline__item .button--year {
  display: inline-block;
  width: 100%;
  padding: 2.5rem 0 0;
  top: 0;
  position: relative;
  transform: none;
  -webkit-transition: transform 150ms ease-in-out;
  -moz-transition: transform 150ms ease-in-out;
  transition: transform 150ms ease-in-out;
  border: none;
  text-decoration: none;
  text-align: center;
  font-weight: var(--font-weight-heavy);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-ruby-lighter);
}

.timeline__item.is-active .button--year {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  transform: scale(1.1);
  color: var(--color-ruby-lighter);
}

.carousel__cell {
  display: flex;
  flex-direction: column;
  width: 100%;
}

@media screen and (min-width: 1300px) {
  .carousel__cell {
    flex-direction: row;
    padding: 0 5rem;
  }
}

.carousel__cell .carousel__image {
  flex: 1 0 auto;
  width: 300px;
  margin-right: 3rem;
  position: relative;
}

.carousel__cell .carousel__image img {
  height: 100%;
  margin: 0;
  object-fit: cover;
}

.carousel__cell h2 {
  padding-top: 0.5rem !important;
  text-align: left;
}

.carousel__cell p {
  margin-bottom: 0 !important;
}

.carousel__nav {
  padding-top: 60px;
  position: relative;
}

.carousel__nav .button {
  width: 2.5rem;
  height: 2.5rem;
  position: absolute;
  background-color: var(--color-grey-lighter);
  border: none;
  border-radius: 50%;
  -webkit-transition: all 150ms cubic-bezier(0.4, 0, 0.6, 1);
  -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.6, 1);
  transition: all 150ms cubic-bezier(0.4, 0, 0.6, 1);
  opacity: 0.5;
  cursor: pointer;
  color: var(--color-white);
}

.carousel__nav .button:hover {
  opacity: 1;
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  transform: scale(1.2);
}

.carousel__nav .button--next {
  right: 0;
}

.carousel__nav svg {
  position: relative;
  top: 0.125rem;
}

<script src="https://npmcdn.com/flickity@2/dist/flickity.pkgd.js"></script>
<div class="carousel">
  <div class="carousel__timeline">
    <ul class="timeline__nav">
      <li class="timeline__item">
        <a href="#" class="button--year js-btn--year" data-group="cell1">1984 to 1988</a>
      </li>
      <li class="timeline__item">
        <a href="#" class="button--year js-btn--year" data-group="cell2">1989 to 1992</a>
      </li>
      <li class="timeline__item is-active">
        <a href="#" class="button--year js-btn--year is-selected" data-group="cell3">1993 to 1999</a>
      </li>
      <li class="timeline__item">
        <a href="#" class="button--year js-btn--year" data-group="cell4">2000 to 2002</a>
      </li>
      <li class="timeline__item">
        <a href="#" class="button--year js-btn--year" data-group="cell5">2003 to 2005</a>
      </li>
      <li class="timeline__item">
        <a href="#" class="button--year js-btn--year" data-group="cell6">2006 to 2012</a>
      </li>
      <li class="timeline__item">
        <a href="#" class="button--year js-btn--year" data-group="cell7">2013 to 2020</a>
      </li>
    </ul>
  </div>
  <div class="carousel__content">
    <article class="carousel__cell cell1 is-selected" data-group="cell1" style="position: absolute; left: 0%;" aria-hidden="true">

      <div class="carousel__text">
        <h3>The Early Years</h3>
        <p>Medicine River Wildlife Centre (MRWC) began in the basement and barn of a rental property with no thought of a long-term plan. The vision was that a few wild animals might come to the Red Deer SPCA each year and MRWC could help to care for them
          in the founder’s (Carol Kelly) rented home.</p>
      </div>
    </article>
    <article class="carousel__cell cell1" data-group="cell1" style="position: absolute; left: 500%;" aria-hidden="true">

      <div class="carousel__text">
        <p>Carol contacted numerous organizations and people to help increase her knowledge and create a network, including Calgary Zoo, F&amp;W biologists, Morris Flewwelling, Kerry Wood Nature Centre, Coaldale Birds of Prey Centre, and many more. She joined
          two international wildlife rehabilitation organizations and began attending conferences.&nbsp;</p>
      </div>
    </article>
    <article class="carousel__cell cell2" data-group="cell2" style="position: absolute; left: 600%;" aria-hidden="true">

      <div class="carousel__text">
        <p>In 1989 a Banff Park Warden offered to sell the current home quarter to MRWC for $50,000. With the help of Morris Flewwelling, three co-signers were found who helped secure a $15,000 loan as a down payment. The landowner carried the balance as
          a mortgage and MRWC began to build a permanent facility.</p>
      </div>
    </article>
    <article class="carousel__cell cell2" data-group="cell2" style="position: absolute; left: 700%;" aria-hidden="true">

      <div class="carousel__text">
        <p>A 400 square foot building was constructed to act as the wildlife hospital and some outdoor cages were built.</p>
      </div>
    </article>
    <article class="carousel__cell cell3" data-group="cell3" style="position: absolute; left: 900%;">

      <div class="carousel__text">
        <p>A 4-section, large raptor cage was built over several months for recovering birds of prey with donated labour and materials.</p>
      </div>
    </article>
    <article class="carousel__cell cell3" data-group="cell3" style="position: absolute; left: 1000%;" aria-hidden="true">

      <div class="carousel__text">
        <p>A nature trail and observation tower overlooking the wetland were constructed, once again, with donated materials and labour.</p>
      </div>
    </article>
    <article class="carousel__cell cell3" data-group="cell3" style="position: absolute; left: 1100%;" aria-hidden="true">

      <div class="carousel__text">
        <p>About this time, Carol assisted in the formation of the Alberta Wildlife Rehabilitators Association (AWRA).</p>
      </div>
    </article>
    <article class="carousel__cell cell3" data-group="cell3" style="position: absolute; left: 1200%;" aria-hidden="true">

      <div class="carousel__text">
        <p>Requests for services began to come from many areas such as schools, organizations, members of the public, correctional institutions, foster care, and social services. MRWC kept saying “yes” to all these requests, stretching the resources and
          energy much too far.</p>
      </div>
    </article>
    <article class="carousel__cell cell3" data-group="cell3" style="position: absolute; left: 1300%;" aria-hidden="true">

      <div class="carousel__text">
        <p>Funding didn’t come as fast as the requests for services did, so soon debt began to build. MRWC had a banker who, when asked how to find ways to meet budget, would just approve a bigger loan.</p>
      </div>
    </article>
    <article class="carousel__cell cell4" data-group="cell4" style="position: absolute; left: 1500%;" aria-hidden="true">

      <div class="carousel__text">
        <p>MRWC entered a dark time in its growth when the bank’s head office began a foreclosure. Daily phone calls continually pressured MRWC for the money.</p>
      </div>
    </article>
    <article class="carousel__cell cell4" data-group="cell4" style="position: absolute; left: 1700%;" aria-hidden="true">

      <div class="carousel__text">
        <p>Finally, Carol called a time out, took some time away to think, consulted with numerous people, and decided on a focused direction. MRWC stepped away from some of its activities and the priorities became caring for injured, orphaned, and compromised
          wildlife, education, applying for grants, improving the visibility in the community, acquiring a new visual identity, reducing costs and eliminating debt, and looking for ways to increase income and be more efficient.</p>
      </div>
    </article>
    <article class="carousel__cell cell4" data-group="cell4" style="position: absolute; left: 1900%;" aria-hidden="true">

      <div class="carousel__text">
        <p>Volunteers were especially important to the success helping with bingos, animal care, patient transport, and fundraising.</p>
      </div>
    </article>
    <article class="carousel__cell cell4" data-group="cell4" style="position: absolute; left: 2000%;" aria-hidden="true">

      <div class="carousel__text">
        <p>From the beginning, MRWC had operated with a contract from Red Deer F&amp;W that paid $1, annually, but there were no province-wide regulations, guidelines, or standards. Rules were decided by the officer and biologist in charge of the Red Deer
          office and often differed from wildlife rehab facilities that began to open elsewhere in the province. This all led to confusion and conflict between F&amp;W and rehabbers.</p>
      </div>
    </article>
    <article class="carousel__cell cell4" data-group="cell4" style="position: absolute; left: 2100%;" aria-hidden="true">

      <div class="carousel__text">
        <p>In 2000, a committee of the AWRA met with the provincial government to ask for provincially standardized permits, minimum standards, and a better working relationship with F&amp;W.&nbsp;A working committee composed of AWRA (including Carol) and
          F&amp;W was approved and the work began to set down standards, an inspection check list, a facility plan template, and permit application. F&amp;W and Alberta’s wildlife rehabbers began to understand each other, but it wasn’t an easy task.</p>
      </div>
    </article>
    <article class="carousel__cell cell5" data-group="cell5" style="position: absolute; left: 2200%;" aria-hidden="true">

      <div class="carousel__text">
        <p>Through a great deal of hard work and a growing number of supporters, the debt was brought down from $443,000 to $150,000.&nbsp;</p>
      </div>
    </article>
    <article class="carousel__cell cell5" data-group="cell5" style="position: absolute; left: 2500%;" aria-hidden="true">

      <div class="carousel__text">
        <p>The government working committee hit some difficult times as some senior members of F&amp;W attempted to restrict 22 species from rehab and refused to approve the standards that had been developed by the committee. Carol became the spokesperson
          for the group and negotiations began again.</p>
      </div>
    </article>
    <article class="carousel__cell cell5" data-group="cell5" style="position: absolute; left: 2600%;" aria-hidden="true">

      <div class="carousel__text">
        <p>Government restrictions drove MRWC to be creative in rehabilitating orphaned wildlife. They were told to either return an orphaned fawn back to the wild or to give it to a game farm. They were too young to return to the wild by themselves and
          a game farm went against the mandate of returning healthy animals back into appropriate habitats.&nbsp;</p>
      </div>
    </article>
    <article class="carousel__cell cell5" data-group="cell5" style="position: absolute; left: 2700%;" aria-hidden="true">

      <div class="carousel__text">
        <p>MWRC had already learned that orphaned birds such as owls, hawks, robins, bluebirds, and tree swallows would take on orphans placed into their nests. A volunteer noticed a newly orphaned fawn in her yard that was quickly adopted by another nursing
          doe. This gave MRWC the idea of fostering mammals.</p>
      </div>
    </article>
    <article class="carousel__cell cell5" data-group="cell5" style="position: absolute; left: 2800%;" aria-hidden="true">

      <div class="carousel__text">
        <p>Over the next few years, they began to perfect methods to foster fawns and see if other species such as fox, skunks, and moose would do the same and create an alternative to raising them in captivity. Game farms were later restricted from accepting
          wild deer fawns.&nbsp;</p>
      </div>
    </article>
    <article class="carousel__cell cell6" data-group="cell6" style="position: absolute; left: 2900%;" aria-hidden="true">

      <div class="carousel__text">
        <p>Things took a new turn for MRWC when the idea of unpaid staff was introduced in 2006. Accepting international volunteers as summer staff increased the workforce while reducing operational costs. There was a steep learning curve to develop protocols
          to guide and teach 15 young people each summer, but the benefits outweighed the work.</p>
      </div>
    </article>
    <article class="carousel__cell cell6" data-group="cell6" style="position: absolute; left: 3000%;" aria-hidden="true">

      <div class="carousel__text">
        <p>Just as things were really improving, the quarter section of land to the south, that had been virtually untouched in the years MRWC had been on their land, came up for sale. Panic set in when it was learned that an offer had been put on the land
          from a group who planned to use it to run recreational motorized vehicles. The owner of the land said she preferred MRWC to own it and would give us a little time to find the funds.</p>
      </div>
    </article>
    <article class="carousel__cell cell6" data-group="cell6" style="position: absolute; left: 3100%;" aria-hidden="true">

      <div class="carousel__text">
        <p>MRWC turned to the media and in a short amount of time had raised $100,000 in cash and the balance in “no interest” loans from 2 individuals. They then focused on ways to pay off both the original piece of land and this new quarter.</p>
      </div>
    </article>
    <article class="carousel__cell cell6" data-group="cell6" style="position: absolute; left: 3200%;" aria-hidden="true">

      <div class="carousel__text">
        <p>A couple of years later, the west quarter section of land came up for sale and an offer from a group of oil men to turn it into a shooting range was tendered. Border Paving once again stepped forward to lend the funds to purchase the land. The
          interest is paid annually with a tax receipt, so no interest is accruing on the loan.&nbsp;TD Canada Trust donated $45,000 towards the new property and the owner took $50,000 off the price as a tax receipt. Both gifts lowered the mortgage needed.</p>
      </div>
    </article>
    <article class="carousel__cell cell6" data-group="cell6" style="position: absolute; left: 3300%;" aria-hidden="true">

      <div class="carousel__text">
        <p>The MRWC and its surrounding wetland and forest were safe from development and MRWC had more property to carry out operations.</p>
      </div>
    </article>
    <article class="carousel__cell cell6" data-group="cell6" style="position: absolute; left: 3400%;" aria-hidden="true">

      <div class="carousel__text">
        <p>Committee negotiations continued with Fish and Wildlife but this time with a less confrontational atmosphere. Progress was being made.</p>
      </div>
    </article>
    <article class="carousel__cell cell6" data-group="cell6" style="position: absolute; left: 3500%;" aria-hidden="true">

      <div class="carousel__text">
        <p>After trying the fostering method on more deer, and an increasing number of birds, fox, coyote, skunks, squirrels, and moose, MRWC began to share the idea. Carol and staff member, Judy Boyd, began to present papers at international wildlife conferences.</p>
      </div>
    </article>
    <article class="carousel__cell cell6" data-group="cell6" style="position: absolute; left: 3600%;" aria-hidden="true">

      <div class="carousel__text">
        <p>Most people were very receptive to the idea and excited to try it, but numerous questions arose from some rehabbers and F&amp;W. This began 5 years of formal research to verify the method and set down protocols and guidelines. Tracking monitors
          were placed on deer and moose and under the skin of others, like coyote. The animals were tracked after release with almost 100% success.</p>
      </div>
    </article>
    <article class="carousel__cell cell6" data-group="cell6" style="position: absolute; left: 3700%;" aria-hidden="true">

      <div class="carousel__text">
        <p>The physical infrastructure of MRWC was beginning to crumble and staff began to look at renovating ideas for the building.</p>
      </div>
    </article>
    <article class="carousel__cell cell6" data-group="cell6" style="position: absolute; left: 3800%;" aria-hidden="true">

      <div class="carousel__text">
        <p>A heavy snow load severely damaged the eagle compound, killing two eagles when the roof caved in. Other cages also began to show their age.</p>
      </div>
    </article>
    <article class="carousel__cell cell6" data-group="cell6" style="position: absolute; left: 3900%;" aria-hidden="true">

      <div class="carousel__text">
        <p>The facility was crumbling and both cages and wildlife hospital would need to be replaced. Fund raising began but moved very slowly.</p>
      </div>
    </article>
    <article class="carousel__cell cell7" data-group="cell7" style="position: absolute; left: 4000%;" aria-hidden="true">

      <div class="carousel__text">
        <p>The City of Red Deer began providing MRWC with an annual payment of $25,000 for the work done to help injured wildlife, assist with wildlife conflict issues, and provide education to the City.</p>
      </div>
    </article>
    <article class="carousel__cell cell7" data-group="cell7" style="position: absolute; left: 4100%;" aria-hidden="true">

      <div class="carousel__text">
        <p>13 years after the working committee with F&amp;W had been formed, the goals were nearly met. Only 5 restricted species remained when the talks stalled. A new government came into power in Alberta and the Committee was not a priority.&nbsp;</p>
      </div>
    </article>
    <article class="carousel__cell cell7" data-group="cell7" style="position: absolute; left: 4200%;" aria-hidden="true">

      <div class="carousel__text">
        <p>Steps toward creating a new committee began in late 2017. Due to changes within the government, the committee now was with Alberta Environment and Parks (AEP) in place of F&amp;W. This time the committee consisted of members of AEP and a representative
          from each wildlife rehabilitation centre in the province.</p>
      </div>
    </article>
    <article class="carousel__cell cell7" data-group="cell7" style="position: absolute; left: 4300%;" aria-hidden="true">

      <div class="carousel__text">
        <p>F&amp;W restructured the job descriptions for their officers and biologists and neither they nor Alberta Animal Services wanted to deal with problem wildlife in the Red Deer area. This left people with wildlife-human conflict concerns and nowhere
          to turn.&nbsp;</p>
      </div>
    </article>
    <article class="carousel__cell cell7" data-group="cell7" style="position: absolute; left: 4400%;" aria-hidden="true">

      <div class="carousel__text">
        <p>MRWC hired a staff member to fill this gap.&nbsp;She now responds to approximately 550 conflict calls annually dealing with fox, ground squirrels, bats, skunks, pigeons, snakes, and more.</p>
      </div>
    </article>
    <article class="carousel__cell cell7" data-group="cell7" style="position: absolute; left: 4500%;" aria-hidden="true">

      <div class="carousel__text">
        <p>In 2018 MRWC was awarded funding to construct a wildlife homes playground in front of the main building. The old playground had been tremendously popular with visiting schools. This new playground has 4 structures for children to play in while
          learning the importance of leaving space for wildlife to live. It includes a giant owl nest, beaver lodge, fox den, and bird box.</p>
      </div>
    </article>
    <article class="carousel__cell cell7" data-group="cell7" style="position: absolute; left: 4600%;" aria-hidden="true">

      <div class="carousel__text">
        <p>The international volunteer program encountered some difficulties so the decision was made in 2019 to create an intern program. It would be like the previous one, but with more emphasis on serious students wanting to learn and complete a structured
          course.
        </p>
      </div>
    </article>
    <article class="carousel__cell cell7" data-group="cell7" style="position: absolute; left: 4700%;" aria-hidden="true">

      <div class="carousel__text">
        <p>Funding from hundreds of donors and major supporters, Ruth and Dorothy Bower, made it possible to complete the new wildlife hospital in 2020.</p>
      </div>
    </article>
    <article class="carousel__cell cell7" data-group="cell7" style="position: absolute; left: 4800%;" aria-hidden="true">

      <div class="carousel__text">
        <p>Fundraising continues for a new raptor compound to replace the crumbling old cages. The compound will see 7 cages under one metal roof and is designed for durability and a very long life.</p>
      </div>
    </article>
    <article class="carousel__cell cell7" data-group="cell7" style="position: absolute; left: 4900%;" aria-hidden="true">

      <div class="carousel__text">
        <p>The Covid-19 crisis of 2020 brought yet another boulder in the road. Funding from tourism, education programs, and the scheduled casino was now gone and only 2 of the 8 interns were able to come to live and work onsite.</p>
      </div>
    </article>
  </div>
</div>
</div>
<div class="carousel__nav">
  <button class="button button--previous js-btn--previous">
    <svg width="18" height="18">
      <path d="M10.347 1.175L9.455.283a.96.96 0 0 0-1.362 0L.283 8.09a.96.96 0 0 0 0 1.362l7.81 7.81a.96.96 0 0 0 1.362 0l.892-.892a.965.965 0 0 0-.016-1.378L5.49 10.379h11.546c.534 0 .964-.43.964-.964V8.129a.962.962 0 0 0-.964-.964H5.49l4.84-4.612a.958.958 0 0 0 .017-1.378z" fill="#F7F7F7"></path>
    </svg>
  </button>
  <button class="button button--next js-btn--next">
    <svg width="18" height="18">
      <path d="M7.653 1.175l.892-.892a.96.96 0 0 1 1.362 0l7.81 7.806a.96.96 0 0 1 0 1.362l-7.81 7.81a.96.96 0 0 1-1.362 0l-.892-.892a.965.965 0 0 1 .016-1.378l4.841-4.612H.964A.962.962 0 0 1 0 9.415V8.129c0-.534.43-.964.964-.964H12.51L7.67 2.553a.958.958 0 0 1-.017-1.378z" fill="#F7F7F7"></path>
    </svg>
  </button>
</div>
</div>

from Scroll history timeline navigation left or right on click with vanilla Javascript