To skip the trial and error, an easier formula: 1. parent container: full width, 100vh, no wrap 2. child container: (100 x nr of containers inside it), 100vh, no wrap, grow 3. inside the child container, add as many containers you need for your website with 100vw,100vh each. 4. in the html, when changing the scroll progress value (in the original code is -100), you use the formula: ( -100 x ( nr inside container - 1 )) , so for 4 inside containers, you add -300 5. for the duration of the scroll: +=1000px x nr of inside slides (for 4 containers it would be 4000px) I have found this formula to be the quickest for smooth results. Hope it helps!
honestly this is so cool! i was trying many ways to apply the horizontal hero on a elementor project i was working for fun months ago but it was buggy, idk, overflow f*ing up my layout etc. I surely will try this one!💕
What if in the mobile version, with the -500 parameter, everything is displayed well, but in the computer version I have a lot of empty space, if you reduce it to -400, then there is no empty space in the computer version and part of the content is cut off in the mobile version
its not working for me. the page is moving to the verticle scroll but doesnt display the other widgets in the horizontal scroll even when the child container size is set on grow
it's been a pain in the ass when i need to create gsap horizontal scroll always have to do it in html then paste it elementor cuz it's doesnt work in elementor. nice tutorial!
Hi, thank you for this video I am 38 years old and have been self-employed for 7 years, specializing in high-converting landing pages and short video ads. I face a lot of competition and want to start my own SOLO agency. Based on your experience, which of these skills do you think will be most valuable to me and my clients in the future? Your advice would be greatly appreciated and would help me avoid a distracted career path. -Landing page design & building - Funnel Building - Ad Creative "Video & Static Ads" what best skill income in thetoday & future? The goal is to have a job that is not too stressful due to the age factor and also can be done with just a laptop Thank you, 🙏 and sorry for the long message.
To skip the trial and error, an easier formula:
1. parent container: full width, 100vh, no wrap
2. child container: (100 x nr of containers inside it), 100vh, no wrap, grow
3. inside the child container, add as many containers you need for your website with 100vw,100vh each.
4. in the html, when changing the scroll progress value (in the original code is -100), you use the formula: ( -100 x ( nr inside container - 1 )) , so for 4 inside containers, you add -300
5. for the duration of the scroll: +=1000px x nr of inside slides (for 4 containers it would be 4000px)
I have found this formula to be the quickest for smooth results. Hope it helps!
thanks. This is great
Even I agree with your opinion on Standard Hero section. Loved this tutorial, will experiment soon on this.
There’s a place and time for boring 🤣 thanks! Let me know how it went
another great tutorial! will try it out soon:)
🤓 welcome!
honestly this is so cool! i was trying many ways to apply the horizontal hero on a elementor project i was working for fun months ago but it was buggy, idk, overflow f*ing up my layout etc. I surely will try this one!💕
Thank you so much ☺️ugh, you have no idea how many of these tries I have still pending to be finalized, I feel you🤪 let me know how it went 😉
What if in the mobile version, with the -500 parameter, everything is displayed well, but in the computer version I have a lot of empty space, if you reduce it to -400, then there is no empty space in the computer version and part of the content is cut off in the mobile version
its not working for me. the page is moving to the verticle scroll but doesnt display the other widgets in the horizontal scroll even when the child container size is set on grow
One suggestion:
In your logo just flip 'a' and make it 'e' this will create a similarity according to design aspect and I think it will look good.
Thanks for the suggestion 😉 I thought about that too but I want to keep it a bit off looking in purpose 🤓
Thanks! Is this responsive?
Does it work with mobile?
Yes
it's been a pain in the ass when i need to create gsap horizontal scroll always have to do it in html then paste it elementor cuz it's doesnt work in elementor. nice tutorial!
I know and this is one of the reasons why I focus so much on GSAP! You can do so much with it even in Elementor 🤓 you’re very welcome!
Thanks 🫶
Super welcome 🤗
Hi, thank you for this video
I am 38 years old and have been self-employed for 7 years, specializing in high-converting landing pages and short video ads. I face a lot of competition and want to start my own SOLO agency.
Based on your experience, which of these skills do you think will be most valuable to me and my clients in the future? Your advice would be greatly appreciated and would help me avoid a distracted career path.
-Landing page design & building
- Funnel Building
- Ad Creative "Video & Static Ads"
what best skill income in thetoday & future?
The goal is to have a job that is not too stressful due to the age factor and also can be done with just a laptop
Thank you, 🙏 and sorry for the long message.