How I set up Horizontal Scroll in 5 minutes with GSAP & Bricksbuilder - no code needed

[@omarramirez4496]

Amazing, it's really nice to see someone making content about bricksforge. I already found a way to do the horizontal scrolling but your video make things more clear so thanks a lot, just one thing, would it be possible to make a video showing how to animate elements inside this horizontal scrolling? Thanks again, and wish you a lot of success with your channel

[@heikodietze]

Thank you, Omar - very happy to hear that! 🙏🏻 🥳 And your request will definitely be added to the list of upcoming videos! 👍🏻

[@icekiller5]

Great, Thank you!

[@heikodietze]

Glad you liked it! 👍🏻

[@heikodietze]

That's the shortcut - download the templates here (Bricks + Bricksforge): heikodietze.gumroad.com/l/horizontalscroll

[@dynamic-homepages]

Cool short tutorial 🎉. Finally more Bricksforge Content ❤️✌️

[@heikodietze]

@dynamic-homepages Thank you! 🙏🏻 happy you liked it!

[@josephlewis9728]

Amazing video, thank you for making this! Is there a way to add scroll snap to this so each mouse scroll snaps to the next section? I've been trying to achieve this for weeks with motion page with no luck. Thanks again, great video.

[@heikodietze]

Hi Joseph - thank you very much for your compliment! Very much appreciated. 🙏 I'll think about your scenario and should I find a solution I'll let you know!

[@josephlewis9728]

@@heikodietze Thank you!

[@heikodietze]

Hi Joseph - I have checked it out. The snap functionality GSAP provides is not what you and me want. A while after you scroll, the snap sets in, not directly. The result is irritating - you think there is no snap in place. GSAP admits that in its forum. A hack is only doable with some JS code. I tried a hack myself without code, but couldn't figure it out until now. So: atm we have no easy way to do work with this very useful and needed function. 😬

[@djkasperg]

Great tutorial. You can use the class .bricks-is-frontend for the flex direction. This way the flex direction will only be applied to the frontend and not in the editor.

[@heikodietze]

Great idea, @djkasperg! 👌🏻 And you mean in the custom CSS, right?

[@djkasperg]

@@heikodietze Exactly

[@toby-green]

Great tutorial, looks a lot easier than when I last tried. Is it possible to have the horizontal containers only on scrolling down? eg. DOWN ORDER = Vertical 1, Vertical 2 - horizontal 2a - horizontal 2b, Vertical 3 but UP Order = Vertical 3, Vertical 2, Vertical 1 (with 2a and 2b hidden). I can think of applications where I would want this.

[@heikodietze]

Thanks very much, Toby! 🙏🏻 To answer your question: From what I know, the setup you’re asking for can’t be done with Bricksforge alone. You’d need some custom JavaScript to track the scroll direction and hide the horizontal containers when scrolling up. You’d also need to test if the code and the GUI play nicely together. Another idea: You could ask in the Bricksforge forum-maybe someone’s already tried it 👍🏻”

[@toby-green]

@@heikodietze Thanks for the suggestions Heiko, will give the forum a go and then, failing that, off to ChatGPT for some JS ideas :)

[@esquedm]

thank you! an awesome video.. short and educative :) please keep doing more with Bricksforge!

[@heikodietze]

Big thanks for your words, @esquedm! I will try! 👍🏻

[@alvaromoodhouse2042]

Thanks for this tutorial! It's amazing. Would you know how to horizontal scroll elements inside a container that would overflow 100vw? For instance, I was trying to create like a team members carousel but instead of having navigation arrows I wanted to horizontal scroll them. But I could not achieve the effect because the pin would stop where I wanted in different screens or devices, do you think it would be possible to make a tutorial or explain to me? Thank you so much for taking the time to make this awesome material. Best wishes!

[@heikodietze]

Hi @alvaromoodhouse2042 - thanks so much for your words! 🙏🏻 I would have to try out your scenario too. If I can find the time in the next few days, I will.

[@heikodietze]

