Horizontal Scroll – Sky Addons

How to use Horizontal Scroll Widget of Sky Addons for Elementor

The Sky Addons Horizontal Scroll widget turns a run of ordinary vertical page sections into a pinned, side-scrolling strip that scrubs horizontally as visitors scroll down. Powered by GSAP ScrollTrigger, the Horizontal Scroll widget lets you build panel-based storytelling, portfolios, product walkthroughs, and step sequences in Elementor without writing a single line of code. Its Auto mode automatically captures every section that follows the widget and glides them sideways, while a Section IDs mode lets you hand-pick exact sections to pull into the run. Header, footer, admin bar, and any section you opt out are always skipped, so only your real content moves. Built-in dots, arrows, a live counter, and a progress bar keep visitors oriented, and the whole effect gracefully falls back to normal vertical flow on mobile or when motion is reduced. This documentation will guide you through the process of using the Horizontal Scroll widget to build a smooth, cinematic side-scrolling experience on your website.

Features:

Auto Mode (Following Sections): Drop the widget in an empty section and every section after it is automatically pinned and scrubbed sideways as one horizontal run — no IDs to manage.
Section IDs Mode: Prefer full control? List specific section or container IDs in a repeater and only those become panels, in the order you set.
Automatic Skip of Global Regions: The header, footer, WordPress admin bar, and Theme Builder header/footer locations are never dragged into the strip — only real page content scrolls.
Opt-out Any Section: Add the sa-hs-skip CSS class or a data-hs-skip attribute to any section to exclude it from the horizontal run.
Snap, Smoothness & Navigation: Dial in scroll smoothness, snap each panel to centre, and let visitors jump around with dots (with optional labels), Prev/Next arrows, a live “01 / 05 — Title” counter, and a progress bar.
Motion Effects: Content Reveal fades and rises panel content as it reaches centre, Image Parallax drifts images for depth, and Background Morph blends between panel background colours while scrolling.
Progress Ring: Draw a completion ring around the Next button so visitors always know how far through the run they are.
Graceful Fallback: Below 1024px, on prefers-reduced-motion, or when GSAP is unavailable, sections stay in their normal vertical flow — nothing is ever moved or broken.

Insert Horizontal Scroll Widget

Open your page in Elementor and add a new, empty section at the point where the horizontal run should begin.
Search for Horizontal Scroll in the widget panel and drag it into that empty section.
Build the sections that should scroll sideways directly below the widget’s section (Auto mode), then preview the page — the effect runs on the front end, not inside the editor.

Configure the Content (Source)

The Content section decides which sections become horizontal panels. There are two modes — Auto and Section IDs — and they work very differently.

