Limited time offer. Pay once use FOREVER. 50,000+ Lottie animations & illustrations

Learn more

How to Add Lottie Animations to Webflow

By Aram Movsisyan

Date 16 02 2023

How to Add Lottie Animations to Webflow

Lottie animations are a fantastic way to add life to your website and make it more interactive for your users. Not only do they look great, but they're also lightweight and easy to implement. If you're using Webflow as your website builder, adding Lottie animations to your site is a breeze.

In this article, we'll walk you through the process step-by-step, so you can confidently start incorporating Lottie animations into your Webflow projects.



Why Lottie Animations are Essential in 2023

Lottie animation files are JSON-based, meaning they are built with JavaScript. As a result, the format presents numerous benefits for anyone building web pages or applications.

Below are 3 of the most significant benefits of implementing the technology in your designs.

Interactivity – Lottie is the easiest way to increase interactivity on your pages or web-based app.

Customization – The JSON-based format allows you to make changes without design experience or software.

Page Load Speeds – Including animation has always been a trade-off for page load speeds. However, Lottie is exponentially smaller than GIF, SVG, and MP4, allowing you to create interactive designs without bogging down your page load speeds.

Sourcing a Premium Quality Lottie Animation

The first step in adding Lottie to a Webflow application is to find and customize a premium animation.

Navigate to Creattie

Add Lottie Animations to Webflow step1

The Creattie Lottie library features an extensive selection of animated illustrations and icons ready to be customized and implemented into your designs. Choose what type of asset you'd like to work with and browse the available artwork.

Browse by Collection, Type, Style, or Industry

Add Lottie Animations to Webflow step2

We are choosing from the Interface Animated Illustrations collection. Creattie releases new animation packs frequently that are perfect for building a cohesive project. We've picked the Good Job animation to add to our web pages.

Customize your Design

Next, let's edit the animation's colors. We've saved some skin tones into the color customizer. You can also pick colors with the following:

Add Lottie Animations to Webflow step3
  • Recently used colors
  • Choosing RBG code
  • Clicking on the color spectrum
  • Interface color selector
Add Lottie Animations to Webflow step4


Once your animation looks perfect, click DOWNLOAD. For this tutorial, we'll need the JSON file and code to embed the Lottie animation. (You'll have access to the EMBED button once you've downloaded the JSON file.)

Add Lottie Animations to Webflow step5

Adding Lottie Animations to Webflow's CMS

Now that we have our Lottie animation, we can add the design to our Webflow project. First, we'll work in the CMS, then add to a web page layout with the Designer.

Copy Code Snippet

For the CMS, we have to embed the animation's code. Click the EMBED button in Creattie, and you'll see a pop-up with more customization options. Here you can change the following:

  • Size
  • Delay
  • Speed
  • Trigger
Add Lottie Animations to Webflow step6

All the changes made in the pop-up editor are reflected in the code snippet, meaning you can make changes here or once it's on the web page.

Click COPY once you're satisfied with the animation.

Navigate to Webflow CMS

Add Lottie Animations to Webflow step7

We're ready to head over to Webflow!

Click on CMS in the toolbar and select a file you want to add your Lottie design.

Paste Code into <> Editor

Add Lottie Animations to Webflow step8

Add the code copied to your clipboard by clicking the "+" icon and then the code snippet "<>" symbol.

Add Lottie Animations to Webflow step9

Paste in the code and click SAVE AND EXIT.

View Changes

You won't be able to see the changes in the CMS editor, but if you publish, you can view your page with the new Lottie animation.

If you need to make changes, you can go back into the <> editor and adjust the size, speed, delay, background color, or trigger. To adjust the color, you'll need to head back into Creattie, make adjustments and get a new code snippet.

Implementing Lottie into Webflow's Page Builder

Now let's add a Lottie animation to the page designer. For this part of the tutorial, we'll need the animation as a JSON file. If you are following along, you should have the file already in your downloads folder, but if not, click DOWNLOAD in the Lottie asset editor.

Add Lottie Animations to Webflow step10

Navigate to the Webflow Designer

Choose which page needs to be brought to life with our interactive Lottie design. For the tutorial, we will work with a Contact Us page.

Add Lottie Animations to Webflow step11

Add a Section

Click the section you want to edit, then click the ADD ELEMENT button in the top left corner of the editor. We're adding 2 columns and inserting the Lottie animation into one to contain the design.

Add a Page Element

Here's where the magic happens!

Click the ADD ELEMENT button again. Then, scroll down to the Media section, where you will see the "Lottie Animation" option.

Add Lottie Animations to Webflow step12

Drag the icon into the section you want to edit.

Upload Lottie Animation

You'll notice the "Lottie Animation Settings" pop-up in your editor; click REPLACE LOTTIE SEQUENCE.

Add Lottie Animations to Webflow step13

Here's where you upload your Lottie animation by clicking the upload cloud in the top right corner. Once you upload, the design should appear in the "Assets" toolbar on the left side of the editor. Next, click your animation, which should immediately render on the page.

Add Lottie Animations to Webflow step14


Now that the design is on the page, you can utilize the full editor on the right-hand toolbar. Here you can toggle between the "Style," "Element Settings," "Style Manager," and "Element Trigger" options at the top.

Add Lottie Animations to Webflow step15

To change the size of the animation, click the brush icon. Next, expand the SIZE row and select WIDTH. You can change using multiple parameters; we've picked PX and brought the animation down to 400PX.

Add Lottie Animations to Webflow step16

You can also change the positioning, border, effects, and more in the "Style" section.

To set the animation to Loop, navigate to the "Element Settings" tab and check the Loop radio button.

Webflow provides you with many customization options that will help make the animation fit the design and aesthetic of your page. However, if you want to change the colors, you'll need to go back into Creattie, make changes, and re-download the asset

Final Words

Incorporating Lottie animations into your Webflow projects is a simple and effective way to enhance the user experience and make your website stand out.

With this step-by-step guide, you now have the knowledge and tools to add Lottie animations to your Webflow projects with confidence. Whether you're looking to create eye-catching loading animations, informative graphics, or dynamic buttons, Lottie animations are a versatile and valuable addition to your website design toolkit. So, go forth and make your website come to life, and don't forget to check out the entire Creattie librarery!

Ignore me if you can

Attract, impress and win more customers with Lottie animations by Creattie.