# Adding lottie animations in Builder

**URL:** <https://forum.builder.io/t/adding-lottie-animations-in-builder/1261>\
**Category:** Visual Editor Help\
**Created:** [October 29, 2021, 3:11pm UTC](https://forum.builder.io/t/adding-lottie-animations-in-builder/1261 "2021-10-29T15:11:10Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![logan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/logan/32/5564_2.png) [@logan](https://forum.builder.io/u/logan)\
**Post date:** [June 30, 2022, 7:52pm UTC](https://forum.builder.io/t/adding-lottie-animations-in-builder/1261/2 "2022-06-30T19:52:19Z")

</div>

If you’re looking to create an interactive Lottie, you can follow these steps to get started:

### Set up the JLottie Player

First, drag in a Custom Code block. Paste the following script into the custom code so that you download the Javascript needed to run the JLottie player.

```auto
<script  
   src="https://unpkg.com/@lottiefiles/jlottie@latest/dist/jlottie.min.js"  
   type="module">
</script>

```

 ![](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/4/4ac2ec334cc38f7ebf72e526f6043199015b0289.png)`

Now, let’s add a second script file in a new Custom Code block. This loads the animation into a box called “lottie-player” and uses the `path` to load the JSON of your Lottie file.

```auto
<script>   
  jlottie.loadAnimation({
   container: document.getElementById('lottie-player'),
   loop: true,
   autoplay: true,
   useWebWorker: false,
   path: '',   
}); 
</script>

```

Drag a box onto the canvas. Under Style \> HTML Attributes, create an “Id” attribute and set it to `lottie-player` . This will turn the box into your Lottie canvas.

 ![](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/f/f60d007d40b67d77392cf90d58c8ae010bd69ad0.png)

Next, let’s upload the Lottie file you’ll use. Please head to [builder.io/upload](http://builder.io/upload) and drag your Lottie JSON file into the upload window.

Click the card near the bottom of the window to copy the URL of the uploaded JSON.

 ![](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/8/89e152692181c9cef6619188d47aa515808c5801.png)

Back on your page, head to your second custom code block. Place the URL into the quotation marks at “path”:

```auto
<script>
   jlottie.loadAnimation({ 
      container: document.getElementById('lottie-player'), 
      loop: true,
      autoplay: true,
      useWebWorker: false,
      path: 'https://cdn.builder.io/o/assets%2Fe72778d8929447f0816e03adfc1ae859%2Fbd18cf1215c54e48ba03a52c348adf0e?alt=media&token=811bc0e1-87b1-4f68-8d38-6c2252cdd328&apiKey=e72778d8929447f0816e03adfc1ae859',   
    });
</script>

```

## Add an Interaction

To add an interaction, select the box you’re using as your Lottie canvas. Under Data \> Element Events, let’s use the `click` interaction to pause the Lottie.

Add a click interaction and set the `Action` to “Custom JavaScript”.

In the Custom JavaScript section, let’s pause the Lottie animation using the JLottie player’s “pause()” method.

`jlottie.pause('lottie-player')`

To read more about the player methods (such as play/pausing or setting animation frames) please check out the Github repo: [GitHub - LottieFiles/jlottie: A small-footprint lottie player in Javascript](https://github.com/LottieFiles/jlottie#methods)

Please note that, while using the Lottie player in some conditions, you may not see the animations load in the Editor. That’s because some JavaScript doesn’t run until it’s called while you’re in the Editor. To check out the most accurate results while working with Lottie Animations, use the “View Current Draft” option next to the publish button.

---

_[View the full topic](https://forum.builder.io/t/adding-lottie-animations-in-builder/1261)._