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.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
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.
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.
