GSAP HORIZONTAL SCROLL WITHOUT PLUGIN - Elementor Wordpress Tutorial Flex Container

[@andreaegli]

HOTFIX was added to the code in the Notion file. I omitted a "}" when coping from Elementor to Notion initially :)))) Try it out, should be working just fine ;)

[@MiStiQueT]

It works perfectly!

[@kyle353]

Do you think you could create something similar to netflix? Maybe a section that is static on desktop but turns into a horizontal scrolling container on mobile that can be used for products, post types etc. I see this a lot on modern websites but unsure how to replicate on elementor

[@daliprane1711]

Now it works! Thank you :)

[@Yannick.D]

@@kyle353 You can use wp grid buider plugin to do that , or create a loop grid with elementor. what wp grid builder allow you to do is search in your queries and add filters. you could use javascript to detect a mousehover state or keyboard press and scroll / cycle trough the Cards

[@Rare-movieshub]

I love you ❤

[@andreaegli]

YO! i see some of you have issues with this, will post the JSON file tomorrow

[@EEX97623]

Thank you! Tried it exactly as shown three times and not working - something in the script perhaps as it seems fine til it's inserted in HTML widget.

[@tarasshevchuk8358]

Andrea, you're amazing! You're the only one who showed how to implement such a scrolling option using Elementor. I haven't found similar solutions like yours on KZbin! Thank you so much! You saved me. Please keep showing how you solve different tasks and what solutions are available using Elementor.

[@andreaegli]

You're very welcome! Will do and thank you very much!

[@VictorAlaez]

I love the time you take to change the background color of containers. That is something!

[@andreaegli]

color is very important to me 🤣

[@elenakutluchurinaru]

Oh yeah! I was waiting for this video!!! Maybe you will also make a video on how to make a horizontal scroll of cards? I mean when a long scroll of cards scrolls, and then the next block goes

[@arunprabhakar1119]

I appreciate your time and effort. You have the best and freshest content. There is glitch text that appears in the container( "start" and "end") .For changing this --- marker: true to marker: flase in the code. additionally for removing horizontal container gap---set the parent container Gaps to 0.

[@andreaegli]

Thank you so much 😊 I appreciate it! That’s not a glitch, it’s a marker to see where the animations starts and ends so you can adjust it. To remove it just set the marker to false or simply remove it. 😉

[@SuperABOALAA]

i'm watching all your video in one sitting !! you have the most interesting ideas

[@douglastamm8168]

This is for sure the best elementor chanel Ive found! Love this content, keep it up!

[@valerasi6]

YES!! The only one on the web that works!! Plus: fast and easy! Thanks!

[@andreaegli]

You are very welcome 🫡

[@MiStiQueT]

GSAP Queeeeen 👑 thank you!! trying it right now for a recent project im working

[@andreaegli]

😅 you’re welcome! Did it work, some people have had issues making this work?

[@abramdiazmagana7956]

Great great tuto! I have a little question, where I can remove the words "start" and "end" that show in the container.

[@andreaegli]

Thank you 😊 remove the property markers:true or set it to false

[@ALI-jg4ch]

Thankyou so much for sharing🙌......!! I really love your videos they are very creative. can you please upload these more frequently.

[@andreaegli]

You are very welcome! Thank you ;) I'm afraid I can't, production takes too much time but maybe one day when I decide to become a full-time KZbinr :))

[@vendrawing]

This is absolutely brilliant. Thanks 🌻

[@midhunjose]

Thank you so much...🙏 Been on the look out for this to work on Elementor without any premium plugins. Will defenitely try this :) Purchasing the likes of motion pages isn't always the practical solution to these kinds of solutions as we want to reduce the usage of plugins just to achieve one aspect of the design. Also, due to their subscription plans, it becomes really difficult.

[@LorinaSchafer]

Sooo cool! i am happy if maybee one day you do the adjustments with the dragging and scrolling smoother. But so far a very nice tool! Thank you!

[@yeslibre350]

Thanks for this awesome tutorial and making this work without another plugin! Somehow it slightly jumps at the end of a scrolling animation. The harder you scroll the bigger the jump. Is there anyway to prevent that from happening? I would like the scrolling to behave like you scroll normally but then horizontally. Little ease, no smooth and no snap if thats possible with this? You make elementor and low code so much more fun!

[@jigarkhinchi3072]

Thank you so much Andrea! its awesome tutorial.

[@pishtaz-dev]

Thanks for your good tutorial What should we do to scroll from left to right?

[@andreaegli]

Thanks! I wouldn't recommend the left to right scroll for UX reasons

[@ttc56]

You're Amazing!

[@mauricestvns]

hello, I do exactly the same as in your video, but at 6:42 I don't see any scrolling horizantal movement on my screen?

