LIMITED TIME OFFER

Get a lifetime access.

Learn more

How to Add Lottie Animation to Your Weebly Site

By Aram Movsisyan

Date 18 08 2022

Lottie
How to Add Lottie Animation to Your Weebly Site

Weebly is a popular no-code CMS platform that gives anyone access to a professional website without any web development experience. In this tutorial, we will cover how to incorporate Lottie animations into the builder to increase engagement without bogging down web pages. You will learn every step of the process, including where to find a premium library of free Lottie animations.

Add Life to your Weebly Website

How to Add Lottie Animation to Your Weebly Site

We're adding Lottie animation to the design-forward website above. The page looks nice stylistically but has too much text in the middle sections. Animation will keep users on the page and incentivize them to read the paragraphs rather than scroll through.

How to Add Lottie Animation to Your Weebly Site

Find a Premium Lottie Animation

The source of your animation is critical. Cheap designs won't capture visitors' attention and can bring down the overall quality of your website. We're using artwork from the Creattie library; you can find thousands of premium animated icons and illustrations perfect for any industry.

How to Add Lottie Animation to Your Weebly Site

We'll be adding two animated illustrations - Worldwide Delivery and Restful Work. Both fit the aesthetic and will add value to the webpage we're working with.

How to Add Lottie Animation to Your Weebly Site

Customize to Fit Branding

Once you've picked your design, you can customize the colors to match your page's branding. Creattie allows you to choose colors from a color spectrum or ID.

How to Add Lottie Animation to Your Weebly Site
How to Add Lottie Animation to Your Weebly Site

We've picked colors directly from our webpage's hero image. Just paste in the color ID, and you'll see the changes in real-time in the editor.

Download and Embed

Once your design looks perfect (don't worry, you can easily go back and make changes), click the 'Download' button. Once the design is downloaded, an 'Embed' button will appear. You can click 'Embed' without downloading if you are working with a free Creattie design.

We must embed when working with Weebly because there isn't a way to render JSON files in the builder without doing some serious hard coding. Embedding the code is as easy as copying and pasting, so don't worry if you haven't worked with HTML.

Modify Animation Attributes

How to Add Lottie Animation to Your Weebly Site

After clicking 'Embed,' you'll be directed to the Creattie editor. Here you can change the following:

Once you've selected your preferred specifications, click 'Copy.' The code snippet will be saved to your clipboard and ready to add to your webpage.

Drag' Embed Code' Into Section

Now we can navigate to the Weebly builder. Drag the 'Embed Code' widget from the left toolbar directly into the section you want to edit.

How to Add Lottie Animation to Your Weebly Site

Paste in the code and watch your webpage come to life.

How to Add Lottie Animation to Your Weebly Site

You can align the page element just under the code editor; we've centered the animation to fit above our text.

How to Add Lottie Animation to Your Weebly Site

Click out of the element and publish the webpage to check if the design is rendered. The process isn't perfect, you may not see your animation in the builder, but it should show up once you've published it to the web.

Repeat the Process

We're adding multiple animations to the page. Typically, animated designs of this size would slow down the webpage, hurting your SEO and damaging the user experience, but Lottie is tiny and won't affect page load speeds.

Both animations are included in the section below.

How to Add Lottie Animation to Your Weebly Site

The middle of the webpage now includes motion and a cohesive color pallet to keep the user interested. Large text blocks are boring and a leading contributing factor to high bounce rates.

Front-End Customization

One of the most significant advantages of working with JSON-based animations is making changes directly from the editor. Even if you aren't an experienced web developer, making changes just takes a few seconds.

Below is the code snippet in Weebly.

How to Add Lottie Animation to Your Weebly Site

If you want to change the speed of the animation, just increase or decrease the number after 'speed=' and keep it in quotations. Modify the trigger with the following string values:

The Creattie embed has a style attribute that allows you to change the alignment, include a border, or add other in-line CSS commands.

Embrace the New Technology

Adding Lottie animations to Weebly isn't a perfect process yet. Lottie is still a new technology, and most web builders haven't included software to accommodate JSON animations adequately. Ideally, you would have the option of uploading a JSON file and be able to control the characteristics from the toolbar rather than in the code.

Other CMS platforms like Elementor have built-in software to simplify the process. So, it's only a matter of time before Weebly includes a Lottie widget or an 'add-on' to give users more ways to incorporate animation into their designs.

Final Words

Working with Lottie has significant advantages over other types of animation file formats. While platforms like Weebly don't have specific tools to accommodate the new technology, the process is extremely easy. In addition, your web pages won't be slowed down, and you can customize directly from your builder.

We highly recommend incorporating animation in your web designs, and Creattie is the best source for premium Lottie animations. Check out the entire library and try hundreds of designs 100% free of charge.
 

Want to get free Lottie animations?

Sign up now and get thousands of free premium icons and Lottie animations.
Let's Go