Using GSAP ScrollToPlugin with SimpleBar

[Chris-DuCharme]

💬 Questions and Help

I'm having a weird issue in my project when using GSAP ScrollToPlugin and SimpleBar together that I can't reproduce with any type of simple reproduction and have spent days trying to figure out in my project without any success.

Essentially, I'm making banners for a pharmaceutical client, and I have a div that is 300 pixels wide by 69 pixels tall that is at the bottom of a 300x250 banner that contains the important safety information for the prescription drug the ad is for.

I am using SimpleBar to style the scrollbar for the banner ad, and GSAP ScrollToPlugin to scroll the important safety information copy over 60 second within the div that contains it. I also have controls set to pause the auto scroll when there is mouse over and kill the auto scroll if the user manually scrolls.

What I am finding is GSAP ScrollToPlugin will not scroll this copy unless I add the height of 69 to simplebar-content class in my styles. But as soon as I add the height here, the scrollbar will no longer move along the track. It's always fixed at the top of the track and can not be dragged / used by the user to control scrolling. It doesn't move up and down the track when you scroll the content manually with the mouse wheel either. No errors ever get logged in console, so I'm assuming it's a css issue.

In all my cases to make a reproduction, I have found that I need to add the height to the simplebar-content for GSAP ScrollToPlugin to work as desired, but only in my one project does adding the height break the SimpleBar ScrollBar. In all my reproduction attempts the scrollbar and gsap work together as desired when I have the height set in the css.

I'm using the latest version of GSAP and SimpleBar available on NPM.

I'm tried refactoring all my styling to be more specific to try to eliminate anything that might be conflicting or being inherited to no success. I'm using the same simplebar styling in both my project and the reproduction as well as the same gsap code I created. I'm completely puzzled.

Do you have any insights on what might be going on here, or how to troubleshoot it?

Edit: As an additional note, I'm using simpleBarInstance.getContentElement(); to set the element that GSAP ScrollToPlugin targets to scroll.