guitar4jc
guitar4jc

Reputation: 13

GSAP ScrollTrigger ScrollTo section

I've got the following codepen where I'm scrolling a container with overflow hidden. My left column has 3 links, and my right column has the container with 3 blocks of content that correspond to the links.

Here's my codepen: https://codepen.io/mattmager/pen/WbemwmO

The scroll is doing what I want, but now I'd like the links on the left to ALSO be clickable to jump to the corresponding content sections on the right.

This is what I'm trying, but it doesn't quite work because it's moving the entire window as opposed to just the content with the container. Any ideas?:

const tabs = document.querySelectorAll('.workplace .transform-work-content .tab-link');

tabs.forEach((tab, index) => {
  tab.addEventListener('click', (e) => {
    e.preventDefault();

    gsap.to(window, {
      scrollTo: sections[index],
      duration: 1,
      ease: "power2.inOut",
    });
  });
});

Upvotes: 1

Views: 44

Answers (1)

Dennissnov
Dennissnov

Reputation: 24

you forgot to register the ScrollToPlugin

try gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);

Upvotes: 0

Related Questions