--- title: "How to Add Lottie Animations in WordPress with Elementor" url: https://theplusaddons.com/blog/lottie-animation-wordpress/ date: 2026-06-24 modified: 2026-06-24 author: "Aditya Sharma" description: "The first time a client asked for a looping animated illustration in their hero section, I did what most people do: I exported a GIF. It looked fuzzy on retina..." image: https://theplusaddons.com/wp-content/uploads/2026/06/tqz75n-1024x538.jpg word_count: 1355 --- # How to Add Lottie Animations in WordPress with Elementor The first time a client asked for a looping animated illustration in their hero section, I did what most people do: I exported a GIF. It looked fuzzy on retina screens and weighed close to two megabytes. Then I tried an MP4, which meant autoplay quirks and an even bigger file. The fix I wish I had reached for first was Lottie, and once you add it through Elementor it takes about two minutes. This guide covers what a Lottie animation actually is, where to get one, and how to add it in WordPress using Elementor with The Plus Addons for Elementor, including a scroll-triggered version that most tutorials skip. Table Of Contents ![LottieFiles platform homepage with free Lottie animations](https://theplusaddons.com/wp-content/uploads/2026/06/VaA4RgvFNnLI8FY8Cp08j44JkYryFa4rEI3U1uu0KjsokiIb30Kdc6ncC6TVkbXFh4Qa5soAImmfblhgbUNb8g-scaled.png)LottieFiles hosts a large library of free, ready-to-use Lottie animations. Source: lottiefiles.com ## What is a Lottie animation? A Lottie is a JSON-based animation file format. In LottieFiles' own words, it "enables designers to ship animations on any platform as easily as shipping static assets." Instead of storing every frame as pixels the way a GIF or video does, a Lottie file stores the animation as vector instructions in a small JSON file. That is why, again per LottieFiles, "they are small files that work on any device and can scale up or down without pixelation." The format came out of Airbnb's open-source Lottie library. The web renderer, lottie-web, "parses Adobe After Effects animations exported as json with Bodymovin and renders them natively." In plain terms: a motion designer builds the animation in After Effects, exports it to JSON with the Bodymovin plugin, and that JSON plays back as crisp vector motion in the browser. ![Airbnb lottie-web open-source library on GitHub](https://theplusaddons.com/wp-content/uploads/2026/06/HG9IFBT4oHicbcqqLV55YudiJi3DCmx1mo6Tyh6g9h4lUCsQuEXnyOYQCFcaqJdEk-YQBZRzn_RWFlYE6y5xoA-scaled.png)Lottie originated as Airbnb's open-source lottie-web library, which renders After Effects animations exported to JSON. Source: github.com/airbnb/lottie-web ## Lottie vs GIF or video The reason to bother is the trade-off you stop having to make. A GIF locks you into a fixed resolution and balloons in size the moment you want it sharp. A video carries a heavier payload plus autoplay and codec headaches. Because a Lottie is vector data in a JSON file, it stays sharp at any size and the file itself is usually a fraction of the equivalent GIF. That lightness is a property of the Lottie format, not something a plugin adds, so it holds no matter how you embed it. The practical upshot for a WordPress build: you get smooth motion in a hero, an empty state, a loading indicator, or an icon hover, without the page-weight penalty that usually comes with animation. If page speed is already on your mind, it pairs well with the rest of the basics in our guide to [speeding up an Elementor website](https://theplusaddons.com/blog/speedup-elementor-website-performance/). ## Where to get a Lottie file You have two routes. The fast one is the LottieFiles library, which offers "over 50k free and ready to use Lottie animations" you can filter, tweak the colors on, and download as JSON. The custom one is to build your own animation in After Effects and export it with the Bodymovin plugin, which gives you the same JSON output tailored to your brand. Either way you end up with a Lottie JSON file or a hosted URL, and that is the only ingredient the Elementor widget needs. ![LottieFiles WordPress plugin and animation library](https://theplusaddons.com/wp-content/uploads/2026/06/sS7l_ftS9K3IaZ1AgbC80ngGMCO2gSYUsbU9L_PG9sfJyc9AwpERG01sRhWgshPBHv-iYEoOsE6iK1Aei3TdLg-scaled.png)The LottieFiles library offers over 50k free animations you can download as JSON. Source: wordpress.org ## How to add a Lottie animation in Elementor with The Plus Addons The Plus Addons for Elementor ships a dedicated Lottiefiles Animation widget, so there is no shortcode or custom code involved. Here is the flow: - Edit your page in Elementor and search the widget panel for the Lottiefiles Animation widget. Drag it where you want the animation.- Add your animation. The widget lets you "Import Lottie from URL, JSON Code or JSON File," so you can paste a LottieFiles URL, drop in the JSON code, or upload the JSON file directly.- Set playback. You can "Repeat/ Loop Lottie Animations" and "Adjust Lottie Animation Speed," and play the animation in multiple modes.- Pick a render mode. The widget supports "Multiple Lottie Render Modes," so you can choose how the animation is drawn for the best balance of fidelity and performance.- Style it. You can "Add Lottie Heading & Descriptions," adjust layout and alignment, and customize the rest to match your design. A nice touch is that the widget loads the Lottie in the backend during editing, so you see the real animation while you build instead of a placeholder. If you are new to motion on Elementor in general, our walkthrough of [scroll animations in Elementor](https://theplusaddons.com/blog/scroll-animations-in-elementor/) is a good companion. ![The Plus Addons Lottiefiles Animation widget for Elementor](https://theplusaddons.com/wp-content/uploads/2026/06/ScwG_I1QuWcbu8LTrOx7p_jy5G3x0FTknpF1Yp-EqpJJx1yXwr1754CBuyyqCfFDeUFwl9SyNJyAQOqWotpUrw-scaled.png)The Plus Addons Lottiefiles Animation widget imports a Lottie from a URL, JSON code, or JSON file. Source: theplusaddons.com ## Adding a scroll-triggered Lottie This is the part most Lottie tutorials never get to. Alongside the standard widget, The Plus Addons includes a separate On Scroll Lottiefiles Animation widget. It takes the same Lottie sources (URL, JSON code, or JSON file) but ties the animation to the visitor scrolling, so the motion plays as the section comes into view rather than just looping on autoplay. That makes it a strong fit for storytelling sections, step-by-step explainers, or a hero illustration that should feel alive as the page moves. Use the standard widget for ambient loops and icons, and reach for the on-scroll widget when the animation is meant to react to the reader. ![The Plus Addons On Scroll Lottiefiles Animation widget for Elementor](https://theplusaddons.com/wp-content/uploads/2026/06/7WqknvxYYMHhJ4nAIFLV4d2nfcKt9ptwtmdvBoPs9rP_Y40VEUReYLrYY7GGiN-uu75q_hTk-WAa_wbIkVaKGQ-scaled.png)The On Scroll Lottiefiles Animation widget ties the animation to the visitor scrolling. Source: theplusaddons.com ## The Plus Addons vs Elementor's native Lottie widget To be fair and accurate: Elementor Pro already includes a native Lottie widget. It is a Pro-only widget, and it offers triggers for Viewport, Scroll, Hover, Click, or None, along with loop and reverse options. If you are on Pro and only need a simple viewport or hover play, that widget is perfectly capable. Where The Plus Addons for Elementor differs is the dedicated On Scroll Lottiefiles Animation widget as a separate tool, the flexibility to import from a URL, JSON code, or a JSON file, and the live backend load while editing. The honest summary: both let you put a Lottie on the page, so pick based on whether you already run Elementor Pro and how much you lean on the scroll-driven variant. For a wider sense of what else the addon brings, our roundup of the [best free Elementor addons](https://theplusaddons.com/blog/best-free-elementor-addons/) is a useful starting point. ![Elementor Pro native Lottie widget documentation](https://theplusaddons.com/wp-content/uploads/2026/06/grZZTdQof_sbVTtlFgQ-cLqs-kAIxh1LBgZgQsnlswRb9JOGzz7Iis8KPh93LuF8n1wBOc-3Fw99l_iSbt3Qpw-scaled.png)Elementor Pro ships its own native Lottie widget with viewport, scroll, hover, and click triggers. Source: elementor.com ## Tips and common gotchas A few things keep Lottie animations from working against you: - Keep the source file sensible. Lottie is light by nature, but a hugely complex animation with thousands of paths can still get heavy, so preview the file size before you commit.- Mind the render mode. SVG rendering tends to look crispest, while canvas can perform better on very complex animations, which is why having multiple render modes available matters.- Respect reduced motion. Some visitors set a reduced-motion preference for accessibility, so avoid making a critical message depend on an animation that someone may never see move.- Do not autoplay everything. Looping motion everywhere is distracting. Reserve it for one or two focal points, and consider the scroll-triggered widget so motion is purposeful. If you like the idea of vector motion but want it on icons specifically, our guide to [coloring custom SVG icons in Elementor](https://theplusaddons.com/blog/how-to-color-custom-svg-icons-in-elementor/) and the broader set of [CSS hover effects in Elementor](https://theplusaddons.com/blog/css-hover-effects-in-elementor/) cover the lighter end of the spectrum. ## Wrapping up Lottie solves the oldest problem in web animation: getting smooth, sharp motion without a heavy file. You grab a JSON animation from the LottieFiles library or export your own, drop it into the Lottiefiles Animation widget, and set the loop, speed, and render mode. When you want the motion to react to the reader, switch to the on-scroll widget. The Plus Addons for Elementor gives you both widgets as part of its 120+ Widgets & Extensions. See the full set on the [pricing page](https://theplusaddons.com/pricing/) and add motion that does not cost you page speed. ## Suggested reading - [Scroll Animations in Elementor: A Practical Guide](https://theplusaddons.com/blog/scroll-animations-in-elementor/)- [Best WordPress LottieFiles Animation Plugins](https://theplusaddons.com/blog/best-wordpress-lottiefiles-animation-plugins/)- [CSS Hover Effects in Elementor](https://theplusaddons.com/blog/css-hover-effects-in-elementor/)- [How to Add a Parallax Effect in Elementor](https://theplusaddons.com/blog/add-parallax-effect-in-elementor/)