How to Add Lottie Animations to your WordPress

How to Add Lottie Animations to your WordPress

Animation is, undeniably, becoming one of the most sought-after elements. Its adequate use can surely make your website look more attractive. Out of a lot of options available out there, GIF is a prevalently used format across the globe by web designers.

If you’re familiar with this domain, chances are you’d have worked with either GIF or Adobe Flash before. However, one of the major issues with both is that they make a web page heavier to load. Thus, in order to find a resolution, a group of engineers came up with Lottie in 2017.

Quiet easily, Lottie created a buzz in web development and designing a community for being a lighter alternative. Moreover, a Lottie file supports varying platforms as well, including web, iOS and Android.

So, if you’re thinking of adding Lottie animations to your WordPress website, this article takes you through the process with ease. Let’s have a look at it further.

What are Lottie animations?

Lottie is a React Native, Android and iOS library that was developed by people at Airbnb and allows you to render After Effects animations in real-time. It also lets you use animations as easily on native apps as you would use static assets.

It makes use of animation data exported from Bodymovin – an open-source After Effects extension – as JSON files. The extension comes coupled with a JavaScript player that can render animations on the web. 

One of the best things about Lottie is that it lets engineers build richer animations without going through the painstaking overhead of re-writing. 

How to use Lottie animations on WordPress?

If you’re looking forward to adding Lottie animation to your WordPress website, there are a few ways that you can follow, based on the editor you’re using. Let’s find out about these methods one by one:

Finding the Right Animation

When thinking about adding a Lottie animation, you’re sure to come across a gamut of options. With this, it may become a bit taxing to find the right option. However, by following these steps, you can make the hunt much easier:

LottieFiles

Once there, you can find both free and premium animations

  • To find free animations, hover your cursor on the Discover option in the menu and click Free Animations
LottieFiles - Free Animations
  • Here, you can find a variety of animations and use them without paying a penny
  • However, if you wish to get premium animations, simply hover your cursor on the Discover option in the menu and click Marketplace
LottieFiles - Premium animations
  • Here, you can find varying paid animations

How to add a Lottie animation in Gutenberg?

As you’d know, Gutenberg is the default WordPress editor. To add a Lottie animation in this editor, you can use the custom HTML block. Follow these steps to do so:

  • Once you’ve selected a Lottie file that you wish to use, click on it
Free animations from LottieFiles
  • A window will appear with varying options
  • Under the ‘Use animation in…’ option, click <html>
Use animation in HTML
  • A new tab will open up where you’ll have to copy the generated code from the Generate Code section
Lottiefiles - Generate code
  • Now, open Gutenberg on your WordPress dashboard and add a new custom HTML block
  • Paste the copied code
Add HTML Block
  • If you wish to see how the animation is going to look, click the Preview tab
Preview Lottie animation
  • Also, if you wish to change the size, width or height of the animation, you can modify the code by replacing the width and height variables as per your preference

And, you are done. 

How to add Lottie animation in Elementor?

 If you’re using Elementor on your WordPress website, you can add Lottie animation with ease. Unlike Gutenberg editor, here you’ll get an option to customize animations thoroughly, like applying CSS filters, setting the size, triggering to begin the animation effect, and more.

However, one thing to be kept in mind is that you’ll need to use Elementor Pro because the widget doesn’t work with the free version. Once ready, follow these steps:

  • Open your WordPress dashboard 
  • On the left side menu, hover your cursor on Pages and click Add New (you can also choose to add an animation to a post if you want)
Add new page
  • Once the page opens, click Edit with Elementor button
Edit with Elementor
  • On the Elementor editor, add the Lottie widget to the required area
  • Now, go to the settings panel 
  • Under the Lottie widget, on the Source option, choose how you wish to add the file
Lottie widget

If you wish to upload a Lottie file on your own, choose the Media File option and choose the file by clicking the upload icon. However, if you wish to add a file from LottieFiles, you can choose the External URL option and paste the URL into the available field.

On the settings panel, you can open the Settings block to set up the trigger type, start and endpoints. If you wish to set the animation size, you can visit the Style tab and can apply CSS filters if you wish to.

Lottie Settings

Once you’re satisfied with the edits, click Publish button, and you’re done. 

Install WordPress Plugin REA

Responsive Elementor Widgets & Addons - Cyberchimps

Now that you’re ready to use Lottie animation on your site, give a try the REA Lottie widget that lets you add these animations seamlessly either through the source URL or by uploading the file. 

The plugin is extremely easy to activate and use. Furthermore, it provides you with plenty of efficient widgets as well. Let’s find out more about installing Lottie animations on your WordPress site through REA.

Step-By-Step Installation Guide

The REA plugin comes free with the purchase of Responsive Pro. You can buy Responsive Pro here: https://cyberchimps.com/pricing/ 

  • You can download the latest Responsive Elementor Addons Plugin from My Account > Downloads 
  • Login to your WordPress Dashboard. 
  • Go to Plugins > Add New 
Plugins - add new
  • Upload the downloaded plugin zip file
  • Install the Responsive Elementor Addons plugin and activate it 
Add Responsive Elementor Addons

Once the plugin is activated, it will ask you to install and activate the Elementor Plugin if it is not already installed.

How to add REA Lottie animation in Elementor?

  • Open your WordPress dashboard
  • Open a new page or post 
  • Add the REA Lottie animation widget there (you can either upload the animation file or copy-paste the link)
REA Lottie Widget

And you are done.

Additionally, the REA widget also allows you to customize Lottie animations to a great extent, such as:

SourceSelect the source type to add the animation from two options: external URL and media file
AlignmentSet the animation’s alignment as horizontal
CaptionSelect how the caption is going to be added from the given options: custom, caption, title, none
LinkSelect whether a custom link should be added or not
REA Lottie - Layout

Additionally, here are a few customizations you can do in the Settings panel of the widget:

TriggerChoose the action when the animation is triggered from the given options: none, scroll, on hover, on click, and viewport
LoopWhether animation will be played on loop or not
Play SpeedSet the play speed of the animation
Start & End PointSet the start and endpoints of the animation
ReverseWhether or not the animation should reverse
RendererSet the animation renderer type, be it Canvas or SVG
LazyloadWhether or not the animation should lazyload
REA Lottie - Settings

Apart from the ones mentioned above, you can also customize the following aspects:

Width & Max WidthSet the width and max-width of the animation container
Border Type & RadiusSet the border and its radius for the animation container
PaddingSet the animation container’s padding
Background Color, Opacity & CSS FiltersSet up the background color, opacity & CSS filters for every state of the animation container
REA Lottie - Animations

Wrapping Up

At last, it’s nearly undeniable that by adding Lottie animations to the WordPress website, you can easily make it look visually pleasing, thereby retaining more traffic than usual. So, follow the above-mentioned steps, make the most out of the REA plugin widget and add varying attractive animations to your site like never before.

Leave a Reply

Your email address will not be published.

*