javascript - GSAP ScrollTrigger ScrollTo section - Stack Overflow

admin管理员组

文章数量:1313170

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 Improve this question Follow asked Jan 31 at 0:51 guitar4jcguitar4jc 1333 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

you fot to register the ScrollToPlugin

try gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);

本文标签： javascriptGSAP ScrollTrigger ScrollTo sectionStack Overflow