gsap horizontal scroll with links

[brilyuk]

Hello, everyone! I made this horizontal scroll using gsap. But switching the active class for the link does not work for me and when I click on the link again, the active section scrolls to the left.

See the Pen VwoVgaG by brilyuk (@brilyuk) on CodePen.

[brilyuk]

I have solved the problem with repeated clicking on the link and incorrect scrolling of the section.

document.querySelectorAll(".header__menu-aside a").forEach((element) => {
 element.addEventListener("click", function (e) {
  e.preventDefault();
  const id = this.getAttribute("href").split("#")[1];
  const targetElement = document.getElementById(id);
   
  if (!targetElement) return;
  const scrollToHere = targetElement.offsetLeft;

  gsap.to(scrollContainer, {
   x: "-" + scrollToHere,
   duration: 2,
   ease: "power2.inOut"
  });
 });
});

 

[brilyuk]

11 minutes ago, brilyuk said:

I have solved the problem with repeated clicking on the link and incorrect scrolling of the section.

document.querySelectorAll(".header__menu-aside a").forEach((element) => {
 element.addEventListener("click", function (e) {
  e.preventDefault();
  const id = this.getAttribute("href").split("#")[1];
  const targetElement = document.getElementById(id);
   
  if (!targetElement) return;
  const scrollToHere = targetElement.offsetLeft;

  gsap.to(scrollContainer, {
   x: "-" + scrollToHere,
   duration: 2,
   ease: "power2.inOut"
  });
 });
});

 

Sorry, but this does not solve the problem(((

[brilyuk]

50 minutes ago, brilyuk said:

Hello, everyone! I made this horizontal scroll using gsap. But switching the active class for the link does not work for me and when I click on the link again, the active section scrolls to the left.

Updated the script.js It seems to work now