Hey guys!
I`ve made a Horizontal scroll on my website.
Now the problem is that on the mobile version its way scrolls for too long.
I want it to stop scrolling after a while. I tried too also change the animation in pixel move options in value. But then on other desktops, the scrolling doesn’t work.
I hope you guys can help me out
Here is the read-only link
Hello @joel_van_rooij,
You have a cool looking website man. I like your lottie animations. So there are different ways to fix your horizontal scroll, you are on the right track. As a quick fix I did the following: 1. on your horizontal scroll section change the height to 350 vh. 2. for your horizontal scroll content div change the width to 285 vh. 3. for your interaction change the endpoint to 100%
Heey @Pablo_Cortes.
Realy happy with the reply. Big thanks for the compliments.
I followed your instructions. But unfortunately, I still have the problem that it scrolls for a long time after the content. Could it be that I somehow it has to do with my div blocks that are 100 VW and VH? Because I think that some how the website things the content is longer than it. really is. I hope you can still help me out! already happy that you replied !
Is a second shared link with your instructions filled in
.https://preview.webflow.com/preview/joels-fresh-project-ced4ca?utm_medium=preview_link&utm_source=designer&utm_content=joels-fresh-project-ced4ca&preview=7173f1b4250800c86f99c754765d4ef1&pageId=5f4cec19d07728481a416781&mode=preview
Hello @joel_van_rooij,
There are somethings that I would change on your mobile layout. However I think your design could work as it is. the 100 vw and vh does play on the fact that your scroll continues, but the main reason is your while scrolling interaction. you have it set at 100% to move like -6200 pixels, that is causing your extra scrolling. What you have to do is, move your initial point at 20 % and at 100% change the move value to something like -2550 pixels. That worked for me
Hello, @Pablo_Cortes ,
thank you for the quick replay! I`ve followed your instructions. It works nicely for mobile phone users now. But now the wide value of the scroll animation is not enough for other desktops too work till the end. should I change thinks on the desktop vision?
hello @joel_van_rooij,
yeah that is expected, so what you do is you leave your animation as its, since it works for desktop, but you disable it for mobile, then for mobile you create another animation just for mobile with the new values for the interaction. you will find the trigger options for the different breakpoints at the bottom of the interaction panel
Hello @Pablo_Cortes
Realy thank you for taking the time to help me here again. Sorry that I still come back with new issues. I already indeed thought of making a new animation with new value`s and connect that with the other breakpoints
But the problem I have with that now is that when I change the breakpoints of one of them. they both change to that same breakpoint automatically. I think it has to do with that it is connected to the same section. But I`m not sure.
many thanks in advance when you can still help me with this.
Hello @joel_van_rooij,
Sorry for the back and forth, I should make myself more clear. Yes you have to apply the new interaction to a new element, since the interaction is triggered by the element any changes will still be applied to that element. So, you will have to display that section to none just in mobile. Then, in mobile, create a new section only visible on mobile, with the same content inside. then apply the new interaction to that mobile section. Does that make sense? Let me know how it goes. If I have more time later on, I’ll make a video about it.
Hello @Pablo_Cortes ,
No need to be sorry! I`m really happy with the help! I understand now already a lot more with what the problem was. And the good news is it works now!
Thank you for your help!
