V4 Early Bird: up to 25% off Annual, up to 30% off Lifetime, and 2x site activations on every plan. Ends Oct 17.V4 Early Bird: up to 30% off + 2x sites · ends Oct 17. See plans →
Get Animation Addons Pro
Classic Elementor widget · Pro

Lottie Widget for Elementor Lottie animation that plays on scroll, hover, click or cursor

The Lottie Widget adds an Elementor Lottie animation to any page. Upload a Lottie file or paste its URL, then choose what plays it: the scroll, a hover, a click, the mouse cursor or the moment it comes into view. Animated icons, scroll stories and playful buttons, with no code. This is the Lottie animation for Elementor sites that need more triggers than the default.

Get Animation Addons Pro See the live demos
  • Upload a JSON file or URL
  • Scroll, hover, click or cursor
  • Loop and Speed
  • SVG or Canvas renderer

Classic widget · Elementor 3 and 4 · ProUpdated

Live demos

Lottie animations, live

Five Lottie designs on small sites: a scroll story, a face that follows the mouse, an animated headline, a product story and a row of animated icons. Scroll, hover and move your mouse to try them.

NorthlightWorkStudioContact
How we work

One idea, a few good bounces

We test every idea until it holds, then we ship it.

Brief, sketch, test, launch. Every Northlight project follows the same path.

Scroll story

Elementor Lottie on scroll

The studio page of a design agency. A white ball drops, tips a blue half disc, bounces off a ramp and rolls down a hill. Each frame is tied to the scroll position, so scrolling up plays it backwards. The art stays in view while you scroll inside the frame.

Scroll inside the frame, then back up

In the panel, set Trigger to On Scroll and Renderer to SVG. In the Style tab, set Height and Width to fit the section.

Arolax®WorkAboutContact
Have an idea?

Let us build it together

Call to action

A face that follows the mouse

The contact page of a design agency. A half ring with a face wraps the Start a project button. The eyes follow your cursor from left to right, the brows lift and the face blinks on the way.

Move the mouse across the face

In the panel, set Trigger to Mouse Cursor and leave Loop? off. In the Style tab, set the Width.

Sahara FilmsFilmsStudioContact
Contact

Tell us about your film

We read every message and reply within two working days.

Have aPrjectin mind

[email protected]

Animated headline

An eye in place of the O

The contact page of a film company. The O in the headline is a small Lottie eye. It blinks and looks left and right as you scroll inside the frame, and returns when you scroll up.

Scroll inside the frame

The headline is two text widgets with one Lottie Widget between them. Set Trigger to On Scroll and Width to 170 px in the Style tab.

HaldenProductPricingLogin
From first tap to launch

Ship your site in an afternoon

Pick a block, drop in your images, press publish. Halden does the rest.

Product story

A story that plays when it comes into view

A product page with a short animation. App tiles pop in, a hand taps the menu, the tiles gather into a ball that drops into a page, a button turns green, a rocket launches and planets appear. It starts as it enters the screen and repeats ten times.

Watch it start

In the panel, set Trigger to Viewpoint, turn on Loop? and set Renderer to SVG.

Maison FormeHomesServicesJournal
How we work

Four steps to a finished home

  • Survey

    We measure every room before we draw a line.

  • Design

    Plans, materials and light, signed off together.

  • Build

    One site lead and a weekly report with photos.

  • Care

    We come back after a year to check every joint.

Animated icons

Elementor Lottie animated icons that draw themselves

The services section of a home builder. Four line icons for survey, design, build and care. Each one erases and draws itself again in a loop of about two seconds, starting as it comes into view.

Watch the icons draw

Each icon is its own Lottie Widget. Set Trigger to Viewpoint, turn on Loop? and set Width to 81 px in the Style tab.

Features

Key features of the Lottie Widget

What the widget gives you, each tied to a setting in the Elementor panel.

Upload a Lottie file

Set Source to Media File and add your Elementor Lottie JSON file in Upload JSON File, or choose External URL for a hosted Lottie file.

Scroll-based animations

With Trigger set to On Scroll you get an Elementor Lottie on scroll: the frames follow the scroll from the moment the widget reaches the middle of the screen, forward and back.

Frames that follow the cursor

The Elementor Lottie mouse cursor trigger (Mouse Cursor) maps the cursor position across the widget to a frame, with a short easing, for eyes that follow or objects that turn.

Hover and click

On Hover gives an Elementor Lottie hover effect: it rewinds to the first frame and plays. On Click makes an Elementor Lottie on click, for buttons and toggles.

Plays when it is seen

Viewpoint starts the animation as it enters the screen, so a story or animated icon plays when someone is there to watch.

Loop and Speed

Turn on Loop? for an Elementor Lottie loop that repeats a set number of times, and use Speed to play it faster.

SVG or Canvas

Under Additional Properties, the Renderer can be Default, SVG for sharp vector animation at every size, or Canvas for heavy scenes.

A Lottie player without the setup

Animation Addons Pro loads the Lottie player and GSAP on the page for you, so there is no script tag to add. Size the animation with Width and Height in the Style tab, and use it for an Elementor Lottie animated icon, motion graphics in a hero, or a scroll story.

Step by step

How to add a Lottie animation in Elementor

Five steps. The bold names are the labels in the Elementor panel.

  1. Install Animation Addons Pro, then turn on Lottie in Animation Addons → Elements.

  2. In Elementor, search the panel for Lottie and drag the widget onto the page.

  3. Under Settings, set Source to Media File and add your file in Upload JSON File, or pick External URL.

  4. Choose a Trigger: On Scroll, On Hover, Mouse Cursor, On Click or Viewpoint. Turn on Loop? and set the Speed if you need them.

  5. Pick the Renderer under Additional Properties, set Width and Height in the Style tab, then preview the page.

Get Animation Addons Pro Part of Animation Addons Pro · Works with Elementor Free
FAQ

Questions about the Lottie Widget

What is a Lottie animation?

A Lottie is a vector animation saved as a JSON file, usually exported from After Effects with the Bodymovin plugin. It stays sharp at any size and is much lighter than a video or GIF.

How do I add a Lottie animation in Elementor?

Add the Lottie Widget from Animation Addons Pro, set Source to Media File and upload your .json file, or paste an External URL. Then choose a Trigger.

Can a Lottie play on scroll?

Yes. Set Trigger to On Scroll. The frames follow the scroll from the moment the widget reaches the middle of the screen, forward as you scroll down and backward as you scroll up.

Can the animation follow the mouse?

Yes. With Trigger set to Mouse Cursor, the cursor position from left to right picks the frame, eased so it moves smoothly. The face demo on this page works this way.

How do I make a Lottie loop?

Turn on Loop? and set how many times it repeats. With Viewpoint as the trigger, the loop starts when the animation comes into view.

Where do I get Lottie files?

Export your own from After Effects with Bodymovin, or download one from a Lottie library such as LottieFiles. Check the license before you use it on a client site.

Should I use the SVG or Canvas renderer?

SVG keeps the animation sharp at every size and suits icons and UI. Canvas can be faster for complex scenes. Default lets the widget choose.

Does the Lottie Widget need Elementor Pro?

No. It works with Elementor Free and is part of Animation Addons Pro. It is a classic widget, so it also runs in Elementor 4.

Animation Addons Pro · Elementor 4

Make it move, with a Lottie

Lottie animation on scroll, on hover, on click or with the cursor, built in Elementor.

Get Animation Addons Pro Try it free
  • 15-day money-back guarantee
  • Rated 4.6 / 5 on WordPress.org
  • No Elementor Pro needed
  • Elementor 3 & 4 in one license