Adding lottie animations in Builder

Visual Editor Help
1

You can upload a lottie animation in Builder multiple ways:

  1. Download the animation as a GIF and upload the file into a Builder image block.
  2. Download the animation as a MP4 and upload the file into a Builder video block.
  3. Grab the Embed URL and add the URL to a Builder embed block.
  4. Grab the embed code and add the code to a Builder custom code block.
2

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.

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

1088×821 34.2 KB
`

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.

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

2539×1116 75.9 KB

Next, let’s upload the Lottie file you’ll use. Please head to 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.

1961×1048 62 KB

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

<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

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.

3

The only way it worked for me is when I nested the custom code blocks inside of the box. If it is not working for you I would suggest doing that.