[@andreaegli]

hey! are you referring to the overflow?

[@mauricestvns]

@@andreaegli yes! I mean the overflow, do you know what could possibly go wrong?

[@andreaegli]

@@mauricestvns Not having an overflow is a very good thing :)) How many child containers have you added in the parent container? Did you set the size of the child containers to grow? Most of all, is the actual effect work for you?

[@EEX97623]

@@andreaegliSame, copied exactly, once html is added the published page only scrolls vertically from hero to panel 2 to end panel missing horizontal panels 3+4. Overflow hidden, grow, row direction of parent... all seemed fine until html was added.

[@andreaegli]

@@EEX97623 did you set the class of panel to the child containers?

[@Webrisernl]

Hi Andrea I hope you have a great day! is it also possible to change the scroll / finger speed for the mobile version? I that makes sence? :)

[@JeniferPorronG]

i am learning a lot from your channel!! so do i need to put containers 1 and "the end" too to make it work or can i just make and horizontal scroll as you do with containers 2, 3 and 4?

[@JeniferPorronG]

i have a pair of problems: the parent container is growing vertically even if i add the final CSS and the second container (container 3 of the video) is not showing at 100%, it stops after finish the whole scrolling (it happens the same when i use the json archive)

[@darkwolf5625]

Hi Andrea wanted to let you know that your videos are awesome and super usefull, have you tought on explaining how the code works? i know the idea is that people who doesn't know how to code can use it but maybe explaining allows the ones that love the "carpentry" to learn something new :)

[@VicsunDaco]

Please create a video tutorial demonstrating how to add page transition animations similar to those found on Cuberto's website. Thanks! ❤

[@ASMRfantaisie]

YOU ARE THE BEST

[@andreaegli]

Eh, I do my best ☺️

[@chubbec]

Would love an update on this!

[@andreaegli]

Refresh my memory, what update? 😊

[@lMystical]

im really waiting for this topic - such a good content and great job! maybe when a switch back to elementor will use this tutorial! now im experiment with greenshift adds on gutenberg, maybe u create someting with this features. For now i'm still waiting for next episode :) Best!

[@philipsgregory2285]

Thank youuuuuuuuuuuuuuuu, you're the absolute best 😍

[@johnrudy3523]

Great video! Did you ever find a way to make that draggable?

[@andreaegli]

Thank you 🙏 I haven’t had the time to look into it but I will at some point

[@wissambaltaji2317]

Thanks you it works perfectly 🔥

[@andreaegli]

So happy to hear that 🤩

[@CristinaVillegas-j7r]

You're amazing! I just found out about your existence and looove your content

[@sameerpatelxyz]

Thank you gsap queen 👑

[@Avilev69]

Thank you very much for a wonderful solution, it helped me a lot. Tries to cancel the margins that are created between the containers and fails. Is there anything special that needs to be done?

[@SilaTaku]

