Horizontal Scroll Page Adaptive Width

Design help Animations & Interactions
1

Hi there,

I need advice on a development issue I’m facing with a page that includes a horizontal scroll section.
I’ve seen a lot of similar questions on the Webflow forum go unanswered, which is a real shame. I still do hope I’ll get some response to mine, though, as I’m pretty sure there must be a simple solution which I’m just missing.

Here’s the situation:

I’ve built a page with the following structure:

  • Track div: Display block, height: 400VW
  • Camera div: Display block, height: 100VH, width: 100VW
  • Frame div: Display flex, height: 100VH

Within the Frame div, I have several content sections, some of which have widths (or min-widths) set to Auto / Max-Content to ensure responsiveness.
If I use fixed widths (e.g., 30VW), the content would overflow when the screen is resized, as there’s a lot of text in tables.

The interaction I’ve set up is designed to move the content along the X axis from 0% to 100%. However, I’m struggling to calculate the correct movement length. The movement should be equal to the length of the Frame div minus 100VW, but I don’t know how to determine the length of the Frame div since it’s dynamic.

Here are my questions:

  1. Is there a workaround to calculate the movement length for dynamic content within the Frame div?
  2. Is there a better way to ensure the Frame div resizes properly while using VW units for its inner sections?
  3. I considered using REM units to reduce resizing issues on narrower screens, but I’m unsure how to subtract 100VW from this value, as it doesn’t seem possible to insert a calc() expression into the interaction.

Here’s my read-only link:
https://preview.webflow.com/preview/free-jabriya?utm_medium=preview_link&utm_source=designer&utm_content=free-jabriya&preview=48af5e00dcd508987f7d5e9d169321d0&pageId=66bbdcce67f3b67d28ba90e8&workflow=preview

Any guidance or suggestions would be immensely appreciated!

Best regards,
A.

2

Hi @sdcsdcd :wave: Try to see into gsap side​:point_down:

3

Hi Dmitrii,

Thanks for your response!

Unfortunately I’m not proficient at coding. Maybe there is a simpler solution?

I tried implementing a GSAP code and it works overall, but I’m encountering a weird bug.

When I scroll to the end of the section, the last content block scrolls into the screen well at first. But then, as far as its left edge reaches the left edge of the screen, it suddenly disappears (there’s black screen for a moment as I’m scrolling) and then it appears again, scrolling from the bottom of the screen to the top…

I tried looking at the scroll markers, and, as I scroll, I always see the ‘scroller start’ and ‘end’ markers fixed in one place, and these markers are overlapping. Then, as I approach the last Content Block, another ‘end’ marker appears from the bottom and reaches the top screen exactly when the last Content Block is fully visible. Then the last Content Block immediately disappears and, as I scroll further, the initial ‘scroller start’ and ‘end’ markers are still fixed in place…

Do you have any ideas why this might be happening and how can I debug this?

The code seems correct to me:

gsap.registerPlugin(ScrollTrigger);

// Define the necessary elements
const horizontalSection = document.querySelector(“#horizontalSection”);
const wrapper = document.querySelector(‘.wrapper’);

// Get the total width of the wrapper based on the content inside it
const wrapperWidth = wrapper.scrollWidth;

// Create the horizontal scrolling animation
gsap.to(wrapper, {
x: () => -(wrapperWidth - window.innerWidth), // Move the wrapper left by its width
ease: “none”,
scrollTrigger: {
trigger: horizontalSection, // Trigger the scroll on the horizontal section
pin: true, // Pin the horizontal section in place during the scroll
scrub: true, // Smooth scrubbing effect
end: () => +=${wrapperWidth}, // End the scroll when we’ve scrolled the width of the wrapper
}
});

});

initScroll();

4

Sorry, I can’t help you with GSAP debugging. But I’m sure the GSAP community will help you: GSAP - GreenSock