CODEWITHSUNDEEP
javascripthtmlgsapscrolltrigger
guitar4jc
guitar4jc

Reputation: 13

GSAP scrolling within a container that has overflow hidden

I'm having trouble getting this section to do what I want. I'm brand new to gsap, so I'm sure I'm not even close...

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

ScrollTrigger.create({
  y: 0,
  trigger: ".workplace .transform-work-content",
  start: 'top top',
  end: 'bottom center',
  pin: ".workplace .transform-work-content .tabs",
  scrub: true,
  markers: true
});

In short, I have 2 columns. The left col contains 3 links. The right col contains 3 corresponding blocks of content within a div that is set to overflow hidden. I want the entire section to pin to the page when scrolled into view, then the content on the right will scroll into view within the container as you continue scrolling, until it reaches the bottom, at which time it unpins and the scrolling continues down the page as normal.

Ultimately, I'd like the links on the left to ALSO be clickable to jump to the corresponding content sections on the right, but first, I just need to get the scrolling functionality working! Any help please!?

UPDATE: I think I got the scrolling where I want it now, but making the links clickable is proving tricky now because of the content being inside a container with the overflow.

This is what I have atm, but it scrolls the whole screen, when I want/need it to only scroll the content in 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: 0

Views: 74

Answers (1)

Damian Smith
Damian Smith

Reputation: 95

You are pretty much there already, maybe just a few tweaks...

Pin the left column (tabs) and ensure the right column (content) scrolls within its container.

Set up the ScrollTrigger to handle the pinning and scrolling:

.workplace {
display: flex;
}
.tabs {
width: 20%; /* Adjust as needed */
}
.content-container {
width: 80%; /* Adjust as needed */
overflow-y: auto;
height: 100vh; /* Adjust as needed */
}
.content {
height: 100vh; /* Each content block should take the full height of the viewport */
}

Then for GSAP and ScrollTrigger:

gsap.registerPlugin(ScrollTrigger);

// Pin the tabs and set up the scrolling for the content
ScrollTrigger.create({
  trigger: ".workplace",
  start: "top top",
  end: "bottom bottom",
  pin: ".tabs",
  scrub: true,
  markers: true // Remove this in production
});

// Create a timeline for the content scrolling
let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".content-container",
    start: "top top",
    end: "bottom bottom",
    scrub: true,
    markers: true // Remove this in production
  }
});

// Animate each content block
tl.to(".content", {
  yPercent: -200, // Adjust this value based on the number of content blocks
  ease: "none"
});

You probably will want to adjust the yPercent value in the timeline based on the number of content blocks and their heights.

Upvotes: 0

Related Questions