Hey Andrea! Lovely tutorial. However i noticed that for me, its not working on mac. Works perfectly everywhere else. Do you have any idea as to why? :(

[@andreaegli]

Hey and thanks 😊 strange, I developed it on a Mac ☺️ maybe look for the template on oh wow . club and imported into your project

[@kassidyhancey2771]

Thank you for sharing this awesome tutorial! Is there a modification to the code I can make so that I can have longer containers? For example, I have 3 long containers and when you get to the first section it scrolls to the side and then begins scrolling down until you reach the bottom, and then scrolls to the side again for the next section, then goes down until the end, and then scrolls to the side to the top of the third section (and so forth.) So if I were to map this all out visually, it'd kind of look like stairs.

[@danielschwind852]

Hello Andrea! I love it ❤ but how can i delete the marker "start and "end"? Thank you for the beautiful work 🙏

[@andreaegli]

hey Daniel! Thank you :D simply delete "marker:true" from the code or turn it to "marker:false"

[@danielschwind852]

@@andreaegli thank you Andrea 🙏❤And thank you for your helpful videos

[@gayjosi1]

Hello Andrea, the code in notion doesn't work well, nor does the Json file on your support page.

[@andreaegli]

Hey! I've added a preview of the effect on the ohwow website, it works just fine. What exactly doesn't work in your case? Do you get any errors?

[@movingthroughtime]

This only works if you select Elementor Canvas in the Page Layout settings.

[@gayjosi1]

@@movingthroughtime @andraegli tnks, Changing the page layout from Elementor Full Width to Elementor Canvas solved the problem

[@gayjosi1]

@@andreaegli tnks, Changing the page layout from Elementor Full Width to Elementor Canvas solved the problem.

[@andreaegli]

@@gayjosi1 ahhh, ok! good to know that that might be causing an issue. I use that by default, didn't even cross my mind thanks for the feedback

[@MolteySama]

you're amazing

[@mafizulISD]

Thanks for very effective video. I learned more. Sometimes website not work properly if we don't update plugins. There is any solution?

[@andreaegli]

Welcome! Update the plugins, always ☺️ think of security as well..

[@indiagrabdeals1331]

Awesome Tutorial. One question, Can we smooth-scroll through the sections without a scroll-snap?

[@thewebstylist]

Luv it all! 🎉

[@teuccio73]

Finally!!!! 🥰

[@andreaegli]

You’re welcome 😂

[@emvee2916]

Hi Andrea! Thanks again for the great tutorial 😊 I have a question for you regardin a tool that you are using I guess : sometimes during your videos, you switch tabs from a sidebar that is located on the left side of your screen. Is it some chrome extension that allows this ? It seems to be really handy! Last time I saw another youtuber using that and I'm really wondering how you do it :)

[@andreaegli]

You are very welcome 🙏 I think you might referring to Arc, it’s a browser 😉

[@emvee2916]

Thanks, I've joined Windows users waitlist, the browser seems really good !@@andreaegli

[@samueljohn295]

Great work! The functionality is exactly what I was looking for, and everything is working fine on my end. However, there is a minor issue: after the page loads, the text "Scroller-Start" appears in the top right-hand corner of my navbar, and "Scroller-End" appears at the bottom of the page. How can I remove this text? Thank you.

[@franktielemans6624]

:What happens on 9:50? You scroll up and it seems you skipped the horizontal scroll sections?!

[@andreaegli]

Same thing happens with motion.page. If you scroll back too fast (which I did) it skipps the sections

[@franktielemans6624]

​@@andreaegli I see, I never did it with motion page. :p When I need horizontal scroll sections, I use Maxime's "Elementor Full Screen Horizontal Scroll Containers" from the ElementHow library. He coded the entire thing with vanilla JS and no GSAP. The scroll event is throttled with requestAnimationFrame for optimal CPU performance. I prefer his method because it works with with sections, basic gallery, loop grid, posts, products templates,... very flexible. So the horizontal scroll containers can contain dynamic content. It's a premium script so you have to pay for it once, but you can reuse it in multiple projects.

[@andreaegli]

@@franktielemans6624 pretty cool! I haven't tried yet and this is a bit experimental but it might or might not work with basic gallery, loop grid, posts, products templates.

[@Mousesack]

Is it possible to add an animation (fade in for example) inside one of the panels? I tried using gsap containerAnimation but it is not working with elementor flex row layout.

[@mrmachone]

Great video! I have a question, will this thing work on mobile too?

[@andreaegli]

Thank you! Yup

[@placeholder-video]

More Elementor Motion page please 🙏

[@andreaegli]

I'll think about it :) anything specific you would like to see? visual examples would be very useful ;)

[@savtrrsh]

any idea to make center mode so slider will show more than 1 slide with bigger container in the center?

[@shaho96]

How to achieve the effect where the scroll work only screens to screens not ends up in the middle of 2 screens is that possible ? (Horizontally)

[@andreaegli]

I don’t think I understand what you mean, do you have an example I can see?

[@shaho96]

Hey @andreaegli, what I meant is that when I scroll horizontally, the slide should transition smoothly from one to the next, rather than scrolling continuously until the next slide appears. I want it to feel like the scrolling stops directly on the next screen.

[@andreaegli]

@@shaho96 ah, I get it now. The code would need to be adjusted for that effect

[@shaho96]

@@andreaegli yeah sure thanks as i dont found some suitable video on internet for that 🙌

[@binitreno1718]

She know the value of Thumbnail :)

[@andreaegli]

I wouldn’t call myself a designer if I didn’t 🤣 jokes aside, empathy is everything when it comes to designing thumbnail or anything else for that matter

[@gb-xd3so]

Is it possible to use horzional scrolling that does not have 100vh but a certain height of pixels?

[@andreaegli]

I guess you could but VH units scale better and allow for more user-friendly text resizing, for example. Pixels can cause all sorts of issues. Why do you want to use pixels for height?

[@gb-xd3so]

@@andreaegli I would like to make a kind of image slider with horizontal scrolling and the images should not adapt to the screen height. The content above the slider / horizontal scrolling should remain.

[@loveyouzindgi470]

I used this in elementor with two sliders but the 1 slider works properly but the second slider not working properly at the last scroll it jumps automatically

[@andreaegli]

Get the free template from the oh wow . club website, link in the description

[@andreaegli]

Get the free template from the oh wow . club website, link in the description

[@ndelcastillo1995]

Hi Andrea! Thanks for the Tip, it looks awesome. The problema Iam facing is that after I add the HTML widget and paste the code, when i scroll down it doesn't move. I mean to go through the horizontal sections i need to scroll to the right side of my mouse. I wish the horizontal sections move between each other by scrolling vertically. How can I fix it?

