---
title: "How to Add Scroll Effect on Horizontal Page Scroll in Elementor?"
url: https://theplusaddons.com/docs/add-scroll-effect-on-horizontal-page-scroll-in-elementor/
date: 2023-11-08
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "The Horizontal Scroll widget moves whole slides. If you want a single heading, image or button to animate as its slide comes across, that is a separate setting on the..."
image: https://theplusaddons.com/wp-content/uploads/2023/11/How-to-Add-Scroll-Effect-on-Horizontal-Page-Scroll-in-Elementor_-1024x536.jpg
word_count: 934
---

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

## 

- The Plus Addons for Elementor Horizontal Scroll widget adds different scrolling effects to The Plus Addons for Elementor widgets during horizontal page scroll in Elementor.
- The Content tab uses the Create Template button, and the Elementor template must include The Plus Addons for Elementor widgets that integrate with the Horizontal Scroll widget, such as Creative Image.
- The Plus Addons for Elementor lets users set Scroll Options with start and end trigger points, add effects like vertical, horizontal, opacity, rotate, scale, skew, border radius, and background color, and control responsive visibility with the Visibility toggle and Responsive Width field.

The **Horizontal Scroll** widget moves whole slides. If you want a single heading, image or button to animate as its slide comes across, that is a separate setting on the widget itself.

Many of The Plus Addons for Elementor widgets carry a **Horizontal Scroll** toggle in their **Plus Extras** section, which ties their animation to the horizontal scroll position.

