How to Add Scroll Effect on Horizontal Page Scroll in Elementor?

Updated onApril 10, 2026By

Key Takeaways

  • The Plus Addons for Elementor Horizontal Scroll widget allows users to add different scrolling effects to supported widgets.
  • Users can set start and end trigger points for animations in the Horizontal Scroll widget settings.
  • The Horizontal Scroll widget supports multiple effects including vertical, horizontal, opacity, rotate, scale, skew, border radius, and background color.
Table Of Content

Do you want to add a scroll effect on the horizontal page scroll in Elementor? With the Horizontal Scroll widget from The Plus Addons for Elementor you can add different scrolling effects on a number of The Plus Addons for Elementor widgets.

This feature allows website visitors to experience a smooth and dynamic transition as they scroll horizontally through a webpage.

To check the complete feature overview documentation of The Plus Addons for Elementor Horizontal Scroll widget, click here.

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.

LIVE WIDGET LINK

To do this, add the Horizontal Scroll widget on the page. 

In the Content tab click on the Create Template button to create your Elementor template.

Note: You can create the Elementor template beforehand as well.

In the Elementor template make sure to add The Plus Addons for Elementor widgets which has integration with the Horizontal Scroll widget.

You can check the full list of supported widgets below.

For example, let’s select the Creative Image widget and add an image to it.

Then, go to the Advanced tab, in the Plus Extras tab, enable the Horizontal Scroll toggle.

You’ll see an item, open it.

Now from here, you can add different scrolling effects.

To add any effect you have to first add the Scroll Options, click on the pencil icon.

In the settings, you have to set start and end trigger points i.e. where the animation trigger starts and ends.

Then you have to mention the start and end scroll points i.e. the area on the screen where the animation will happen.

Once the scrolling options are set, you can add different scrolling animation effects like vertical, horizontal, opacity, rotate, scale, skew, border radius and background color.

You can add multiple effects together as well.

For instance, we’ll add a scale effect. 

Creative image plus extra horizontal scroll

To fine tune the animation you can enable the Developer toggle and in the Trigger Name field add your custom trigger name.

Now you’ll see the trigger and scroll points on the screen based on that you can adjust your animation.

You can click on the +Add Item button to add more scrolling effects from different trigger points.

By enabling the Visibility toggle, you can remove scrolling effects for responsive devices. In the Responsive Width field, you can set the minimum screen width.

Once done, save the template.

Now, when you scroll you’ll see scrolling effects on your widgets as per your settings while the content changes on horizontal scroll.

Horizontal Scroll Supported Widgets

Also, check How to Make a Section Sticky on Scroll in Elementor Horizontal Page Scroll.

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
LinkedIn X GitHub YouTube Website
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What should I do if the Horizontal Scroll effect isn't working?

If the Horizontal Scroll effect isn't working, ensure that the Horizontal Scroll widget from The Plus Addons for Elementor is installed and activated. Also, check that you've added compatible widgets to your Elementor template. If the correct widgets aren't used, the scrolling effects won't trigger as expected.

What are the best practices for setting up scrolling effects?

When setting up scrolling effects, it's crucial to define clear start and end trigger points for your animations. This ensures that the effects activate at the right moments during the scroll. Additionally, consider enabling the Developer toggle to customize trigger names, which can help in fine-tuning your animations.

How do I add multiple scrolling effects to a single widget?

To add multiple scrolling effects to a single widget, use the +Add Item button in the Horizontal Scroll settings. This allows you to layer different effects, such as scale and opacity, enhancing the visual dynamics of your page as users scroll horizontally.

Are there any limitations when using the Horizontal Scroll widget?

One limitation of the Horizontal Scroll widget is that it only works with specific widgets from The Plus Addons for Elementor. If you attempt to use it with unsupported widgets or other page builders, the scrolling effects will not function as intended. Always verify compatibility before implementation.

Last reviewed: April 10, 2026

Related Docs