Streaming live at 10am (PST)

Horizontal scrolling - smooth effect


#1

Hi guys,

I would be really grateful if someone can help me with this issue i'm having. I'm creating a mini travel guide and i've i'm still unsure of the final structure of the site so just playing around with ideas at the moment. One thing i would love to have is the smooth horizontal scrolling you see on this site for each city:

http://citadela.io

I current have a similar section for my site but the scroll isn't as smooth and on mobile my scroll is terrible and seems slow and buggy. The citadel site has a very smooth scroll on mobile, i tested both mine and theirs on iOS.

Any help would be greatly appreciated. Thanks


My published link: http://amalfi.webflow.io

Read only link: https://preview.webflow.com/preview/amalfi?preview=28c5a3ba786d15c7abd16f42439f5f6a


#2

Hi @akoysor

You can't scroll smoothly on your site on a mobile because you have some very large images and most probably haven't also enabled responsive variables which creates responsive (smaller) variants for tablet and mobile versions of your site.

Here are some solutions that you can consider:

1- compress the large images before uploading to Webflow.

Typically, you want images to just be ~200-300kb or smaller, and background images can be 1080px or 1920px wide to make sure they run smoothly on your site. There are many resources that you can use to resize and compress your images, tools like Photoshop, tinyjpg.com, tinypng.com, ezgif.com/resize.

2- Enable responsive variants for your images.
You can do that in your Assets manager. https://cl.ly/082E130d3X2n

Republish your site.

That should make your Website load faster on mobile devices and the scroll should be smoother.

​Hope this is helpful.

All the best,
Anna K


#3

Hi Anna,

Thanks a lot for your response and i greatly appreciate it.

In regards to what you mentioned, my site in general scrolls and works fine. I'm only talking about the section with the horizontal scroll which has small image files and have been compressed. The scroll still seems quite slow horizontally as opposed to vertically in mobile. I'm talking about this section in particular:

If you have a look at http://citadela.io on mobile, their horizontal scroll is super smooth.


#4

Hi again @akoysor

It might be an iOS or Safari issue. I am unable to help further if that's the case. I'm using Chrome on Samsung and that section is scrolling rather smoothly for me. Although it might need some hight adjustments.


#5

Thanks again Anna. It may be an iOS issue. On desktop it seems to scroll very smoothly. I'll see what can be done, if anything.


#6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.