<section class="section section--1">1</section>
<section class="section section--2">2</section>
<section class="section section--3">3</section>
<section class="section section--4">4</section>
<section class="section section--5">5</section>

<div class="pagination">
  <div class="pagination__item">
    <div class="pagination__dot">1</div>
    <div class="pagination__line"></div>
  </div>

  <div class="pagination__item">
    <div class="pagination__dot">2</div>
    <div class="pagination__line"></div>
  </div>

  <div class="pagination__item">
    <div class="pagination__dot">3</div>
    <div class="pagination__line"></div>
  </div>
  
  <div class="pagination__item">
    <div class="pagination__dot">4</div>
    <div class="pagination__line"></div>
  </div>
  
  <div class="pagination__item">
    <div class="pagination__dot">5</div>
    <div class="pagination__line"></div>
  </div>
</div>

body {
  margin: 0;
}

.section {
  display: flex;
  align-items: center;
  justify-content: center;
  font: bold 5rem / 1 sans-serif;
  background: #607d8b;
  color: #fff;
  height: 100vh;
}

.section:nth-child(even) {
  background: #795548;
}

.pagination {
  position: fixed;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

.pagination__dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #e91e63;
  text-align: center;
  line-height: 30px;
  color: #fff;
  font-family: sans-serif;
}

.pagination__item--active ~ .pagination__item .pagination__dot {
  background-color: #2196f3;
}

.pagination__line {
  width: 2px;
  height: 50px;
  background-color: green;
  margin: 5px auto;
  background: linear-gradient(#e91e63 50%, #2196f3 50%) no-repeat 50% 100% / 100% 200%;
}

.pagination__item:last-child .pagination__line {
  display: none;
}

const controller = new ScrollMagic.Controller();
const sections = [...document.querySelectorAll(".section")];
const pagItems = [...document.querySelectorAll(".pagination__item")];

sections.forEach((section, index) => {
  const item = pagItems[index];
  const dot = item.querySelector('.pagination__dot');
  const line = item.querySelector('.pagination__line');
  
  new ScrollMagic.Scene({
    offset: 0,
    triggerHook: 0,
    triggerElement: section,
    duration: () => section.offsetHeight,
  })
    // .addIndicators() // add indicators (requires plugin)
    .setClassToggle(item, "pagination__item--active")
    .on("progress", (e) => {
      line.style.backgroundPositionY = `${(1 - e.progress) * 100}%`;
    })
    .addTo(controller);
});