Source → Auto (Following Sections): The default. Every section that comes after this widget’s own section becomes a horizontal panel. Place the widget in an empty section exactly where the run should start, then stack your content sections beneath it. This is the fastest way to build a horizontal strip.
Scope Selector (Auto only) — optional. Enter the CSS selector of a container (e.g. #my-container) whose direct children should become the panels instead. Leave it empty to use the sections that follow the widget. Useful when your panels live inside a specific container rather than as top-level sections.
Source → Section IDs: Switch to this mode for precise, hand-picked control. A Sections repeater appears — add one row per panel:
- Section ID — the CSS ID of an existing section or container, entered without the leading “#” (e.g. my-section). Supports dynamic tags.
- Dot Label — optional text shown under that panel’s navigation dot.
Only the sections you list are pulled into the run, in the order of the repeater rows.

Which mode should you use? Choose Auto when your panels are simply the next few sections on the page — it needs no IDs and adapts as you add or remove sections. Choose Section IDs when the panels are scattered, live inside containers, or you need a fixed, explicit order.

Configure the Settings

The Settings section controls how the strip scrolls, which navigation elements appear, and the motion effects layered on top.

Scroll Smoothness — how much the strip lags behind the scroll (0.1–3). Higher values feel smoother and looser; lower values track the scroll tightly.
Snap to Panels — when on, scrolling settles each panel neatly into view. Snap Duration (s) sets how long that settle takes (0.1–2s).
Dots — show a dot per panel. Dot Labels adds a text label under each dot (from the repeater’s Dot Label, a panel’s data-hs-label, or its first heading). Dots Position places the row at bottom center, left, or right.
Arrows — show Prev/Next buttons for click navigation. Progress Ring draws a completion ring around the Next button.
Progress Bar — a thin bar that fills as visitors advance through the run.
Counter + Title — a live “01 / 05 — Panel Title” readout that updates as each panel becomes active.
Content Reveal — panel content rises and fades in as the panel reaches centre.
Image Parallax — images inside panels drift for depth as they cross the screen.
Background Morph — blends between panel backgrounds while scrolling. Give each panel a transparent background and a data-hs-bg="#color" attribute (or a solid background colour) for the blend to work.

Style the Widget

The Style tab customises the panels and every navigation element. Each section appears only when its element is enabled in Settings.

Panels: Min Height (vh/px) and Panel Width (vw/%) for each panel in the strip.
Dots: Shape (circle, square, line), spacing, offset, plus Normal and Active tabs for dot colour, width, height, radius, and label colour/typography.
Arrows: Position, button gap, icon size, box size, edge offset, Normal/Hover colours and backgrounds, border, radius, box shadow, and the Progress Ring’s bar/track colour and thickness.
Counter: Position, offset, index colour, total/separator colour, and number typography.
Progress Bar: Position (top/bottom), height, track colour, bar colour, and border radius.

Save and Preview

Click Update in Elementor to save your page.
Open the page on the front end (not the editor) and scroll down — the effect only runs live. On a desktop viewport, watch your sections pin and scrub sideways.

Best Practices

In Auto mode, always place the widget in its own empty section directly above the panels — anything sharing that section will pin along with the widget.
To exclude a section from the horizontal run, add the CSS class sa-hs-skip to it (Advanced → CSS Classes) or a data-hs-skip custom attribute. That section stays in normal vertical flow even though it follows the widget.
Keep panels to a comfortable count (roughly 3–7). Very long strips make the pinned scroll distance feel endless; break longer stories into multiple runs.
For Background Morph, set each panel’s background to transparent and add a data-hs-bg="#color" attribute so the widget has a colour to blend toward.
Enable Snap to Panels for slide-like, one-panel-at-a-time storytelling; turn it off for a continuous, free-flowing cinematic scrub.

Troubleshooting

Nothing scrolls sideways in the editor: This is expected. The effect is disabled inside the Elementor editor — save and preview the page on the front end to see it work.
The header, footer, or admin bar got pulled into the strip: These global regions are auto-skipped, so this should not normally happen. If a custom global region still leaks in, add the sa-hs-skip class (or a data-hs-skip attribute) to that region so it is explicitly excluded.
The wrong sections became panels: In Auto mode, every section after the widget joins the run. Add sa-hs-skip to any that should stay vertical, or switch Source to Section IDs and list only the exact sections you want.
Sections stay vertical and never scrub: The widget requires GSAP and a desktop viewport (1024px+). Below that width, on prefers-reduced-motion, or if GSAP fails to load, panels intentionally fall back to normal vertical flow.

Frequently Asked Questions

How do I exclude a section from horizontal scroll?

Add the CSS class sa-hs-skip to the section (Elementor → Advanced → CSS Classes) or give it a data-hs-skip custom attribute. Any section carrying either marker is left in its normal vertical position and never pulled into the horizontal strip — even in Auto mode. Alternatively, switch Source to Section IDs and simply omit that section from the list.

Does it work on mobile or touch devices?

The horizontal scrub is a desktop experience. Below 1024px the widget deliberately leaves your sections in their normal vertical flow, so mobile and tablet visitors get a clean, readable, top-to-bottom layout with no broken pinning. This also means visitors who prefer reduced motion, or browsers without GSAP, always see the standard vertical version.

What is the difference between Auto and Section IDs mode?

Auto mode captures every section that follows the widget’s own section automatically — perfect when your panels are simply the next few sections. Section IDs mode ignores position and instead uses only the section or container IDs you list in the repeater, in the exact order you set them — perfect for scattered panels or a fixed sequence.

Why can’t I see the effect inside the Elementor editor?

The widget renders only a host and an empty track in PHP; the JavaScript handler relocates your real sections into that track on the front end. To keep the editor stable and editable, the pinning and scrubbing are disabled in edit mode. Always preview or view the live page to test the horizontal scroll.

Can I customise the label shown under each dot and in the counter?

Yes. In Section IDs mode, set each row’s Dot Label. In Auto mode, the widget uses a panel’s data-hs-label attribute if present, otherwise the first heading (h1–h6) inside that panel, falling back to the panel number. The same label drives both the navigation dots and the live counter readout.

Conclusion

The Horizontal Scroll widget from Sky Addons brings the polished, pinned side-scrolling effect of high-end agency sites to any Elementor page — with zero code. Pick Auto mode to capture the sections that follow the widget, or Section IDs mode for hand-picked panels; layer on dots, arrows, a counter, a progress bar, and motion effects; and rest easy knowing headers, footers, and any opted-out section stay out of the strip while mobile visitors get a clean vertical fallback. If you have any questions or need help, visit the Sky Addons support center.

Sky Addons for Elementor