Horizontal Scroll

Scrolling doesn’t always have to go down the page. Sometimes, moving side to side is a better fit—especially when you’re showing off image galleries, feature sections, or a step-by-step story.

Horizontal scrolling gives you a cleaner, more engaging way to guide visitors through your content. It’s a great choice for product highlights, visual storytelling, or any layout that needs a little extra motion to stand out.

Requirement 

• Elementor (Page Builder) 
• Animations Addons for Elementor (Our Plugin)  

Tip: Make sure Animation Addons is installed and activated on your WordPress site before you start. 

How To Activate Horizontal 

1. Go to your WordPress Dashboard. 
2. Click on Animation Addons. 
3. Head to the Extension Tab. 
4. Under Scrolltrigger, toggle on Horizontal.  

Step 1: Add Container & Image

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

Once you click on the “+” icon, two layout options, Flexbox and Grid, will appear. For example, I chose Flexbox, but you can select any layout style that suits your needs.

Afterward, click on the upper “+” icon on your left screen, then click on ‘Image’ and drag it to the container that you have selected. 

Next, add an image to each container based on your preference. For example, I selected an image that suited my choice. 

Step 2: Enable Horizontal Scroll 

First and foremost, click on the container. 

Content Width 

Then, 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. 

Width 

Next, I set the width to 100, but you can change it to any value that works for you. There are no strict rules. You can use whatever value fits your layout. 

Direction 

After that, choose the direction you want the horizontal animation to move. I selected “Row-horizontal,” which moves the container to the left. 

However, you can choose any direction you prefer. On top of that, i left the remaining settings at their default values. 

Note: (I only changed the settings marked in red circle on the image. However, you’re free to adjust the other settings and explore them in your own way.) 

Horizontal Scroll

Click on the ‘Advanced’ Tab to find the Horizontal Scroll option. 

Enable: Once you find it, click on it and enable it by toggling it to ‘Yes.’ Otherwise, the rest of the settings options won’t appear.

Width: Adjust the width based on the number of containers. For example, use 300 for three containers or 600 for six. You get the idea. Since I selected three containers, I set the width to 300.      

End: The End setting controls when the horizontal scroll animation stops. For example, if you set it to 2000, the animation will finish after the user scrolls 2000 pixels down the page.

If you set it to 800, the animation will complete after 800 pixels of scrolling. You get the idea.

In my case, I set it to 3000, so the animation starts when the top of the container reaches the screen, and ends after the user scrolls 3000 pixels down the page. 

However, you can change this number to match how far you want the scroll to go.

Breakpoint: The Breakpoint settings offer various options such as Mobile Portrait, Mobile Landscape, Tablet Portrait, Tablet Landscape, and Laptop. These settings help control the minimum screen width where the horizontal scroll effect is applied.

In my case, I chose Mobile Portrait, but you can select any option based on your preference. 

Step 3: Customize Container Design

Now, click on “Edit Container,” go to the “Layout” tab, and make sure the Content Width setting for each container is set to Full Width. After that, leave the rest of the settings as they are. No need to change anything. 

However, you can customize them if you prefer. 

Note: (You must set each container to Full Width.)

Afterward, click on “Edit Image” and go to the “Advanced” tab. Then, set the Width to Full Width (100%). Then just leave the rest of the settings as they are, and go to the Edit container again. 

Finally, click on ‘Publish’ and enjoy the horizontal scroll animation on your website.

Final Result    

You Did It 

Great job! Your horizontal scroll is working perfectly. You’ve turned a basic layout into a smooth, side-scrolling experience that’s both interactive and eye-catching.

Explore more layouts, play with settings, and keep creating awesome designs. In addition, if you have any questions or need a hand, feel free to reach out to our support team—we’re always here to help.