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

preview_player
Показать описание
Hey guys - good news: Building a page with horizontal scroll is now possible for you without any code! 🥳 By watching this video, you'll learn how to do it in less than 5 minutes (no joke!). We will just use Bricksbuilder and Bricksforge's animation panel (with its UI for GSAP). And we'll use a typical use case: vertical scrolling, then switching to horizontal and back to vertical. Have fun checking it out and start making the Internet a better place with your stunning websites! 👍🏻

*Table of contents:*
0:00 Intro
0:34 Step 1 - Setting up the structure in Bricksbuilder
2:03 Step 2 - Configuring the GSAP Timelines in the Bricksforge Panel
5:03 Horizontal Scroll already works
5:52 How to adjust the horizontal scrolling speed
7:23 Is it responsive?
08:00 Conclusion

#bricksbuilder #gsap #gsapanimation #bricksforge
Рекомендации по теме
Комментарии
Автор

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

omarramirez
Автор

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

otherjohn
Автор

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.

djkasperg
Автор

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

dynamic-homepages
Автор

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?

juancamiloreyes
Автор

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.

toby-green
Автор

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!

alvaromoodhouse
Автор

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

esquedm
Автор

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?

CowMeCow
Автор

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.

josephlewis
Автор

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.

NA
Автор

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?

rightpadding
Автор

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

yogibagasd
Автор

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.

groundpets
Автор

You didn’t set up anything with GSAP & Bricks.

You set it up with bricksforge! Why don’t you put in your title?

empchpg