Horizontal Scroll with different length/(height)
Hey people
I am using the horizontal scroll cloneable for a webcomic project (the one from this tutorial: https://www.youtube.com/watch?v=nyNLWHPooxM&t=20s) .
For storytelling-reasons, I am using several instances of the "main" selector, by always duplicating it, which results in several rows of comic-panels. That works pretty great so far.
The one issue I have is that some rows contain more panels than others, which makes the panels smaller to still fit the template.
Now my question:
Is there a way to increase the "lengths" of a row in a way that I can fit more elements in said row without making them appear smaller?
At first I thought it must be the "height" container. So I replaced the "height" selector with a new style selector called "extraheight" and increased its height to 800svh (double the initial value). But that does not change the length of the horizontal scroll section at all, although it kinda feels like scrolling through it takes now longer. Am I missing something here or it is just not possible?
Take a look at the screenshot for better understanding. Essentially I want to make the scroll section longer.
Web Bae
YouTube
Flawless Horizontal Scrolling in Webflow
🚨 IMPORTANT UPDATE/FIX 28 SEP 2023 IN PINNED COMMENT BELOW 👇
How to build horizontal scrolling sections in Webflow using only one interaction that works for any number of sections with any sizes. This animation observes the user's downward scroll behavior and translates a separate div block to the left to achieve a cool horizontal scroll effec...
8 Replies
Hey @elia - I would think that adding height to that container would have the effect of "slowing down" the horizontal scroll. You mentioned that it seemed to be working but you weren't sure? Can you share a live and/or preview link?
Hey
thanks for that quick reply!
Here is my page: https://strangelittlebeing.webflow.io/ollis-story
I hope it works, since there is a ton of images in it that I still have to compress also I played around with the offset values whis makes the scrolling a bit clunky. In the attached screenshot you can see the specific row I am talking about. Here, the images appear way smaller which they didnt when there were less image in that row.
https://preview.webflow.com/preview/strangelittlebeing?utm_medium=preview_link&utm_source=designer&utm_content=strangelittlebeing&preview=ada3c98ce5d0ad7d1022e0aebdf05252&pageId=662a2203727d5956dd40ba3d&workflow=preview
Update:
Using following code, the width of each row now adapts to the number of panels and their width. It semmes to work perfectly fine:
*
const rowContainers = document.querySelectorAll(".height");
rowContainers.forEach(rowContainer => {
const panels = rowContainer.querySelectorAll(".panel");
let totalWidth = 0;
panels.forEach(panel => {
const panelWidth = panel.offsetWidth;
const panelMargin = window.getComputedStyle(panel).marginLeft + window.getComputedStyle(panel).marginRight;
totalWidth += panelWidth + parseInt(panelMargin);
});
rowContainer.style.width =
${totalWidth}px;
});*I tend to use gsap for this kind of thing these days - this looks great!
everything working ok?
this is such a cool idea! I visited the site and it seemed to work fine though i have two suggestions.
1. the text at the top suggests you forgot to close a style of script tag or have some typo that is causing your code to render as plain text. check to see if you can fix that!
2. the images are lazy loading so sometimes they have to render when I scroll in. try setting the loading to eager or show a loader while images load like I do in this video: https://youtu.be/G0UTvnPS3aw?si=REb2TmJfBpcJO-nX
great work again!
Web Bae
YouTube
No More Fake Loaders: Create a Real Progress Indicator
Discover how to create an authentic progress loader for your website in our step-by-step tutorial! Learn to build a real-time progress indicator that accurately reflects image loading status, enhancing user experience and streamlining your site's functionality. Perfect for developers looking to elevate their interface design. Watch now to transf...
Thank You!
I'll check the script-tag thing. I am assuming its some sort of typo as you said.
Thanks also for feedback on the images.
The progress indicator is a thign I wanted to build in anyways, so users have an easier time waiting. I didnt know you already had a tutorial on that, I'll definetly check it out. 😊
For creating the code, I asked perplexity AI, not even hoping it had a solution for that. It then spit out some javascript and refused to provide any other solution or workaround. I dont know much about java script and did not really have hope it would work. But it just....did. So far at least.
My plan is to set the loading time of all assets to eager and build a progress indicator at the very top of the page
Awesome!
Yea this ai is getting crazy good. I’m using it all the time. And like you said it often just works 😳
yeah that blew my mind 😃