February 5, 2023

How one can Add Lottie Animations to Your Website (3 Methods)

6 min read


Eye-catching photos and movies are a good way to impress on-line guests. Nevertheless, practically each web site makes use of them to reinforce the consumer expertise (UX). Subsequently, including these normal visuals to your pages is not sufficient to make your web site stand out from the group.

Happily, you may add Lottie animations to your web site to present you a aggressive edge. LottieFiles supplies a free library of animations you may simply add to your web site. Then, you should utilize them to spice up consumer engagement and improve your web site’s design.

On this submit, we’ll take a more in-depth have 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 participating, these sorts of visuals are seen all around the web. Then again, animations may give you a novel edge.

Plus, the anticipated international marketplace for the animation trade is predicted to rise by 60% over the following 9 years. Which means for those who begin utilizing them now, you may get forward of a rising development.

In reality, 61% of entrepreneurs used interactive content material as a digital engagement tactic final yr. Different methods included GIFs, which may also be used to show animations.

Lottie animations are a superb selection, largely as a result of their small file sizes:

LottieFiles website homepage

In reality, these information are 600% smaller than GIFs – You possibly can add them to your web site with out weighing something down. This will help you protect a optimistic UX.

Higher but, Lottie animations might be utterly custom-made to go well with your model identification. On prime of that, it’s an inexpensive resolution since LottieFiles supplies essentially the most intensive, free animation library. You’ll get entry to 1000’s of UI components, characters, and illustrations.

Get Content material Delivered Straight to Your Inbox

Subscribe to our weblog and obtain nice content material identical to this delivered straight to your inbox.

How one can Add Lottie Animations to Your Website (3 Methods)

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

Technique 1: Add Your Animation with oEmbed

Including your Lottie animations by means of oEmbed is the only technique on this information. The one draw back is that you just received’t be capable to edit the animation settings or set them as much as react to consumer interactions.

To get began with this technique, browse the LottieFiles animations library to search out the right animation on your web site. When you discover a design that you just 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):

Find the oEmbed URL in LottieFiles

Then, head to WordPress and open the web page or submit the place you wish to embody your animation. Subsequent, merely add a brand new Embed Gutenberg block:

Embed block in WordPress

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

Paste the oEmbed Lottie URL into the Embed WordPress block

Hit the Embed button to verify the motion.

At this level, you must see the animation seem in your web page:

Embed your Lottie animation in WordPress

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

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

Whereas the oEmbed technique is the only, utilizing the Lottie block for Gutenberg plugin can also be very simple. Plus, it permits you to 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:

Lottie block for Gutenberg plugin

You possibly can then log into your LottieFiles account or create an account without spending a dime.

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

Search for the Lottie block in WordPress

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 search out an animation you’ve beforehand uploaded.
  • Hit Insert from url to stick a JSON hyperlink.

If you happen to select the ultimate technique, you could find the JSON hyperlink on the Lottie web site:

Lottie JSON URL

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

Preview of the purple owl animation in Gutenberg

Now, within the Block settings, you may customise your animation. As an illustration, you may give it a clear background, change the scale, or set off the animation with totally different actions. You can even use the plugin to add a Lottie animation as a WordPress background.

Technique 3: Add Your Animation with HTML and JavaScript

Including your Lottie animation with HTML and JavaScript continues to be pretty simple, however it’s essentially the most complicated technique. Plus, you aren’t capable of see updates in real-time.

As a substitute, you must change between Gutenberg and your web site to preview your adjustments. Nonetheless, you could wish to use this technique for those who’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:

Lottie JSON URL

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

Embed Lottie animation using HTML

It will take you to the LottieFiles Net Participant:

The LottieFiles Web Player preview

Right here, you may select a background colour, 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 screen:

HTML code for your LottieFiles animation

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:

Adding a new Custom HTML block in the WordPress editor

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

Paste the Lottie HTML code into the Custom HTML WordPress block

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

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

Lottie Player JavaScript file

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

Install the Simple Custom CSS and JS plugin

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

Add HTML code with the Simple Custom CSS and JS plugin

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

Add the Lottie Player to WordPress with custom HTML

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

Lottie animation added to WordPress via HTML and JavaScript

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

Add Lottie Animations to Your Website Right this moment

Since photos and movies seem on virtually each web site, together with them in your pages isn’t more likely to make your designs stand out. Nevertheless, you may add Lottie animations to your web site to impress guests, mirror your branding, and enhance engagement.

To recap, listed below 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 technique to set your web site aside from the remainder is by designing customized pages which are distinctive to your model. At DreamHost, we are able to construct you a web site that’s one-of-a-kind, mobile-friendly, and optimized for serps. Take a look at our internet design plans immediately!

Get a Lovely Web site You’re Proud Of

Our designers will create a stunning web site from scratch to completely match your model.

custom website design



Source_link

Leave a Reply

Your email address will not be published.