Add Lottie Animations to Your Website (3 Methods)

Eye-catching pictures and movies are an effective way to impress on-line guests. Nevertheless, almost each web site makes use of them to reinforce the person expertise (UX). Subsequently, including these customary visuals to your pages is not sufficient to make your web site stand out from the group.

Luckily, you’ll be able to add Lottie animations to your web site to present you a aggressive edge. LottieFiles offers a free library of animations you’ll be able to simply add to your web site. Then, you should utilize them to spice up person engagement and improve your web site’s design.

On this put up, we’ll take a more in-depth take a look at some key advantages of utilizing Lottie animations in your web site. Then, we’ll present you three easy methods so as to add these visible components. Let’s get began!

The Advantages of Including Lottie Animations to Your Website

Whereas movies and pictures could make your web site extra partaking, these sorts of visuals are seen all around the web. However, animations may give you a novel edge.

Plus, the anticipated world marketplace for the animation business is anticipated to rise by 60% over the following 9 years. Meaning should you begin utilizing them now, you may get forward of a rising development.

The truth is, 61% of entrepreneurs used interactive content material as a digital engagement tactic final 12 months. Different methods included GIFs, which may also be used to show animations.

Lottie animations are a wonderful selection, largely on account of their small file sizes:

The truth is, these information are 600% smaller than GIFs – You may add them to your web site with out weighing something down. This will will let you protect a optimistic UX.

Higher but, Lottie animations will be fully personalized to go well with your model identification. On high of that, it’s an reasonably priced resolution since LottieFiles offers essentially the most intensive, free animation library. You’ll get entry to 1000’s of UI components, characters, and illustrations.

Add Lottie Animations to Your Website (3 Methods)

Now that you already know the advantages of utilizing Lottie animations, let’s take a look at 3 ways so as to add them to your web site.

Methodology 1: Add Your Animation with oEmbed

Including your Lottie animations via oEmbed is the best technique on this information. The one draw back is that you simply gained’t be capable of edit the animation settings or set them as much as react to person interactions.

To get began with this technique, browse the LottieFiles animations library to seek out the proper animation on your web site. When you discover a design that you simply like, click on on the animation and easily copy the oEmbed URL (you have to to be logged right into a free account to do that):

Then, head to WordPress and open the web page or put up the place you need to embrace your animation. Subsequent, merely add a brand new Embed Gutenberg block:

Now, paste the oEmbed URL that you simply copied from the Lottie web site:

Hit the Embed button to verify the motion.

At this level, it is best to see the animation seem in your web page:

As we talked about earlier, you gained’t be capable of customise the animation when you’ve added it to your WordPress web page or put up. Subsequently, it’s essential you make all of the edits you need beforehand whilst you’re nonetheless on the Lottie web site.

Methodology 2: Add Your Animation Utilizing the Lottie block for Gutenberg Plugin

Whereas the oEmbed technique is the best, utilizing the Lottie block for Gutenberg plugin can also be very straightforward. Plus, it lets you instantly preview any adjustments you make to your designs.

First off, go to Plugins > Add New to put in and activate the Lottie block for Gutenberg plugin in WordPress:

You may then log into your LottieFiles account or create an account free of charge.

Subsequent, add a brand new block within the Gutenberg editor. Seek for the Lottie block and add it to your web page:

Right here, you’ll discover 3 ways to insert a Lottie animation in WordPress:

• Click on on Uncover animation to browse the LottieFiles library (you’ll want an account to do that).
• Choose Media Library to seek out an animation you’ve beforehand uploaded.
• Hit Insert from url to stick a JSON hyperlink.

Should you select the ultimate technique, yow will discover the JSON hyperlink on the Lottie web site:

When you’ve added the animation to your web page, you’ll be able to preview the design in Gutenberg:

Now, within the Block settings, you’ll be able to customise your animation. As an example, you may give it a clear background, change the size, or set off the animation with completely different actions. You too can use the plugin to add a Lottie animation as a WordPress background.

Methodology 3: Add Your Animation with HTML and JavaScript

Including your Lottie animation with HTML and JavaScript continues to be pretty straightforward, but it surely’s essentially the most advanced technique. Plus, you aren’t in a position to see updates in real-time.

As a substitute, you need to swap between Gutenberg and your web site to preview your adjustments. Nonetheless, it’s possible you’ll need to use this technique should you’re aware of HTML and searching for enhanced customization choices.

To get began with this strategy, click on on the animation within the LottieFiles library and duplicate the Lottie JSON file hyperlink:

Subsequent, scroll down till you see “Use animation in…” and choose <html>:

It will take you to the LottieFiles Internet Participant:

Right here, you’ll be able to select a background coloration, decide the animation’s measurement and pace, and extra.

Now, deselect the Controls checkbox and also you’ll see that some HTML code has been generated on the backside of the display:

Copy the road of code that begins with “<lottie-player>” and ends with “</lottie-player>”. Then, in WordPress, add a brand new Customized HTML block:

Paste the HTML that you simply copied from LottieFiles and click on on Save Draft within the high right-hand nook:

Your animation gained’t work simply but. First, you’ll must load the Lottie Participant JavaScript file in WordPress.

To do that, return to the LottieFiles Internet Participant and duplicate the script tag that begins with “<script>” and ends with “</script>”:

Now, head to WordPress and set up the Easy Customized CSS and JS plugin:

As soon as energetic, go to the plugin’s dashboard and select Add HTML Code:

You may give your code a title like “Provides Lottie Participant”. Then, paste the script tag within the editor and click on on Publish:

Now, return to the web page the place you inserted your HTML code. It’s best to see your Lottie animation if you swap to the preview:

If the animation is simply too huge or too small, you’ll be able to change the default parameters within the HTML code the place it says model= “width: X; peak: X;”.

Add Lottie Animations to Your Website At present

Since pictures and movies seem on virtually each web site, together with them in your pages isn’t prone to make your designs stand out. Nevertheless, you’ll be able to add Lottie animations to your web site to impress guests, replicate your branding, and enhance engagement.

To recap, listed here are 3 ways so as to add Lottie animations to your web site:

1. Add Lottie animations with oEmbed.
2. Add Lottie animations utilizing the Lottie block for Gutenberg plugin.
3. Add Lottie animations with HTML and JavaScript.

One other strategy to set your web site other than the remaining is by designing customized pages which can be distinctive to your model. At DreamHost, we will construct you a web site that’s one-of-a-kind, mobile-friendly, and optimized for engines like google. Try our internet design plans in the present day!