How to Add Horizontal Scroll in Bricks Builder Using BricksFly

BricksFly Horizontal Scroll extension lets you move content horizontally while visitors scroll vertically through the page. Create the required section structure, enable the extension, and configure the width and scroll distance to control the animation.

Requirement 

Make sure you have installed:

• Bricks Theme 
• BricksFly Pro

Activate Horizontal Scroll In BricksFly

1. Go to your WordPress Dashboard.
2. Click on BricksFly.
3. Head to the Extension tab.
4. Under GSAP Extensions ➜ ScrollTrigger, toggle on Horizontal Scroll.

Step 1: Create the Horizontal Scroll Structure

To create a horizontal animation on your website, you first need to select a section. To do that, click the “+” icon.

Then, under that section, you will find a Container. Inside the Container, add a Block or Div based on your preference. In this example, Block is selected.

Once you select the block, click the + icon on the left side of the screen and add an image, text, heading, or logo. In this example, an image and heading are selected. After that, drag the heading Element into the chosen container.

Add text into that Heading.

Similarly, drag the Image Element into the chosen container.

After that, add an image to each card based on your preference. In this example, three images are added.

Step 2: Enable Horizontal Scroll 

Now, click on the main container, as shown in the image below. Plus, make sure the content width is set to “Full Width” so the container works properly. Otherwise, the horizontal animation won’t work while scrolling on your website. 

To do that, go to the Style tab ➜ Width.

Horizontal Scroll

Next, select ‘The Team’ section from the Structure panel on the right. Then, switch to the left-hand panel under the Content tab to locate and configure the Horizontal Scroll settings.

Enable: Enable it by toggling it to ‘Yes.’ Otherwise, the rest of the settings options won’t appear.

Width: Keep the width value to 100%.

End: It controls the scroll distance over which the horizontal animation runs. For example, setting the value to 2000 completes the animation after 2000 pixels of vertical scrolling, while a value of 800 completes it after 800 pixels.

In this example, the End value is set to 3000. The animation begins when the top of the container reaches the viewport and completes after the visitor scrolls 3000 pixels.

Finally, click Save, then preview the page to see the horizontal scroll animation on your website.

Final Result