Gold Penguin Logo with Text

How To Add Lottie Animations To WordPress Breakdance Builder

Easily how to add Lottie animations to a Breakdance Builder website.
Updated August 23, 2022

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

Breakdance has a native visual block for Lottie files. To use it, drag the element from the visual builder into your content area. Use the animation library to find an asset URL, simply paste it into the block, and your element should be good to go

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="">

<lottie-player src=""  background="transparent"  speed="1"  style="width: 300px; height: 300px;"  loop  autoplay>

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!

Want To Learn Even More?
If you enjoyed this article, subscribe to our free monthly newsletter
where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.
Written by Justin Gluska
Justin is the founder of Gold Penguin, a business technology blog that helps people start, grow, and scale their business using AI. The world is changing and he believes it's best to make use of the new technology that is starting to change the world. If it can help you make more money or save you time, he'll write about it!
Notify of

1 Comment
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Join Our Newsletter!
If you enjoyed this article, subscribe to our newsletter where we share tips & tricks on how to make use of some incredible AI tools that you can use to grow and optimize a business