Elementor Motion

What this category covers

Elementor scroll animation is easy to add and hard to add well. A heading that slides in can make a page feel considered. Ten effects on one page, a scroll section that stutters on a phone, or a hero that shifts down as fonts load will do the opposite, and can cost you in Core Web Vitals.

This category is about Elementor scroll animation done with care. The guides are written for designers and developers who build with Elementor and want results that used to need custom code: an Apple-style image sequence that scrubs with the scrollbar, a section that pins and moves sideways, a headline that reveals letter by letter, or a logo strip that loops without a gap.

Each tutorial follows the same pattern. First, what the effect is and when it helps the page. Then how to build it in Elementor, step by step. Then the performance and accessibility checks to run before you publish. Where an effect does not suit a situation, we say so.

Which scroll effects are covered?

How do you plan motion for a page?

The best motion work starts before anyone opens Elementor. A page usually needs one main effect, the one that carries the story, and a few quiet supporting ones. When every section moves, nothing stands out and the page feels slow even if it scores well. Before building, we answer four questions:

1. What should the visitor understand at this point? Motion should point at that: the product turning to show its detail, the steps of a process appearing in order, the key figure counting up.
2. Is the effect tied to scroll or to time? Scroll-linked effects, such as image sequences and horizontal panels, put the visitor in control. Time-based effects, such as text reveals, play once and get out of the way.
3. What does the section look like with no motion at all? That is what visitors with reduce motion enabled, search engines and slow phones will see, so it must still make sense.
4. How will it behave on a phone? Decide this up front rather than after the desktop version is finished.

Writing this down in a sentence per section also makes handover easier. A client who knows why the hero animates is less likely to add three more effects next to it.

How do you prepare frames for an image sequence?

Image sequences are the effect people ask about most, and the one that goes wrong most often, usually because of the frames rather than the widget. A few habits help:

• Export at the size you display. Frames larger than the canvas on screen cost download time and give nothing back.
• Use a modern format. WebP or AVIF frames are much smaller than PNG for the same visual result.
• Use only the frames you need. Smooth scrubbing does not need every frame of the original video. Test fewer frames before you upload more.
• Keep the first frame light and show it at once. It is what visitors see while the rest load, and it often counts as the largest element on screen.
• Name frames in order. A consistent numbered sequence, such as frame-001 to frame-120, avoids frames playing out of order.

Our image sequence tutorial covers exporting frames from a video file, choosing the frame count and checking the result in PageSpeed Insights.

How do you keep animation from hurting Core Web Vitals?

The guide on animation performance covers this in depth. The short version is five rules we apply on every site:

1. Animate transform and opacity. Moving, scaling and fading are cheap for the browser. Animating width, height, top or margin forces layout work on every frame.
2. Do not hide the main content until scripts run. If the largest element on screen waits for JavaScript, your Largest Contentful Paint waits too.
3. Reserve space before anything pins. Pinned sections and image sequences should take their final size from the start, so nothing jumps and Cumulative Layout Shift stays low.
4. Load scripts only where they are used. A page with no motion widget should not download animation code.
5. Do less on phones. Long horizontal sections and heavy sequences often work better as a simple stacked layout on small screens.

What about accessibility?

Some visitors get dizzy or distracted by movement, and their system tells the browser so through the "reduce motion" setting. Every effect on a page should respect it: text should appear at once, counters should show the final number and marquees should stand still. Screen readers need care too. When a heading is split into separate letters, the reader should still hear one sentence, and the repeated copies a marquee uses to loop should be hidden from assistive technology so each item is read once. Our split text and marquee tutorials show how to check this in the browser's accessibility panel.

Can you use GSAP on a WordPress site?

GSAP is the animation library behind many advanced scroll effects. It now has its own licence, which allows free use in many cases, but the terms differ between using it on a website you build and shipping it inside a product. Our 2026 licence guide explains the difference in plain language and links to the official terms. Read the current licence on the GSAP website before you rely on any summary, including ours.

The same guide covers a practical point that is easy to miss: when several plugins on one site each load their own copy of GSAP, the page downloads the library more than once and the copies can conflict. Check your page's network requests and keep one version in use where you can.

Where Ston Motion fits

We built Ston Motion for the motion work on our own sites, ston.ae included. The free plugin, available on WordPress.org, adds twelve widgets to Elementor, including Split Text Reveal, Scroll Counter, Marquee, Magnetic Button, Custom Cursor and Text Rotator. They run on a small animation core written for the plugin, so no animation library is downloaded and nothing loads from a third-party server. Scripts load only on pages that use a widget, every widget respects the reduce motion setting, and it does not need Elementor Pro.

Ston Motion Pro is a separate add-on that adds Image Sequence Scroll with Scroll Narrative layers, Horizontal Scroll, SVG Draw and Morph, Draggable Card Stack, Index Carousel, Hover Reveal List and Value Reel, and switches the free widgets to a GSAP engine. GSAP is included under its own licence, which is separate from ours. Each widget has its own demo page, such as the Image Sequence widget and the Split Text Reveal widget.

What these guides do not cover

We do not teach hand-written GSAP timelines or general JavaScript. The focus is on building effects in Elementor with widgets and settings. We also do not cover video production; for image sequences we explain how to export and size frames, not how to film them.

Where to start

If you want one striking effect for a hero or product page, start with Apple-style image sequence scroll in Elementor. If you already use animation and your PageSpeed scores dropped, start with the performance guide. The newest tutorials appear first in the list above.

Related topics on the blog: Elementor client handover covers how to keep clients from changing motion settings after launch, and WooCommerce multi-currency covers prices on store pages that use these effects.

Frequently asked questions

Can I add scroll animations in Elementor without code?

Yes. Elementor has basic entrance animations, and motion widget plugins add scroll-driven effects such as image sequences, horizontal scroll and text reveals through normal widget settings.

Do scroll animations slow a site down?

They can. Animating transform and opacity, loading scripts only where needed and reserving space for pinned sections keep the impact small.

Do animations work for visitors who prefer less motion?

They should. A well-built widget checks the reduce motion setting and shows the final state at once for those visitors.

Do I need Elementor Pro for these effects?

Not for the free Ston Motion widgets. Some tutorials mention Elementor Pro features, such as theme builder templates, and say so clearly.