Hi Alvaro - I found the solution and try to make a shorter video about it. 👍🏻

[@alvaromoodhouse2042]

@@heikodietze Wow! Thanks man!!!! That's awesome!!!

[@otherjohn2]

Would love to see a tutorial where a fixed navigation (like a sticky header or something) triggers the animation to the linked section.

[@heikodietze]

Sounds interesting, idea noted! ✅

[@juancamiloreyes2537]

great video! its sooo close of what i need, any idea on how to make it "Scroll Snap"? or on mobile, to detect if the ppl want to do like.. horizontal scroll on hat seciton and move the container too?

[@CowMeCow]

Awsome Tutorials! I tried importing the downloaded .json files, I noticed there are three files, can you please share how to use these files? Insert one at a time?

[@heikodietze]

Hey @CowMeCow - sorry, was afc due to heavy cold. You should (and I just tried it myself to be sure) just see one Bricksbuilder template and then import it. It will then contain the 3 sections. Did this help? Thank you very much for the compliment btw! 🙏🏻

[@N333A3]

POTENTIAL INTERACTION WITH LENIS?! Great tutorial, really! However, I can't for the life of me make this work on mobile. I did add #trigger-section to pin, but it didn't change anything. It seems to me that the scroll trigger is completely wack, and I am not sure why.

[@heikodietze]

Thank you very much! 🙏 happy that it helped you. As for mobile: do you have Lenis running too?

[@N333A3]

@@heikodietze I do! I tried disabling it, though, and the effects still don't work for me for some reason

[@heikodietze]

Hi @N333A3 - have you found a solution? If not, you could ask for help on the Bricksforge Community Forum. There are a lot of pros there who might have an idea to solve your problem.

[@rightpadding]

September 13, 2025. Working on Desktop and mobile. But on the mobile it will have an overflow-x, even I put the over CSS. can you please help?

[@heikodietze]

Are you working with my templates or exactly according to my templates or on your own project?

[@rightpadding]

@@heikodietze Own project following your layout.

[@heikodietze]

Found it: Please use this code in the custom CSS of the page: html, body { overflow-x: hidden !important; } Note: It is necessary to also give the ‘html’ the overflow-hidden rule.

[@yogibagasd]

is it possibe to combine with scroll snap? like when you scroll horizontally its stop on the center of container?

[@yogibagasd]

Nice video anw! love it!

[@heikodietze]

Hi @yogibagasd - Thank you very much! 🙏 And: To achieve the effect is probably possible. Haven't tried it yet. Just not with CSS - it often conflicts with GSAP. But maybe with several timelines: one for each container. And without the scrub option. If I got time, I'll try it out.

[@yogibagasd]

@@heikodietze thanks, would like to know more about this! As im trying learning the gsap with BF currently

[@user-em7pc9hp3g]

You didn’t set up anything with GSAP & Bricks. You set it up with bricksforge! Why don’t you put in your title?

[@heikodietze]

It sounds like I wasted your time with my video. If so - sorry. And good point: I'll put it in the video title next time, even if it gets very long.

[@groundpets5101]

Just Subscribe, be fantastic if you can. If you made a long video using all acf and bricksforge making a Recipe auto box, let's say you made a Recipe for 1 person, and there let say grams and kg different weights amount needed, I'd there wad a box to add a number let's say, 5 and it automatically x5 the information so it show x5 of the Recipe amount.

[@heikodietze]

Did not fully understand you, but thank you for the comment and subscribing. 👍🏻

[@groundpets5101]

@@heikodietze can you make a step by step video how to make a calculator from, all the beginning ACF and bricksforged to end? without leaving nothing out, even if the video like 1 hour long, so you show all acf being build etc, i give an example, lets say you wanted to make a cake, it has different ingredients, with different amounts of grams for each ingredient need to be used to make a cake, lest say for 1 person, so if you had a box where you can put any number from 1 or 9999 it automatically changing all the below ingredients from 1 person to or 9999 so when you make a cake for how many people you need for each ingredients needed in each grams