Horizontal scroll resizing issue

[xMrCrunchyx]

I've successfully implemented horizontal scrolling using GSAP, and it's performing admirably. All my elements utilize dynamic values like this:

 

width: max(20px, calc(1.39vw * var(--scale)));

font-size: max(16px, calc(1.11vw * var(--scale)));

 

While resizing the window with values still in pixels, everything behaves as expected. However, when the window expands and switches to "vw" units, I encounter an issue where my content gets cut off at the end. This occurs specifically when transitioning from a smaller window size to a larger one in the "vw" range. Any guidance on resolving this issue would be greatly appreciated!

 

Below is the code for my horizontal scrolling functionality:

 

function horizontalScroll() {

  gsap.registerPlugin(ScrollTrigger);

 

  let sections = gsap.utils.toArray(".horizontal-section");

  let container = document.querySelector(".horizontal-container");

  container.style.width = container.scrollWidth + "px";

 

  if (window.matchMedia("(min-width: 992px)").matches) {

    gsap.to(sections, {

      x: () => -(container.scrollWidth - document.documentElement.clientWidth),

      ease: "none",

      scrollTrigger: {

        trigger: ".horizontal-container",

        pin: true,

        scrub: 0.6,

        end: () => "+=" + (document.querySelector(".horizontal-container").offsetWidth - document.documentElement.clientWidth),

        invalidateOnRefresh: true

      }

    });

  }

}

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[mvaneijgen]

Hi @xMrCrunchyx welcome to the forum!

 

Did you know GSAP has its own matchMedia() build i which has some nice features when working with GSAP for instance doing some clean up and reinitiating code when breakpoints are met, check it out https://gsap.com/docs/v3/GSAP/gsap.matchMedia()

 

If that doesn't, work we would love to see a minimal demo, so that we can take a deeper look at your code in action. Hope it helps and happy tweening! 

[xMrCrunchyx]

 

Firstly, I want to express my gratitude for your swift response! I apologize for not providing a minimal demo earlier. You can access it via the following link on Codepen:

 

See the Pen qBGBmbp by tim-poliar (@tim-poliar) on CodePen

 

As mentioned previously, I've observed that when resizing the window with elements using pixel units, the scrolling functions seamlessly. However, when the elements utilize "vw" units, the content gets cut off at the end.

 

I hope this clarifies the issue. If further explanation is needed, please don't hesitate to ask.

 

Thank you once again for your assistance.

[Rodrigo]

Hi,

 

Maybe something like this:

 

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

 

Hopefully this helps.

Happy Tweening!

[xMrCrunchyx]

Hi @Rodrigo,

 

Thank you for your response! Upon opening your Codepen link in a maximized browser and then clicking on "Restore down" (essentially reducing the browser size), I noticed a significant padding on the right side of the page. I'm encountering a similar issue where the "scroller" length seems to be inconsistent, either too long or too short on a window resize.

 

 

 

[Rodrigo]

Honestly I couldn't tell you. There must be something in your HTML/CSS, but unfortunately we don't have the time resources to go through the HTML structure and styles and find what could be causing this in your setup, as you can see in this demo:

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

 

Take a look at it and see the differences and how everything works in order to find the problem in your setup.

 

Happy Tweening!

[xMrCrunchyx]

Alright, thank you for your help! Really appreaciate it.