Ultimate Elementor Horizontal Scroll Tutorial: Free & Pro (Step-by-Step 2024)

[@davidevans1308]

I love how you set up your example in the beginning with what appears to be a panoramic background. Phenomenal demo! Sabine, would you be willing to do another video demonstrating how you accomplished that feat? Awesome. And BTW your step-by-step guide worked flawlessly for me. Even more important, your explanations made it easy to make adjustments. THANK YOU

[@lechclick]

I'm so glad you enjoyed the demo and that it worked out well for you. I will definitely consider this in one of my next tutorials. Thanks for your feedback!

[@chris_0815_chris]

Hello Sabine, works perfectly on PC and tablet, THANK YOU, but on my smartphone, neither Samsung nor Apple, I can't scroll vertically. do you have a tip for me. Thank you!

[@lechclick]

Hi Chris it is CSS issue. please check the link to Code. I have added a fix. It must work now.

[@chris_0815_chris]

@@lechclick Thanks alot! It works!

[@wp-doctor]

Perfect!❤❤❤ Thanks

[@lechclick]

You're welcome 😊

[@MarkTaffs]

Hi Sabine. Thanks for this fabulous tutorial. One issue is that I am getting the words scroller-start/end at the top right of the screen.

[@lechclick]

HI Mark, thanks for watching. These are the markers. I described it at 10:37 in the video. Just type in "false" and they will dissappear ;-) Hope that helps. Let me know if you have any other questions.

[@MarkTaffs]

@ thank you. I worked it out. It’s working well.

[@pixelturm]

GSAP is really nice to play around, for commercial usage unfortunately again additional costs for a customer, for my opinion it rather would be better to make nice effects only with CSS & JS, kr

[@lechclick]

Hey, you’re absolutely right-GSAP is such a great tool! 😊 According to their official license, you only need a commercial license if you’re creating a product that is sold to multiple end users, like a website template or a game with paid features. For most other use cases, like building custom websites for individual clients or e-commerce sites that sell physical products, the standard license is completely fine. Also, it’s worth mentioning that GSAP offers both free and paid tools. The core GSAP library (with animations, timelines, etc.) is completely free to use for almost all projects. But some advanced plugins, like ScrollSmoother or MorphSVG, are part of the paid membership (Club GreenSock). These are optional and only needed for very specific effects or complex animations. So unless you need those advanced features or are developing something to be sold to multiple users, there’s no need to worry about extra costs for GSAP.

[@daviddrummer7522]

Keep it up!

[@lechclick]

Thank you!

[@pradnya1788]

Hi! It only working only on Desktop version, isn't working on Mobile or Tablet device. What is the solution

[@lechclick]

Hi, Elementor has some bugs since the new version. Please repeat all the settings especially the Grow/shrink and everything related to size and all width and height values for tablet and mobile. It seems elementor is not saving it, at least i have the problem since the new version. Then also clean your browser afterwards. Hope that helps, but it is working on mobile!

[@MissVinkaaa]

@@lechclick I have the same issue :( and I was following each step very carefully

[@lechclick]

HI, I have just updated my Code Page. I included now all our settings made in the Elementor UI in the CSS code. Try it out and let me know if it worked ! Don't forget to clean browser in case you tried it already out or try in inkognito mode.

[@monimokala]

Hello, thank you for your good tutorial, but the problem I have is that I did all the steps exactly according to your tutorial, but when scrolling, it only displays red color and then it does not display any color. I mean the 3 section panels, am I except I don't want to install gsap on my wordpress or not, thank you for your guidance

[@lechclick]

Hello, please check if your scroll container is set to column row horizontal and that your size options in the advanced step are set correctly. Also a problem occurs if in the code a comma is missing. I hope that helps!

[@lechclick]

And also make sure that the HTML widget is at the end because all elements need to be loaded before the Javascript code comes.

[@monimokala]

@@lechclick I have followed all the steps but I am still having problems. I definitely want to use this method for my site. How can I contact you to resolve this problem?

[@lechclick]

I’m sorry to hear you’re having trouble! You can reach out to me via my email listed in the channel description, and I’ll do my best to help you resolve the issue.

[@zmauriaN]

How can we make the "Start" text disappear before the slide begins on the side? Thank you

[@zmauriaN]

finded, edit in gsap code "markers: true," to "markers: false,"

[@lechclick]

great that you find it.

[@lechclick]

I have also changed it in my code, so that it comes without the markers :-)

[@babayaga-m7o]

cooles video

[@lechclick]

Danke ❤️

[@a.v.n.ssripavan5506]

Didnt work for me

[@lechclick]

I'm sorry to hear that! Can you share what specifically didn't work for you?

[@moisesvasquez5077]

Not working :( follow all the steps but it does not work correctly, the cut or transition is done wrong

[@lechclick]

Thank you for your feedback! It’s interesting because this method has worked for others and it worked for me in three different elementor setups, so there may be a small setting or detail causing the issue here. If you’d like, feel free to share the exact steps you followed, and I’d be happy to take a closer look and help troubleshoot!