Build along to create a horizontal scroll effect

Follow along and recreate this horizontal scroll effect on Wix Studio and tell a story with your design.
Horizontal scroll is a great trick to have up your sleeve when you want to subvert visitors’ expectations and create an immersive scrolling experience. In this tutorial, one of our in-house designers used horizontal scroll to present a space exploration story in a dynamic way that keeps visitors hooked.
Get the assets used in this tutorial in the Wix Studio Academy:
editor.wix.com...
-
Learn more about Wix Studio:
www.wix.com/st...
Get started with our Essentials course:
wix.to/gT8VY7c
Join the Wix Studio Community:
forum.wixstudi...
Follow us on social media:
➔ Instagram: / wixstudio
➔ X: / wixstudio
➔ TikTok: / wixstudio
➔ Facebook: / wixstudio
➔ Discord: / discord
About Wix Studio:
The end-to-end platform for agencies and enterprises to create and manage exceptional sites with extreme efficiency. Smart design features, flexible dev tools and streamlined management capabilities mean you can do more, at scale.
Subscribe to our channel:
➔ / @wixstudio

[@nimeshbothalage9869]

What's the use of the third row?

[@dikkevettehuts6852]

If i make the dekstop screen smaller, the horizontal scroll doesn't fit the hole container. So if I have scrolled al the way to the bothem, not the hole container is shown. How can i fix this?

[@WixStudio]

Hey there, thank you for bringing this to our attention. In order for us to assist you in this specific design, we'd need to take a closer look at your site. If you could please reach out to our expert team and provide them with the vision you'd like to achieve, we'd be happy to guide you. Reach out to them via the link here > wix.to/iZTuzNF

[@IamJoshDylan]

Is there a way to synchronise the scrolling of the carousel to the scrolling of the page? Ie. As the user scrolls down the page, the carousel simultaneously scrolls as well?

[@WixStudio]

Hi Josh, we want to help but as this tutorial does not use a carousel, we are not sure what you are referring to. Can you clarify, what timestamp on the video are you trying to recreate or are you asking a question not specific to the tutorial. If so, can you give more details on what you are trying to achieve? Thanks.

[@Kunal_Singh36]

Can you please share the tutorial for animations. and text responsiveness.

[@WixStudio]

Hey Kunal, we encourage you to explore our Wix Studio academy for numerous tutorials and guides that will assist you in creating your elements move and interact with the users here > www.wix.com/studio/academy

[@oaxisshop]

i now added this premade that you did. but i cant switch to the "second" picture whats the problem there, i want to edit the text

[@WixStudio]

Hey there, thank you for bringing this to our attention. In order for us to assist you in this specific design, we'd need to take a closer look at your site. If you could please reach out to our expert team and provide them with the vision you'd like to achieve, we'd be happy to guide you. Reach out to our team via the link here > wix.to/iZTuzNF

[@puranmehra3361]

why did we add the third row? we didn't use it I guess

[@WixStudio]

It's been added to have enough room to scroll once the element moves with the section as we scroll.

[@JohnVigil97]

The asset page isn't working

[@WixStudio]

Good catch John, we updated the link but you can use this link here for direct access to our assets > wix.to/af3wazY.

[@vivianokeke4867]

Great tutorial, is it possible to have the asset used in this video? Please😢

[@WixStudio]

Hi Vivian. The assets for this tutorial can be found on the Wix Studio Academy in the article tab: www.wix.com/studio/academy/tutorials/%D7%A0uild-along-to-create-a-horizontal-scroll-effect

[@vivianokeke4867]

@@WixStudio thank you 🫶

[@Undercovertheory]

@@WixStudio OMG Thank you. Not having the assets was the missing link for me.

[@yourlocalpapiii]

How am I supposed to add my own design when I’m unable to view ???

[@WixStudio]

Hey there, we would like to help but do not have enough information about what is happening on your end (what you cannot view etc). Please reach out to our customer care team so they can take a look at your specific site to assist >> wix.to/iZTuzNF.

[@nadinedaff]

Is there a way I can access this template? (not just the brand assets)

[@nadinedaff]

I have followed this tutorial to a TEE, exactly step by step (at least 10 times!) and it's not working. I believe there's an issue with the original brand assets that effects the trigger effect when I come to scroll.

[@WixStudio]

Hi Nadine, we've looked into this, and we have found no issues with the assets. However, if you'd like some further assistance with this, we suggest contacting our customer care team who would be happy to assist you >> wix.to/iZTuzNF

[@peteross3659]

You lost me when you brought in your asset. Can you point me to instructions on how to create this without the asset?

[@WixStudio]

Hey Pete, to add the horizontal scroll effect, select the relevant element or section, click the Open Inspector arrow at the top right of the Editor, click the interactions tab and click + "Add" under Scroll. To learn more about setting and customizing this effect, follow the guide here > support.wix.com/en/article/studio-editor-adding-a-scroll-animation

[@zoomsvlogs9177]

I did it without an asset. I just used a container instead.