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
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
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.
<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!