//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');
    }
  });
}