Scroll Trigger Max Height Problem

[sawacrow]

Hi all,

 

I've done a similar build before and it worked.
But it's not working now.
There are max-height:400px and overflox-y in the "content-box" text area.
I'm trying to log console.log as articles like "AWS, Azure, Google Cloud" are triggered. Trigger does not work when scrolling in max-height area.
It wants me to scroll in the body.

I want to run it in scroll in max-height field, where do you think the error is?

See the Pen dyQLLGO?editors=1111 by sawacrow (@sawacrow) on CodePen

[Rodrigo]

Hi,

 

ScrollTrigger has a scroller property  that allows you to use a different scrolling section. By default the scroller is the viewport, but you can tell ScrollTrigger to check the scroll position and changes of another element. From the ScrollTrigger docs:

scroller

String | Element - By default, the scroller is the viewport itself, but if you'd like to add a ScrollTrigger to a scrollable <div>, for example, just define that as the scroller. You can use selector text like "#elementID" or the element itself.

 

Here is a fork of your codepen:

See the Pen vYQMoxJ by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[sawacrow]

I knew I had missed something.
Thank you very much.

[Christa Elrod]

To make the ScrollTrigger work within the .content-box, you should set the trigger element to be the .content-box itself. Here's how you can modify your JavaScript code:
 

gsap.utils.toArray(".content-box").forEach(box => {
  console.log("panel");
  var tler = gsap.timeline({
    markers: true,
    scrollTrigger: {
      markers: true,
      trigger: box, // Change the trigger to the content-box
      toggleActions: "restart restart restart pause",
      onEnter: () => onEnter("panel"),
      onEnterBack: () => onEnterBack("panel"),
    },
  });
});

 

[Mary Williams]

Trigger element to be the .content-box itself.