Reputation: 13
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
Reputation: 24
you forgot to register the ScrollToPlugin
try gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
Upvotes: 0