How to Horizontally scroll using GSAP in Elementor (no plugins) | Wordpress Tutorial

[@davidevans1308]

Your teaching style, pace and throughput (ability to explain so that one can go back to either re-create or troubleshoot) is awesome. Thank you!

[@sergiosanchez3618]

Great video! does it work properly if the containers are not 100vh?

[@the_mig]

is can but the layout with the bottom sections outside of the scrolling might mislead the visitor when scrolling? But the functions should work just fine!

[@sergiosanchez3618]

@@the_mig Thank you!!

[@HanFei-n1s]

its pretty style and learned it. but i facing another problem is after vertical section, i try add another horizontal section, its not work at all.

[@the_mig]

2 things to try, the easy one, in the second horizontal, don’t put the script again, you can’t use the same variables twice in scripts so the easy way would not to include the script a second time .. The other option would definitely word, rename the horizontal class name to a new name and reference that in a second script instead of the original name, then change vars to unique names ( can ask ChatGPT to change the var names for you)

[@brycehipps]

works but is not very smooth - any idea what could be causing it to be slow to scroll, slow to snap?

[@the_mig]

@@brycehipps it’s scroll based so what’s influencing it would be the mouse scroll itself, you could add a smooth scroll plugin if you want ..

[@ismaeelmarhoon316]

Hi Miguel I'd like to add multiple Lottie animations that are triggered by scrolling. Once an animation reaches 100%, I want the next container to appear, also with a different Lottie animation. My goal is to create an animated story using Lottie files, triggered by horizontal scrolling. Is this possible with your code?

[@the_mig]

No this wont do it, its geared towards GSAP Animations and its libraries.. you can cross trigger but it would be overkill to use GSAP for that.. I am working on a Lottie video but its going to take time because its an advanced tutorial ..

[@teuccio73]

can yu add parallax effect?

[@the_mig]

Elementor Parallax (fixed) is hard coded to vertical scroll for backgrounds, it would have to be custom coded, havent tried that particular one just yet but will have a go and try mesh it together with horizontal scrolling..

[@FlipFlipYong]

Hi! I think the reference link you’ve sent is for another and this not video :(

[@the_mig]

@@FlipFlipYong oh crap … fixed !! Sorry

[@FlipFlipYong]

@@the_mig all good! Thank you!