*To check the complete feature overview documentation of The Plus Addons for Elementor Horizontal Scroll widget, [click here](https://theplusaddons.com/docs/horizontal-scroll-elementor-widget-settings-overview/).*

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

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/horizontal-scroll/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — Horizontal Scroll is only in The Plus Addons for Elementor Pro. With the Pro plugin switched off the widget is not in the editor at all, and a page that already uses it shows nothing where the widget was.- **Widget to enable:** Horizontal Scroll, switched on under **The Plus Addons > Widgets**.- **You need a template:** an Elementor Library template whose top-level sections are the slides. The widget turns each top-level section of that template into one horizontal slide.- **Where the settings live:** on the widget inside the slides template, under **Advanced > Plus Extras**. They are Pro settings and are not registered at all when the Pro plugin is switched off.

## How to Add a Scroll Effect

- Add the **Horizontal Scroll** widget to your page and select your slides template in **Select Template**. **Create Template** opens the editor in a pop-up if you have not built one.- Open that template and select one of The Plus Addons widgets inside it — the list of widgets that support this is below.- Go to **Advanced > Plus Extras** and switch **Horizontal Scroll** on.- An **Add Frame** row appears. Open it.- Open the **Scroll Options** popover and set **Trigger Start**, **Trigger End**, **Scroll Start** and **Scroll End**. These decide where in the sideways travel the animation runs.- Open any of the effect popovers — **Vertical**, **Horizontal**, **Opacity**, **Rotate**, **Scale**, **Skew**, **Border Radius** or **Background Color** — and give it a **Start** and an **End** value.- Use **+ ADD ITEM** to add more frames if you want different effects at different points.- Save the template.

![Plus Extras section in the Advanced tab of a widget, with the Horizontal Scroll toggle and its frame settings](https://theplusaddons.com/wp-content/uploads/2023/11/creative-image-plus-extra-horizontal-scroll.gif)

## Fine-tuning and Responsive

- **Developer** inside a frame draws the trigger and scroll markers on screen so you can see where the animation starts and ends. **Trigger Name** labels them, which helps when several widgets are animating.- **Visibility** and **Responsive Width** sit below the frames. With **Visibility** on, the effect is skipped on screens at or below **Responsive Width**. It accepts 300 to 2000 and starts at 300.

## The Result

## Settings in a Frame

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| **Trigger Start** / **Trigger End** | Where in the widget the animation is measured from and to. | 0.5 and 0.4 |
| **Scroll Start** / **Scroll End** | Where on the screen the animation runs as the widget crosses it. | 0.8 and 0.2 |
| **Vertical** / **Horizontal** | Moves the widget up and down or left and right, from a Start to an End value. | Off |
| **Opacity** | Fades the widget between two values. | Off |
| **Rotate** | Rotation on X, Y and Z, each with Start and End. | Off |
| **Scale** | Scale on X, Y and Z, each with Start and End. | Off |
| **Skew** | Skew on X and Y, each with Start and End. | Off |
| **Border Radius** | Animates the corner radius between two sets of values. | Off |
| **Background Color** | Fades between a Start Color and an End Color. | Off |
| **Developer** | Draws the trigger and scroll markers on screen. | Off |

## Widgets That Have the Horizontal Scroll Toggle

The **Plus Extras** section carrying this toggle is registered on these widgets:

- Accordion- Advanced Buttons- Advanced Typography- Advertisement Banner- Audio Player- Before After- Blockquote- Breadcrumbs Bar- Button- Carousel Remote- Contact Form 7- Countdown- Creative Image- Draw SVG- Dynamic Device- Dynamic Smart Showcase- Everest Form- Flip Box- Gravity Form- Heading Animation- Heading Title- Info Box- LottieFiles Animation- Mailchimp- Ninja Form- Number Counter- Pricing List- Pricing Table- Process/Steps- Progress Bar- Style Lists- Switcher- Tabs/Tours- Text Block- Video Player- WPForms

> *A form styler only appears in the editor when its own form plugin is active, so the list you see on your site may be shorter.*

## How It Behaves

- The animation is driven by the widget's position in the sideways travel, not by the page's vertical scroll, so it plays as the slide crosses the screen.- Several effects can run in one frame, and a widget can have several frames.- The settings live on the widget inside the template, not on the Horizontal Scroll widget.- With **Visibility** on, the effect is skipped when the device screen is at or below **Responsive Width**.

## Limitations

- These effects only do anything inside a Horizontal Scroll section. On an ordinary page the toggle has no effect.- They are on The Plus Addons widgets only. An Elementor core widget or a third-party widget has no **Plus Extras** section.- The whole feature is Pro. With the Pro plugin switched off the **Plus Extras** section is not registered on any widget.- **Responsive Width** is compared against the device's screen width, not the width of the browser window, so narrowing a desktop browser does not switch the effect off.- **Developer** markers are a build-time aid. Switch them off before you publish.

## Troubleshooting

### There is no Plus Extras section on my widget

Either the widget is not one of the ones listed above, or the Pro plugin is not active. Core Elementor widgets never have it.

### I switched the toggle on but nothing animates

A frame needs at least one effect popover opened with a **Start** and an **End** value. The toggle on its own does nothing.

### The animation runs at the wrong moment

Adjust **Trigger Start**, **Trigger End**, **Scroll Start** and **Scroll End**. Switch **Developer** on to see the markers while you tune them.

### It animates on desktop but not on my phone

**Visibility** is on and **Responsive Width** is at or above your phone's screen width. Lower it, or switch **Visibility** off.

## Related Docs

- [Horizontal Scroll widget settings overview](https://theplusaddons.com/docs/horizontal-scroll-elementor-widget-settings-overview/)- [Add a page transition effect in horizontal scroll](https://theplusaddons.com/docs/add-page-transition-effect-in-elementor-horizontal-scroll/)- [Make a section sticky on scroll](https://theplusaddons.com/docs/make-a-section-sticky-on-scroll-in-elementor-horizontal-page-scroll/)

## Frequently Asked Questions

**Q: Why isn’t the horizontal scroll effect showing on my Elementor widget?**
A: The Horizontal Scroll effect only works on widgets that are supported by The Plus Addons for Elementor. The page says you need to add the Horizontal Scroll widget, create or use an Elementor template, and place a supported widget inside it before enabling the Horizontal Scroll toggle in the Plus Extras tab. If the widget is not on the supported list, the effect will not apply. The supported widgets include Creative image, Accordion, TP Text Block, Advanced Typography, and several form and content widgets.

**Q: What do I need before adding a horizontal scroll effect in Elementor?**
A: The key requirement is that The Plus Addons for Elementor is installed and activated, because the Horizontal Scroll widget is part of it. The page also says you need an Elementor template and at least one supported widget inside that template. That setup matters because the scroll animation is applied to the widget content while the page moves horizontally, not to random page elements outside the template.

**Q: Which Elementor widgets support horizontal scroll effects?**
A: The page lists a wide set of supported widgets for Horizontal Scroll in The Plus Addons for Elementor, including Accordion, TP Text Block, Advanced Typography, Advanced Buttons, Advertisement Banner, Audio Player, Before After, Blockquote, Breadcrumbs Bar, Carousel Remote, Contact Form 7, Countdown, Draw SVG, Dynamic Device, Dynamic Smart Showcase, Everest Form, Flip Box, Gravity Form, Heading Animation, Heading Title, Info Box, Mailchimp, Ninja Form, Number Counter, Pricing List, Pricing Table, Process Steps, Progress Bar, Style List, Switcher, Tabs/Tours, Video Player, WP Forms, Button, and Creative image.

**Q: How do I fine tune a horizontal scroll animation in Elementor?**
A: The useful controls are the start and end trigger points plus the start and end scroll points. Those define when the animation begins and where it plays on screen. The page also says you can enable the Developer toggle and add a custom Trigger Name to make those points visible while adjusting them. That matters because small changes in trigger placement can completely change how smooth or abrupt the motion feels.

**Q: Can I combine more than one scroll effect on the same widget?**
A: The Horizontal Scroll widget supports multiple scrolling effects together. The page explicitly mentions effects like vertical movement, horizontal movement, opacity, rotate, scale, skew, border radius and background color. It also says you can use +Add Item to add more scrolling effects from different trigger points. That gives you layered motion instead of a single animation pass.

**Q: How do I stop horizontal scroll effects from showing on mobile or tablet?**
A: The Visibility toggle is there for responsive control. When it is enabled, you can remove scrolling effects for responsive devices and set a minimum screen width in the Responsive Width field. That is useful when an animation looks good on desktop but becomes cramped or distracting on smaller screens. The page’s setup lets you keep one template but narrow where the effect actually appears.