Hello, I’m doing an horizontal scroll portfolio inspired on this website: Amélie, l'Atelier — Batiik Studio
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:
https://preview.webflow.com/preview/arqlabs?utm_medium=preview_link&utm_source=designer&utm_content=arqlabs&preview=41e2eeb82ebea8730b3a903b59cceddc&pageId=5f4fcb13f2217556911965c6&itemId=5f4fcb13f2217572b2196692&mode=preview
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 css-tricks.com. 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.