//rpf のgsap スライド

const listWrapperEl = document.querySelector('.side-scroll-list-wrapper');
const listEl = document.querySelector('.side-scroll-list');

gsap.to(listEl, {
  x: () => -(listEl.clientWidth - listWrapperEl.clientWidth),
  ease: 'none',
  scrollTrigger: {
    trigger: '.side-scroll',
    start: 'top 20%',
    end: () => `+=${listEl.clientWidth - listWrapperEl.clientWidth}`,
    scrub: true,
    pin: true,
    anticipatePin: 1,
    invalidateOnRefresh: true,
    onUpdate: (scrollTrigger) => {
      const activeIndex = Math.round(scrollTrigger.progress * (listEl.children.length - 1));
      yourOtherFunction(activeIndex);
    },
  },
});



function yourOtherFunction(activeIndex) {
  const myList = document.querySelectorAll('.side-scroll-list li');
  const variableToCompare = activeIndex;

  myList.forEach((item, index) => {
    if (index === variableToCompare) {
      item.classList.add('active');
    }
    else {
      item.classList.remove('active');
    }
  });
  const myList2 = document.querySelectorAll('.side-scroll-status li');
  myList2.forEach((item, index) => {
    if (index === variableToCompare) {
      item.classList.add('current');
    }
    else {
      item.classList.remove('current');
    }
  });
}

<div class="side-scroll-container container">
    <div class="side-scroll-list-wrapper">
        <ul class="side-scroll-list">
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
        </ul>
    </div>
    <ul class="side-scroll-status">
        <li class="side-scroll-status-item current"><span>1</span></li>
        <li class="side-scroll-status-item"><span>2</span></li>
        <li class="side-scroll-status-item"><span>3</span></li>
        <li class="side-scroll-status-item"><span>4</span></li>
        <li class="side-scroll-status-item"><span>5</span></li>
        <li class="side-scroll-status-item"><span>6</span></li>
        <li class="side-scroll-status-item"><span>7</span></li>
        <li class="side-scroll-status-item"><span>8</span></li>
        <li class="side-scroll-status-item"><span>9</span></li>
    </ul>
</div>

always-auth=true
@gsap:registry=https://npm.greensock.com
//npm.greensock.com/:_authToken=${PRIVJS_TOKEN}