Animation extension · Pro
Switch it on, set Speed and Lag, and your images, headings and containers move at their own pace as visitors scroll. Built on GSAP ScrollSmoother for Elementor 4 Atomic Elements.
Need something free today? Elementor's own Interactions can fade or slide an element in as it scrolls into view, without scroll-linked depth.
The short answer
Parallax is an Animation Addons for Elementor extension that adds an Elementor parallax scrolling effect to Elementor 4 Atomic Elements. It uses GSAP ScrollSmoother to move a selected element at its own speed while the page scrolls, and can add a lag so it eases into place. Speed, Lag and on/off are set per device.
| Plan | Pro |
|---|---|
| Type | Animation (scroll-linked) |
| Works on | Elementor Heading, Paragraph, Button, Image, SVG, Flexbox, Div Block and Grid, plus Animation Addons atomic widgets |
| Main controls | Enable Scroll Smoother, Speed (default 0.9; suggestions 0.6–0.9), Lag (default 0), Enable in Editor, Play Now |
| Engine | GSAP ScrollSmoother |
| Editor preview | Off by default. Turn on Enable in Editor (one switch for all devices) to show Play Now |
| Responsive | Enable Scroll Smoother, Speed and Lag can differ per breakpoint |
| Limits | Moves the whole element, not a background image inside it (for that, use Image Animation's "pro - 8. Scroll Parallax" preset). Not on Elementor's YouTube, Video, Divider, Tabs, Accordion or Background Video; wrap them in a Div Block. Playback needs Animation Addons Pro |
| Plugin version | Animation Addons for Elementor 4.3 · Last updated October 2026 |
Demo variations
Every demo uses Parallax from Animation Addons Pro on Elementor 4's own elements. The settings on each card are a good place to start.
A mountain photo at the back, a large headline in the middle, two small postcard images in front. Each layer moves at a different pace.
A cream menu section. Cut-out SVG basil leaves and a lemon drift beside the dish list and settle a moment after the scroll stops.
A three-column image Grid where the middle column moves more slowly, so the columns slide past each other.
A product screenshot with two small UI cards ("Invoice sent", "Paid") floating in front and catching up softly.
A narrow pale-blue Flexbox of three short facts; the booking Button below them trails a beat behind, drawing the eye without loud motion.
Three lines of oversized type; the middle line lags and slides behind the other two.
Features
Every point below is a real control in the Parallax panel section or part of how it works. Nothing here needs custom code.
Speed sets how fast the element travels compared with the scroll; values under 1 trail behind. Lag adds a short delay before it catches up. Together they cover most parallax looks without keyframes.
Parallax uses GSAP's ScrollSmoother rather than a CSS background trick, so it works on any supported element, including headings, buttons and whole containers.
Enable Scroll Smoother, Speed and Lag are saved per breakpoint. Keep a strong effect on desktop, soften it on tablet and switch it off on mobile.
The effect stays still while you build. Turn on Enable in Editor when you want the Play Now button to check the motion on the canvas.
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 Parallax is on in the plugin dashboard's extension list.
Open a page in the Elementor 4 editor and select an Image, Heading or container.
Open the Parallax Effect section and turn on Enable Scroll Smoother.
Set Speed (start with 0.8) and, if you want a soft catch-up, Lag (start with 0.5).
Turn on Enable in Editor and press Play Now to preview.
Switch to tablet and mobile to change or turn off the effect, then 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 | Animation Addons Parallax |
|---|---|---|
| Scroll-linked motion | "While scrolling" trigger in Pro only | Yes, with the Pro plugin on Elementor Free |
| Set-up | Build a custom effect with move values and start/end points | Two settings: Speed and Lag |
| Catch-up delay (lag) | Not in the effect list | Yes, Lag |
| Different settings per device | Pro only | Yes, per breakpoint |
| Engine | Motion library | GSAP ScrollSmoother |
Compared with Elementor 4.3.3 (September 2026).
Elementor Pro's "While scrolling" Interactions can move an element with the scroll. Parallax is quicker for layered depth, adds lag, and needs no Elementor Pro.
Who it's for
The people who get the most out of it, and what they use it for.
Adding depth to hero sections for clients on Elementor Free.
Who want portfolios that feel layered, not flat.
Where floating imagery sets the mood.
FAQ
With Animation Addons Pro, select an Elementor 4 element, open its Parallax Effect section and turn on Enable Scroll Smoother. Set Speed below 1, for example 0.8, so the element moves more slowly than the page, and add Lag for a soft catch-up. Turn on Enable in Editor and press Play Now to preview the parallax on the canvas.
Yes. Animation Addons Parallax works on Elementor 4 Atomic Elements, which ship with Elementor Free, so you do not need Elementor Pro's scroll-linked Interactions. You need Elementor 4.0 or newer and Animation Addons Pro. Without Pro, Elementor's free Interactions can still fade or slide an element in on scroll, but without scroll-linked depth.
Animation Addons Parallax saves its settings per breakpoint, so you choose. Many designers keep a gentle Speed such as 0.9 on tablet and turn Enable Scroll Smoother off on mobile, where screens are narrow and layered elements can overlap. Check each device in Elementor's responsive preview before publishing.
Animation Addons Parallax moves a whole element, such as an Image or container, rather than a background image inside it. For a photo that shifts inside its own frame as the page scrolls, use the Image Animation extension's "pro - 8. Scroll Parallax" preset on an Image element, or place an Image behind your content and give that Image the Parallax effect.
Animation Addons keeps Parallax still in the editor so the canvas is easy to edit. Turn on Enable in Editor, which applies to all devices, and a Play Now button appears for previewing. The section appears on Elementor's Heading, Paragraph, Button, Image, SVG, Flexbox, Div Block and Grid and on Animation Addons widgets; playback on the live site needs Animation Addons Pro.
Animation Addons Parallax runs on GSAP ScrollSmoother, which moves elements with transforms instead of repainting backgrounds. Keep it to a few layers per section. Animation Addons Pro also includes Lazy Animation, Reduced Motion and a Performance Wizard, and is compatible with LiteSpeed Cache and WP Rocket.
Strong parallax can bother visitors who are sensitive to motion. With Animation Addons Parallax, keep Speed between 0.8 and 0.9 for content areas, avoid parallax on body text, and turn it off on mobile if layers overlap. Animation Addons Pro includes a Reduced Motion setting in its performance tools.
Yes. Animation Addons Parallax and Regular Animation have separate panel sections, so one element can fade in with a Regular Animation preset and then drift with Parallax as the page scrolls. Avoid also adding Elementor's own scroll Interactions to that element, because both would move the same transform.
More answers in the FAQ · Documentation · Free vs Pro
Pairs well with
What works well with Parallax on the same page or template.
Give layered elements an entrance before the parallax takes over.
Its "pro - 8. Scroll Parallax" preset moves a photo inside its frame.
Depth that follows the cursor instead of the scroll.
Pin one layer while others drift past it.
Add a gentle Speed to post cards in a blog grid.
Speed, Lag and a per-device switch on the Elementor 4 elements you already use, powered by GSAP ScrollSmoother.
Starting free? Elementor's Interactions handle simple fades on scroll; add Parallax when you want depth.
