javascript - GSAP ScrollTrigger ScrollTo section - Stack Overflow

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:

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",
    });
  });
});

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",
    });
  });
});

• javascript
• html
• gsap
• scrollto
• scrolltrigger

Share Follow asked Jan 31 at 0:51 guitar4jcguitar4jc 1333 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

you forgot to register the ScrollToPlugin

try gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);