Are you looking for an easy way to add Lottie animation to your WordPress site? What is Lottie and why? This post will help if you are already familiar with Lottie animation or do not know what the term means. First, I will introduce what Lottie animation is and how it can become a useful tool for text news websites. Then, we will step by step demonstrate how to animate word press Lottie on the site using two different methods. If you are already familiar with Lottie animation and are only from the tutorial, you can also click the link to go directly to the tutorial section. The
What is Lottie animation? In short, with Lottie, you can easily add great animations to WordPress sites (or other sites). The library developed by airbnb can parse Adobe After effects animation exported to JSON using bodymovin. Then, by default, you can render in a web site (or mobile application). To be honest, I am not an engineer \/ designer, so many stories about Lottie have crossed my mind. The only thing you really need to know is that you can easily add animation to WordPress using Lottie. The
If you want to learn more about the form itself, please check the introduction article of airbnb. An example of Lottie animation the best way to learn what Lottie animation is and how it works is to experience it firsthand. To do this, you can browse to the lottiefiles web site. The article will continue below, and various animations can be explored for various use cases and niche markets. Most of these animations are free. However, critical business – the license is granted according to the author display license, so it can be used free of charge, but the author display must be available on the website. The
How does Lottie animation work? As mentioned earlier, Lottie animation uses JSON as the format. By default, this means that it does not work like GIF or \
How to use Lottie animation in WordPress this is a WordPress tutorial, so you can guess where it is going… The easiest way to add Lottie animation to WordPress is to use the WordPress Lottie animation plug-in. This tutorial will show you how to accomplish a task using two separate plug-ins. WP bodymovin – this free plug-in allows you to add Lottie animations and then use shortcut code to insert them anywhere on the site. Elementor – the elementor Pro includes dedicated Lottie widgets and provides free extensions. But before that, you must first find the Lottie animation you want to use, and then import the corresponding JSON. The
1. to select an animation and start searching JSON files, you must find the animation you want to use. The article will continue below. The easiest way to execute the article is to use the lottiefiles website mentioned above. Many of the animations on the site are free, and the appropriate Lottie JSON format has been used, so the content
Easily included in. Remember, the license for free animation requires that the author be shown. You can also find many other sources that provide after effects animation that can be exported using the bodymovin plug-in. But this adds some complexity, especially if you are not familiar with after effects. A good place to find this method is envato elements. The
However, lottiefiles is the simplest option, so we will continue to use it. Navigate to the animation area to view all free animations. When you find something you like, click open. I chose the WordPress wheel drive car animation. I don’t know why it exists, but I’m happy to do so. Then click the JSON button. the JSON file to your computer (to the file, you must register an account, but it is free). 2. if there is a JSON file in WordPress for adding Lottie animation, WordPress is ready to display the animation. The
Two options are also provided here. WP bodymovin – use shortcut code to include animation anywhere. Element – you can add animation to all element designs. To start WP body movin, use word press. Install and activate the free WP bodymovin plug-in on org. Then go to animation → add, and follow the steps below: Please specify a title to remember. Upload JSON files using the JSON data file selector. Click publish to upload the file and create a preview. Male
The story will continue below. The live preview of the animation should now be displayed. Select the animation renderer below. It is recommended to keep it as SVG. Then use the shortcode generator to further configure. For example, if you select the loop animation box, the animation continues to repeat. You can also increase performance by adding delayed loading and stopping animation when it leaves the viewport. Copy the shortcut code when you have finished selecting. Then, simply add its shortcut code to the location where you want to display the animation. The
In this way, you can see it at the front of the website. That’s all! To add more animation, simply repeat the process. If there is elementor elementor pro, elementor already contains its own Lottie animation parts that can be used for design. If there is no element pro, WordPress. You can also find the free elementor addon on on org, which provides Lottie widgets. For example, there is a free animemontor plug-in. We use and recommend elementor pro, so this will be used in this tutorial. The
To get started, simply drag it onto the Lottie component that you want to animate. Then, you can upload JSON files directly from the component settings (the element warns that you must enable JSON upload to perform this operation. By default, WordPress is disabled). And that’s all! Lottie animation must be displayed in the design. To control its working mode, you can expand the component setting part to control triggering, repetition, playback speed, delayed loading, etc. Starting using WordPress Lottie animation today is a great way to add fun and participation to the WordPress website. However, because it is a JSON file, it is difficult to understand how to add it to the content of word press. In this post,
We introduced two simple methods in detail. For methods that work in all settings, including the block editor, you can use the free WP bodymovin plug-in. Or, if you already use elementor, it is recommended that you use a dedicated Lottie component in elementor pro to complete the operation. Is there still a problem with how WordPress uses Lottie? Ask in comments!
