Animation extension · Pro
Turn a Flexbox or Grid into a row of panels that travels sideways as visitors scroll down. One switch, two settings and a per-device on/off, powered by GSAP.
Need something free today? A Flexbox set to no-wrap with horizontal overflow lets visitors swipe or drag a row sideways, without scroll-linked motion.
The short answer
Horizontal Scroll Animation is an Animation Addons for Elementor extension that builds an Elementor horizontal scroll section from an Elementor 4 Flexbox or Grid. When visitors scroll down, the container's children move sideways across the screen, powered by GSAP. You choose where it starts, how fast it moves and which devices get it.
| Plan | Pro |
|---|---|
| Type | Animation (scroll-linked) |
| Works on | Elementor Flexbox and Grid only |
| Main controls | Enable, Start (positions such as "top top", "top 80px", "center center"), Speed (0.1 to 5, default 1), Markers, Save Change |
| Engine | GSAP with ScrollTrigger |
| Editor preview | Save Change applies the settings, replays the effect on the canvas and also saves the page |
| Responsive | Enable, Start and Speed can differ per breakpoint; Markers is one switch for all devices |
| Limits | Children need widths set so the row is wider than the screen; the panel's help text says so. Flexbox and Grid only (not Div Block). Save Change saves the whole page. Playback needs Animation Addons Pro |
| Plugin version | Animation Addons for Elementor 4.3 · Last updated October 2026 |
Demo variations
Every demo uses Horizontal Scroll Animation from Animation Addons Pro on Elementor 4's own elements. The settings on each card are a good place to start.
Five large project cards on a dark section; scrolling down moves the row from right to left.
A cream band with year markers and short stories that travel sideways like a timeline as the visitor reads down.
Four full-screen panels, each with one screenshot and one sentence, moving sideways like slides as the page scrolls.
A row of dish photos with names and prices underneath, moving past like a menu board.
Wide room photos with captions moving sideways through a white section, ending on a "Book a viewing" panel.
A single oversized sentence wider than the screen that glides sideways while the visitor scrolls.
Features
Every point below is a real control in the Horizontal Scroll Animation panel section or part of how it works. Nothing here needs custom code.
Select a Flexbox or Grid, turn on Enable in the Horizontal Scroll section, and its children travel sideways. Your cards, images and headings stay ordinary Elementor elements with their own styles.
Start offers ready positions from "top top" to "bottom 100%", including pixel offsets such as "top 80px" for sites with a sticky header. You can also type your own.
Speed is a slider from 0.1 to 5 (default 1). Change it, press Save Change and watch the canvas until the row feels right.
Enable, Start and Speed are saved per breakpoint. A common set-up keeps the effect on desktop and tablet and turns it off on mobile, where the row can wrap into a vertical stack.
Every panel is an ordinary Elementor element, so a client can swap an image or rewrite a caption without touching the effect, and the cards can still take a hover effect such as Tilt.
Step by step
Six steps from switching it on to publishing. The bold names are the exact labels you will see on screen.
Get Animation Addons ProInstall Animation Addons for Elementor and Animation Addons Pro, and check Horizontal Scroll Animation is on in the plugin dashboard's extension list.
Add a Flexbox (direction row, wrap off) or a Grid, and put your panels inside it.
Give the panels widths so the row is wider than the screen, for example 60vw each.
Select the Flexbox or Grid, open Horizontal Scroll and turn on Enable.
Set Start and Speed, then press Save Change to preview (this also saves the page).
Switch to mobile, turn Enable off if the row should stack, and publish.
Honest comparison
What each option has, side by side. Where the other choice is the better fit, we say so.
| Feature | Elementor 4 Interactions | Hand-coded GSAP | Animation Addons Horizontal Scroll |
|---|---|---|---|
| Ready-made horizontal scroll section | No horizontal-scroll option in the trigger or effect list | Written in JavaScript | Yes, one switch |
| Scroll-linked motion | "While scrolling" in Pro only | Yes | Yes, without Elementor Pro |
| Set-up | Build a custom move effect per element | Custom script, selectors and widths | Enable, Start, Speed |
| Different settings per device | Pro only | Media queries in code | Per breakpoint in the panel |
| Engine | Motion library | GSAP | GSAP with ScrollTrigger |
Compared with Elementor 4.3.3 (September 2026).
Elementor Pro's "While scrolling" Interactions can move one element along the X axis. Horizontal Scroll Animation handles the whole pattern: a container whose row of children travels sideways.
Who it's for
The people who get the most out of it, and what they use it for.
Presenting portfolios and case studies.
: histories, timelines and product walkthroughs.
Showing rooms, dishes or spaces in sequence.
FAQ
With Animation Addons Pro, add an Elementor 4 Flexbox with direction set to row and wrap off, and place your panels inside with widths that add up to more than the screen. Select the Flexbox, open the Horizontal Scroll section, turn on Enable and set Start and Speed. Press Save Change to preview the horizontal scroll.
Animation Addons Horizontal Scroll Animation needs the container's children to be wider, in total, than the screen. Check that each panel has a width such as 60vw, that the Flexbox wrap is off, and that you selected a Flexbox or Grid, not a Div Block. Turn on Markers to see where the effect starts and ends.
In Animation Addons Horizontal Scroll Animation, Enable is saved per breakpoint. Switch Elementor's device preview to mobile and turn Enable off. Then set the Flexbox to wrap or change its direction to column on mobile so the panels stack vertically. Desktop and tablet keep the sideways movement.
Yes. Animation Addons Horizontal Scroll Animation works on Elementor 4's Flexbox and Grid, which ship with Elementor Free, so you don't need Elementor Pro. You need Elementor 4.0 or newer and Animation Addons Pro. Without Pro, a Flexbox set to no-wrap with horizontal overflow gives visitors a swipeable row, without scroll-linked motion.
In Animation Addons Horizontal Scroll Animation, press Save Change. It applies your Start and Speed, replays the sideways movement on the canvas and also saves the whole page, so make sure other edits are ready first. Turn on Markers to see where the effect begins and ends, then switch it off before publishing.
Not directly. Animation Addons Horizontal Scroll Animation appears only on Elementor 4's Flexbox and Grid. If your layout uses a Div Block, wrap the panels in a Flexbox set to row with wrap off, or switch the container to a Flexbox, then turn on Horizontal Scroll there.
Animation Addons Horizontal Scroll Animation runs on GSAP and ScrollTrigger and moves the row with transforms. Your headings, images and links stay in the page HTML in normal order, so search engines index the section as usual. Compress large panel images. Animation Addons Pro adds Lazy Animation, a Performance Wizard and compatibility with LiteSpeed Cache and WP Rocket.
More answers in the FAQ · Documentation · Free vs Pro
Pairs well with
What works well with Horizontal Scroll Animation on the same page or template.
Pin a heading beside the moving row or keep the header visible.
Add "Jump to projects" links that glide down to the section.
Animate each panel's contents as the row moves.
A project grid for visitors who prefer to browse.
A swipeable alternative when you want arrows and dots instead of scroll-linked motion.
Turn any Elementor 4 Flexbox or Grid into a horizontal scroll section with one switch, then fine-tune Start and Speed per device.
Starting free? Elementor's Flexbox with horizontal overflow gives a swipeable row; add Horizontal Scroll for scroll-linked motion.
