Streaming live at 10am (PST)

Scroll animation on horizontal scroll

Hello, I’m doing an horizontal scroll portfolio inspired on this website:

I want to have an horizontal scroll animation to scale the images as they scroll across the screen (as in the referenced site). I can have them scale while entering the screen with “Scroll into view” but the client wants the scaling to respond to scroll as in the example.

I tried “Scroll animation” but doesn’t seem to respond to horizontal scrolling.

Is there a way to achieve this?

Here is my public share link:

Hi Hector,
not sure if you are still looking for a solution to your problem or if you have found one already. As far as I can say webflow doesn’t recognize horizontal scrolling for their “scroll into view” or “while scrolling in view” interactions, which is a shame especially for tablet or mobile interactions.

One workaround could be to create a container with your items, rotate that container by minus 90 degrees and then rotate the items in it back to the correct side up. A nice tutorial on how to achieve this can be found on On mobile devices, android will recognize that you rotated your container and enables horizontal swiping while iOS will ignore it and only enable vertical swiping/scrolling.

You could also create a container and give it a height of let’s say 500vh. Inside you create another div with position sticky top 0. That div will get a horizontal flex box in which you place your images. Now you can create a while scrolling in view animation for that 500vh container where you move that position sticky div from left to right. I think @PixelGeek has a great tutorial on how to achieve that on his youtube channel.

Hope this helps you

Thanks a lot, I went trhoug a lot of troubles with that horizontal scroll because it also used dynamic content and I tried several methods to achieve soft scrolling most of which were quite buggy.

I’ll take note of this for the next chand, thanks a lo again.