Untitled

console.clear();
gsap.registerPlugin(ScrollTrigger);

// Phần 1: .slider-tsumugu (cuộn dọc)
const section = document.querySelector(".slider-tsumugu");
const items = gsap.utils.toArray(".item-tsumugu-scroll");

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: section,
    start: "top top",
    end: "+=" + (100 * items.length - 1) + "%",
    scrub: 1,
    pin: true,
    markers: true,
    onUpdate: self => {
      const progress = self.progress;
      const index = Math.round(progress * (items.length - 1));
      items.forEach((item, i) => {
        if (i === index) {
          item.classList.add('active');
        } else {
          item.classList.remove('active');
        }
      });
    }
  }
});

tl.set(items[0], { opacity: 1, y: 0, zIndex: 1 });

// Phần 2: .content-servicessssss (cuộn ngang)
const containerss = document.querySelector('#scrollContainer');

gsap.to(containerss, {
  xPercent: -100 * (containerss.children.length - 1),
  ease: 'none',
  scrollTrigger: {
    trigger: containerss,
    pin: true,
    scrub: 1,
    end: () => "+=" + containerss.offsetWidth
  }
});

// Phần 3: .slider-support (cuộn dọc)
const newSection = document.querySelector(".slider-support");
const itemsssss = gsap.utils.toArray(".item-cs");

const tlss = gsap.timeline({
  scrollTrigger: {
    trigger: newSection,
    start: "top top",
    end: "+=" + (100 * itemsssss.length - 1) + "%",
    scrub: 1,
    pin: true,
    markers: true,
    onUpdate: self => {
      const progress = self.progress;
      const index = Math.round(progress * (itemsssss.length - 1));
      itemsssss.forEach((item, i) => {
        if (i === index) {
          item.classList.add('active');
        } else {
          item.classList.remove('active');
        }
      });
    }
  }
});

tlss.set(itemsssss[0], { opacity: 1, y: 0, zIndex: 1 });