[@andreaegli]

hey! That's strange, it works fine on my end by scrolling vertically back and forth. How do you scroll the right side of your mouse? What mouse do you have?

[@teuccio73]

@@andreaegli sorry! i hav the same problem .. can you post a json file? Thanks !!!

[@youssefmikhael3740]

do i need elementor pro for that? thank you

[@andreaegli]

no, but it would make it easier if you did. you would need a code snippet plugin if you're using the free version of elementor

[@kunalkothari3245]

hey @andreaegli how can i hide that start and end coming in between screens?

[@andreaegli]

Hey! remove the 'markers: true' property

[@kunalkothari3245]

@@andreaegli got it thank you so much ❤️

[@aesthfex]

How to make the scolling smoother. Pls reply mam.

[@fahadhc]

How to remove the "scroller start" and "end" that's showing on the top right section of the screen?

[@andreaegli]

Remove the ‘markers:true’ property

[@glencoe1266]

Hi Andrea, Ive tried it out and its buggy. On my end when the horizontal scroll occurs there seems to be a delay between the 2nd and 3rd container..i don't know what it could be.

[@michalbartosz4878]

Wonderful, thanks so much!

[@user-ip4wd2qx6q]

how do i remove the start and end text ?

[@andreaegli]

marker:false or simply delete it

[@kelvinjr4854]

can you make the horizontal section move on mouse scroll not automatically snap

[@danula2007]

How to hide the start and end icons ?

[@andreaegli]

Look for markers in the code and either delete it or have it say false

[@SudhanshuGaur-se5qq]

can you please add the script in panel should be take a pause and fix to the it place

[@andreaegli]

I don't understand what you're trying to tell me, please explain

[@SudhanshuGaur-se5qq]

@@andreaegli i want when the 1panel comes and 2 panel about to come to there should be some delay show the user can easily read it

[@danieleromeo9255]

Hi, I tried your Horizontal scrolling but it gives me the error on the fourth slide, that is slide jump on scroll on frontend.The problem does not occur in the Elementor development environment Could you help me? Thank you

[@andreaegli]

/* add this to the parent container holding the horizontal containers */ .container { transition: 0s; overscroll-behavior: none; }

[@danieleromeo9255]

​@@andreaegliI've already done it but the problem isn't solved

[@arkender7750]

same issue here. Any ideas? Thanks

[@andreaegli]

@@arkender7750 No idea but you can get the free template from the link in the description. Hope it helps.

[@chubbec]

@@danieleromeo9255 You probably changed the name of the container class and then didn't update it in the code provided

[@ShahbazAli-ni6bf]

You are awesome

[@daliprane1711]

Hello, do you have a solution to disable it on mobile? Sorry I'm a noob in js/gsap and all development :) Thank you :)

[@daliprane1711]

ok i found it : just change the direction of the arrow in the second container for mobile :)

[@mathieufourmond515]

On my side, it is still scrolling on the right :/

[@sakshishrivastava1659]

Hey How can I make these cards responsive ?

[@divya.v5205]

i don't know why it's not working for me. I followed all the steps you said.i don't know why it's not working for me 😕. I followed all the steps you said .

[@andreaegli]

You can download the template from here: ohwow.club/template/

[@NicholasZein]

I am finally caught up with your videos! 🙌 I always prefer not to rely on plugins if possible. 😊

[@tanguyvaucher5391]

I named it .panel-andrea in tribute of you 🤣

[@KEVIN-p3l8v]

is your containers are ok 🙁? why they are not jumping as usual? doctor please tell me the true, if the situation is very bad so please sacrifice the baby and save Andreas containers😢

[@AnikHossain-2149]

how old are you 😶?

[@andreaegli]

Why do you wanna know?

[@AnikHossain-2149]

@@andreaegli My mom told me to find a beautiful girl and get married because I am getting lazy day by day and to be responsible and found you then.. and trying to check whether you are my younger or older.. Never mind sorry:)

[@gaetanosorangelo4550]

I don't know why but it works only in backend, in frontend it doesn't work in any browser!

[@andreaegli]

get the free template from here: ohwow.club/template/ it works for me ;)

[@gaetanosorangelo4550]

@@andreaegli Thanks Andrea, you are great!

[@andreaegli]

@@gaetanosorangelo4550 hope it works for you ;)

[@lucasmakaveli138]

It happened to me too, in my case the problem was the hosting, I tested it on another one and it worked.

[@andreaegli]

@@lucasmakaveli138 that's interesting but how would the hosting cause this kind of an issue I wonder...anyway, what hosting were you using previously? let me guess, bluehost?