Thank you so much! This actually worked! It's the only horizontal scroll tutorial i found on youtube that actually works and is responsive. Amazing job.
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
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!
Hello! Thank you! It worket almost like a charm! The only thing that is bugging me is that when we minimize the page, it happens this annoying bug where the whole page glitches and the first vertical session merges with the rest until you refresh the page... Anyone with the same issue as me? Could anyone tell me how to solve it please? I guess it has something to do with the "invalidateOnRefresh" part, but I didn't change anything on the code just copied and pasted it
@lechclick it's used in mostly all new websites which make the website more effective but it's proving too difficult for me all the tutorial I watch on TH-cam was too long. So in the mid of the tutorial I got confused and I forget all the topic 💔
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.
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!
ok, sorry to hear that it didn't work. I just tried it and it worked. Maybe you could try to put the CSS Code into the Custom CSS instead. Do you maybe have some details what exactly isn't working?
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
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.
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
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 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?
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.
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!
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.
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!
Thank you so much! This actually worked! It's the only horizontal scroll tutorial i found on youtube that actually works and is responsive. Amazing job.
Hallo, eine super Erklärung und endlich mal Code, der auch funktioniert! Ganz herzlichen Dank!
Das freut mich 👍
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
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!
love it!! Thank you!!
Thanks
You're welcome !
Hello! Thank you! It worket almost like a charm!
The only thing that is bugging me is that when we minimize the page, it happens this annoying bug where the whole page glitches and the first vertical session merges with the rest until you refresh the page...
Anyone with the same issue as me? Could anyone tell me how to solve it please? I guess it has something to do with the "invalidateOnRefresh" part, but I didn't change anything on the code
just copied and pasted it
KINDLY please make a detail video on ACF advance custom field please . I watch many youtube lactures but i dont understand it yet
Sure. Great Idea. Let me know what issue you have there and where you use it.
@lechclick it's used in mostly all new websites which make the website more effective but it's proving too difficult for me all the tutorial I watch on TH-cam was too long. So in the mid of the tutorial I got confused and I forget all the topic 💔
Perfect!❤❤❤ Thanks
You're welcome 😊
Keep it up!
Thank you!
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.
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.
@ thank you. I worked it out. It’s working well.
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!
Hi Chris it is CSS issue. please check the link to Code. I have added a fix. It must work now.
@@lechclick Thanks alot! It works!
i'm trying 3 times but code didn’t not work im using elementor free
ok, sorry to hear that it didn't work. I just tried it and it worked. Maybe you could try to put the CSS Code into the Custom CSS instead. Do you maybe have some details what exactly isn't working?
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
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.
did you cut the panoramic image and put in every panel?
yes it is just background images in the panels
@ hopefully you’ll have another tutorial about panoramic. It will be a big help!! Thank you!!
For panoramic i just cut one image into 4 pieces and put it as background for the panels.
Where should be inserted the "Fix for mobile version CSS problems:" In all "penal"? for mobile responsive.
The panel code it is enough in one Penal. :-)
cooles video
Danke ❤️
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
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!
And also make sure that the HTML widget is at the end because all elements need to be loaded before the Javascript code comes.
@@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?
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.
How can we make the "Start" text disappear before the slide begins on the side? Thank you
finded, edit in gsap code "markers: true," to "markers: false,"
great that you find it.
I have also changed it in my code, so that it comes without the markers :-)
Hi! It only working only on Desktop version, isn't working on Mobile or Tablet device. What is the solution
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!
@@lechclick I have the same issue :( and I was following each step very carefully
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.
Didnt work for me
I'm sorry to hear that! Can you share what specifically didn't work for you?
Not working :( follow all the steps but it does not work correctly, the cut or transition is done wrong
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!
it could be if the theme has smooth scroll on, the scrolling animation wont work