3 Ways to Embed Lottie Animations in Your Website


How to Embed Lottie Animations to Your Website?

 Why adding a Lottie animation to a website is a great idea? Well, first of all, animations are a great way to create exciting visuals. Aside from that, Lottie animations have many advantages compared to other types of formats. Being JSON-based, Lotties can be imported on any platform, and the whole process is as easy as adding basic images. JSON files are much smaller than PNG pictures and GIF animations, which is much better for web optimization. Lottie can be viewed from any device, as they are scaled without loss in quality. Not mentioning you can edit the files while accessing them in a giant library of free animations. You can create and ship Lotties as needed, and the process is quite simple.

So the benefits of Lottie include:

  • Tiny size
  • No limitations to scaling
  • No damage to quality
  • Cross-platform support
  • Open libraries with free files
  • Interactive and editable

Before you even explore your options on how to add Lottie animation to a website, you can choose to create a Lottie from scratch or use one pre-made from the library. You can use LottieFiles with your tools, such as Figma, WordPress, Adobe XD, Visual Studio Code, and Google Workspace. You can access Windows, Mac, Android, React, and Vue libraries. But the full extent of the list is limited, as Lottie is natively supported by a wide range of services, so the high chances are that the tools you use to support Lottie. There are dozens of plugins and integrations and over 250,000 global companies, such as Google, Duolingo, Uber, and many more.

If you are curious about a more detailed review of the advantages of Lottie, check out the article we’ve written on the topic. So the only question is: why are you still not using them? Is it because you are not sure how to integrate Lotties? In this case, we’ve got your back.

There are several ways to add LottieFiles, depending on your website. We created this guide for embedding Lottie animations on the website to compile different options in one article as a wide range of services natively support Lottie.

Contact us

3 Ways to Add Lottie Animations to a Website

There are several ways to add Lottie animations to a website:

  • Integrate animations with HTML
  • Add Lottie with the oEmbed link provided in the Lottie library
  • Insert Lottie animation into CMS with native support and no code needed on the example of Webflow

Add Lottie animations in WordPress with HTML

This is the most straightforward answer on how to embed Lottie animations into a  website, as you directly use the code part to insert it into HTML and JavaScript to add any needed changes. Remember that you will need to be comfortable integrating changes directly in HTML. On the other hand, if you have appropriate skills, this option gives you an opportunity to implement more advanced changes directly.

  1. Choose your animation in the Lottie library and copy the Lottie Animation URL.
  2. Further below, you will find the “Use animation in” section, where you need to pick “<html>.”
  3. The previous step takes you to the “Generate Code” webpage. You can customize your file here, adjusting the color, speed, size, etc.
  4. Under panels with settings, you will see several checkboxes. You need to un-tick “Controls” to see a generated HTML code at the bottom of the page. Copy the code from the <lottie-player> part of the code. Don’t close this window yet; we will need the <script> part later.
  5. In WordPress, create a new block of “Custom HTML,” as we will insert it. Paste and save your code to include Lottie animations in your web pages.
  6. In order for animations to play, you need to have a Simple Custom CSS and JS plugin in WordPress. Open the plugin’s dashboard. You’ll see three options near “Custom code”: you need to choose “Add HTML code.”
  7. Type in a title and paste the <script> part of the Lottie code in the new field. Now your animation should work.

Embed Lottie animations without code

There is an easy option to implement Lottie animation to a website. If you are using a tool or platform with Lottie as a native feature, such as Notion, for example.

  1. Choose one of the hundreds of animations in the Lottie library and click on it. Make sure to edit it here if you want to implement any changes, as this option will not be available later in this method.
  2. On the bottom right is a panel with “oEmbed URL.” Copy the link that you can see below.
  3. Insert and “embed” block. Insert the copied link and click “Embed link.” And you’re done!

How to implement Lottie animations in Webflow

Using no-code and low-code solutions is a great way to optimize the process of building a website, including its UX/UI design. With native support for Lottie in Webflow, you can embed animations and even create triggers for interactivity. All while not using a single line of code yourself. How cool is that? You only have to fulfill these steps to add a Lottie animation to your website on Webflow.

  1. Choose a Lottie animation you want to integrate. As always, you can either create a custom one using After Effects or download an animation from Lottie library for free.
  2. Open your project in Webflow. You can add LottieFile by simply dragging it into the grid of your UI or doing so through the “Upload” button. Adjust the position of the animation as you see fit.
  3. You can set up triggers for various actions or even micro-interactions. For example, an animation can be played when a user hovers, scrolls, or clicks on Lottie, which is great for an interactive user experience.
  4. Go to the live version of the website, and you will see your animation here. No additional steps or integrations are needed.

Challenges with adding Lottie animations to a website

There are a few problems when you want to add Lottie animations to a website, as most tools and platforms natively support those types of animations. 

You can run into difficulties when:

  • You directly temper the HTML code of Lottie without much understanding, which can produce issues and bugs
  • You don’t have the necessary plugins installed in such cases like WordPress, so your animations won’t play on the live website
  • You want to use a custom animation, in which case, you will either need to be able to use After Effects for this purpose or hire a designer to create one for you

Aside from that, Lotties are really well optimized for use, as they are tiny in size, cross-platform, and editable. There are also many options available in Lottie libraries, where you can download files for free. Most platforms and tools support Lottie natively, so there are so many possibilities in terms of digital design and interactivity.


As you have seen, there are several options for embedding Lottie animations to a website. There are a few challenges regarding it, as LottieFiles themselves are very convenient for digital use. There are a lot of advantages to JSON-based animations, and in this article, we figured out the ways to embed them into a website. Whether you choose to use pre-made animations or create some from scratch, you can spend some time with this guide and integrate them where you need them. Or hire a professional to create and integrate custom Lotties to save time and effort and deliver high-quality, unique work.

Let us make it easy for you

We have worked with Lottie professionally for several years, so if you need to set up Lottie animations on a website, we’d be happy to handle it for you. Our designers have extensive experience providing Webflow web design services, crafting attractive UI designs, and incorporating engaging motion designs. We will incorporate custom Lottie animations into your website and make them look good. Animations will help make your website more visually appealing, illustrate your point better, guide users through the pages organically and help explain your services quickly. 


How can I add Lottie animations on Wix?

Adding a Lottie animation to a website is a simple process. First, access the Editor on your panel, and choose “Embed code.” Find “Animations” and pick Lottie to embed into your website.

Are Lottie animations free for commercial use?

Yes. LottieFiles are animations free for use, modification, and publishing on your website, as stated on Lottie’s official website. That includes the case where you want to implement Lottie animation to a website for commercial purposes.

Is LottieFiles better than GIFs?

Lotties are much smaller than any GIF file and are incredibly simple to implement into your website. This makes Lottie better optimized for web development, considering Lottie is a code-based animation that you can embed directly into HTML.

Is LottieFiles better than GIFs?
Is LottieFiles better than GIFs?
plusplus activeminus

Lotties are much smaller than any GIF file and are incredibly simple to implement into your website. This makes Lottie better optimized for web development, considering Lottie is a code-based animation that you can embed directly into HTML.

Was this article helpful for you?
Please, rate it

Let's scale your business today

Schedule a consultation with our representative to talk about development services with no obligations from your side. Take a part in a professional discussion that will provide you

A reply from our manager within 24 hours
Eye icon
Approved time of a meeting convenient to you
A folder icon
WA signed NDA provided the project information needs to be confidential
Graph icon
Defined project scope, specifically the requirements, deadlines, and cost estimation