Incorporating Lottie Animations in WordPress with Breakdance Builder

Web Development & Design
Surfer AI - Best All-in-one Assistant

- Your article will be ready in less than 20 minutes and it will be 10 times cheaper than using a dedicated writer.
- Create ready-to-rank articles in minutes with Surfer AI.
- Research, write, and optimize across industries with the click of a button.

Lottie animations can be a excellent way to include some pizzazz to your web site. They are effortless to use and can genuinely make your website stand out. In this tutorial, we will present you how to include Lottie animations to a Breakdance Builder web site.

What is Lottie

Lottie is an iOS, Android, and React Native library that renders Right after Results animations in actual time. Lottie utilizes animation information exported as JSON files from an open-supply Right after Results extension known as Bodymovin. The extension is bundled with a JavaScript player that can render the animations on internet, iOS, Android, and React Native.

Advantages of Utilizing Lottie in WordPress

Lottie animations are modest, light-weight, and effortless to use. They can be additional to any web site without having the want for coding or animation abilities. Lottie animations can be employed to enhance consumer encounter and engagement on a web site. Plus, they appear excellent!

Include Lottie to Breakdance in Visual Builder

Breakdance has a native visual block for Lottie files. To use it, drag the component from the visual builder into your articles location. Use the animation library to locate an asset URL, just paste it into the block, and your component ought to be very good to go

Include Lottie to Breakdance with a Customized Code Block

In purchase to only load JavaScript when it is necessary, we produced a customized code block that only runs on the web page that you are about to load an animation on. If you are organizing on employing tons of animations across your website, you may well want to contain the JavaScript in your international code block. Otherwise, include the following code snippet into a customized code block on just the pages that you want it.

Stage one: Uncover your animation

The initial stage is to locate the Lottie animation that you want to use. There are a number of distinct spots that you can locate these. The best way is to browse by means of their library of animations. As soon as you locate one particular that you like, scroll down and press “Use animation in html”. Customize the alternatives to your deciding on (we advocate turning of controls so you just see the animation). Copy the whole code with the two the script and animation tag.

Stage two: JavaScript Code

Now let us include the design and style to your website. Move a customized code block to the place the animation ought to be. In the code block editor, pick “JavaScript” from the dropdown menu. Paste in the following code with the whole code that you copied in stage one. It ought to appear one thing like this, but with your animation as the player:

<script src=" recent/dist/lottie-player.js">

<lottie-player src=""  background="transparent"  velocity="one"  design="width: 300px height: 300px"  loop  autoplay>

Stage three: Preview Positioning

That is it! Make confident to conserve to see how it seems to be on your website. You can use the positioning alternatives in the customized code block editor to move it close to if necessary. And that is it! You have efficiently additional a Lottie animation to your Breakdance Builder web site. If you want to find out much more about Lottie animations and how to use them, check out out their courses.

Have you employed Lottie animations on your web site? Allow us know in the feedback beneath!