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="https://unpkg.com/@lottiefiles/lottie-player@most recent/dist/lottie-player.js"> </script> <lottie-player src="https://assets9.lottiefiles.com/packages/lf20_pghdouhq.json" background="transparent" velocity="one" design="width: 300px height: 300px" loop autoplay> </lottie-player>
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!
