How To Add Lottie Animations To WordPress Breakdance Builder

Lottie animations can be a great way to add some pizzazz to your website. They are easy to use and can really make your site stand out. In this tutorial, we will show you how to add Lottie animations to a Breakdance Builder website.

What is Lottie

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time. Lottie uses animation data exported as JSON files from an open-source After Effects extension called Bodymovin. The extension is bundled with a JavaScript player that can render the animations on web, iOS, Android, and React Native.

Benefits of Using Lottie in WordPress

Lottie animations are small, lightweight, and easy to use. They can be added to any website without the need for coding or animation skills. Lottie animations can be used to improve user experience and engagement on a website. Plus, they look great!

Add Lottie to Breakdance in Visual Builder

Add Lottie to Breakdance with a Custom Code Block

In order to only load JavaScript when it is needed, we created a custom code block that only runs on the page that you're about to load an animation on. If you're planning on using tons of animations across your site, you might want to include the JavaScript in your global code block. Otherwise, add the following code snippet into a custom code block on just the pages that you need it.

Step 1: Find your animation

The first step is to find the Lottie animation that you want to use. There are a few different places that you can find these. The easiest way is to browse through their library of animations. Once you find one that you like, scroll down and press "Use animation in html". Customize the options to your choosing (we recommend turning of controls so you just see the animation). Copy the entire code with both the script and animation tag.

Step 2: JavaScript Code

Now let's add the design to your site. Move a custom code block to where the animation should be. In the code block editor, select "JavaScript" from the dropdown menu. Paste in the following code with the entire code that you copied in step 1. It should look something like this, but with your animation as the player:

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js">
</script>

<lottie-player src="https://assets9.lottiefiles.com/packages/lf20_pghdouhq.json"  background="transparent"  speed="1"  style="width: 300px; height: 300px;"  loop  autoplay>
</lottie-player>

Step 3: Preview Positioning

That's it! Make sure to save to see how it looks on your site. You can use the positioning options in the custom code block editor to move it around if needed. And that's it! You've successfully added a Lottie animation to your Breakdance Builder website. If you want to learn more about Lottie animations and how to use them, check out their courses.

Have you used Lottie animations on your website? Let us know in the comments below!