Horizontal Scrolling Card

⚠️ Important: Horizontal Scrolling Card is an Extension, not a module. It does not appear in the Divi Builder module list. It adds a Horizontal Scroll settings group to the Design tab of Divi Sections.

How It Works

You build one Section, and place several Rows inside it. When you scroll to that section, the section pins in place, and the Rows inside it become scroll.

In other words:

• The Section is the container that gets pinned — it does not scroll onto other sections.
• The Rows inside that one section are the cards. Each row slides in scroll.
• By default, the extension auto-detects the section's direct child rows as cards. You don't need to configure anything for this.

How to Enable

Step 1: Go to WordPress Admin → Divi Essential → Extensions

Step 2: Find Horizontal Scrolling Card and toggle it On

Step 3: Open any Divi Section in the Divi Builder

Step 4: Go to the Design tab → Horizontal Scroll section

Step 5: Toggle Enable Horizontal Scroll on and configure your settings

Step 6: Click Save — the horizontal scroll effect goes live on the front-end

Settings Reference

Enable Horizontal Scroll

Type: Toggle Default: Off Activates horizontal scrolling on the section. All other settings in this group become visible and active once this is enabled.

Scroll Type

Type: Dropdown Default: Pinned Sections

Controls the scrolling mechanism used to drive the horizontal movement:

Scroll Speed

Type: Slider Unit: x (multiplier) Default: 0.9x

Controls how fast the horizontal content moves relative to the visitor's scroll input. Think of it as a speed multiplier:

• Below 1x (e.g. 0.5–0.9x): Content moves slower than the scroll — creates a relaxed, cinematic feel
• 1x: Content moves at the same rate as the scroll input
• Above 1x (e.g. 1.2–2x): Content moves faster than the scroll — creates an energetic, fast-paced feel

Scrub Smoothness

Type: Dropdown Default: 3 — Slow

Controls how smoothly the horizontal motion follows the scroll input. Higher values add more easing and momentum — lower values feel more direct and snappy:

Item Gap

Type: Slider Unit: px Default: 0px

Controls the spacing between individual horizontal items (cards/sections) as they scroll past. Increase for visible breathing room between items; keep at 0px for edge-to-edge seamless scrolling.

Anticipate Pin

Type: Toggle Default: On

When enabled, GSAP's ScrollTrigger begins compensating for the pin slightly before the scroll position reaches the section. This prevents a brief visual jump when the section pins to the viewport.

💡 Keep this On in almost all cases. Turning it off can cause a visible layout shift at the moment the section pins, especially on fast scrollers.

Content Parallax

Type: Toggle Default: On

When enabled, content inside each horizontal card moves at a slightly different rate than the card container itself — creating a layered depth effect where foreground and background elements drift at different speeds.

Parallax Speed

Type: Slider Default: 0.5 Appears when: Content Parallax is On

Controls the intensity of the parallax offset between content and container:

• Low values (0.1–0.3): Subtle parallax — barely noticeable, adds gentle depth
• Default (0.5): Balanced parallax — clearly visible without feeling disorienting
• High values (0.7–1.0): Strong parallax — dramatic depth effect, content lags noticeably behind

Enter Animation

Type: Dropdown Default: Fade In

Defines how each card animates into view as it enters the horizontal scroll frame:

Stagger Elements

Type: Toggle Default: On

When enabled, child elements inside each card animate in with a staggered delay — one after another — rather than all appearing at the same time. This creates a cascading reveal effect that feels polished and intentional.

💡 Stagger Elements works in combination with Enter Animation. If Enter Animation is set to None, Stagger Elements has no visible effect.

Pro Tips

💡 Use Pinned Sections with 3–5 cards for the best experience Horizontal scroll works best when the total horizontal content is a predictable length. 3–5 cards is the sweet spot — enough to feel like a deliberate journey, not so many that visitors lose track of where they are on the page.

💡 Keep Scroll Speed below 1x for professional sites A speed of 0.7–0.9x creates a slower, more deliberate horizontal movement that feels premium and intentional. Speeds above 1x can feel hectic and harder to read.

💡 Scrub Smoothness 3 is the safe default Smoothness 3 (Slow) works well across most devices and scroll input types (mouse wheel, trackpad, keyboard). Very high smoothness (4–5) can feel sluggish on trackpad users who tend to flick quickly.

💡 Always keep Anticipate Pin On Unless you have a specific reason to disable it, leave Anticipate Pin enabled. It eliminates the visual jump at pin entry — a small technical detail that makes a noticeable difference in perceived polish.

💡 Combine Enter Animation with Stagger Elements Fade In + Stagger Elements On is the most universally pleasing combination. Each card fades in, and its child elements (heading, text, button) cascade in one after another. It's subtle but significantly elevates the perceived quality of the scroll experience.

💡 Test on mobile before publishing Horizontal scroll sections behave differently on touch devices. Test on both iOS Safari and Android Chrome — some scroll types perform better with adjusted Scrub Smoothness and Scroll Speed values on mobile.